Plan Done, Dockerization and cleanup

frontend/Dockerfile

@@ -0,0 +1,11 @@
+FROM node:18-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+EXPOSE 80

frontend/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        proxy_pass http://backend:3001;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/package-lock.json

@@ -8,8 +8,10 @@
       "name": "farma-finder-frontend",
       "version": "1.0.0",
       "dependencies": {
+        "leaflet": "^1.9.4",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-leaflet": "^4.2.1"
       },
       "devDependencies": {
         "@testing-library/jest-dom": "^6.4.0",
@@ -909,6 +911,16 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@react-leaflet/core": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz",
+      "integrity": "sha512-Qk7Pfu8BSarKGqILj4x7bCSZ1pjuAPZ+qmRwH5S7mDS91VSbVVsJSrW4qA+GPrro8t69gFYVMWb1Zc4yFmPiVg==",
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2959,6 +2971,11 @@
         "node": ">=6"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz",
+      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
+    },
     "node_modules/local-pkg": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.5.1.tgz",
@@ -3468,6 +3485,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-leaflet": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-4.2.1.tgz",
+      "integrity": "sha512-p9chkvhcKrWn/H/1FFeVSqLdReGwn2qmiobOQGO3BifX+/vV/39qhY8dGqbdcPh1e6jxh/QHriLXr7a4eLFK4Q==",
+      "dependencies": {
+        "@react-leaflet/core": "^2.1.0"
+      },
+      "peerDependencies": {
+        "leaflet": "^1.9.0",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",

frontend/package.json

@@ -9,16 +9,17 @@
     "test": "vitest"
   },
   "dependencies": {
+    "leaflet": "^1.9.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-leaflet": "^4.2.1"
   },
   "devDependencies": {
-    "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.0.8",
-    "vitest": "^1.6.0",
-    "@testing-library/react": "^14.2.0",
     "@testing-library/jest-dom": "^6.4.0",
-    "jsdom": "^24.0.0"
+    "@testing-library/react": "^14.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "jsdom": "^24.0.0",
+    "vite": "^5.0.8",
+    "vitest": "^1.6.0"
   }
 }
-

frontend/src/App.test.jsx

@@ -1,16 +1,77 @@
-import { describe, it, expect } from 'vitest'
-import { render, screen } from '@testing-library/react'
-import App from './App.jsx'
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent, act } from '@testing-library/react'
+import PublicView from './views/PublicView.jsx'
 
-describe('App', () => {
-  it('renders the app header', () => {
-    render(<App />)
-    expect(screen.getByText(/FarmaFinder/i)).toBeInTheDocument()
+beforeEach(() => {
+  vi.useFakeTimers()
+})
+
+afterEach(() => {
+  vi.restoreAllMocks()
+  vi.useRealTimers()
+})
+
+describe('PublicView', () => {
+  it('renders search bar on load with no results', () => {
+    render(<PublicView />)
+    expect(screen.getByPlaceholderText(/search for a medicine/i)).toBeInTheDocument()
+    expect(screen.queryByRole('list')).not.toBeInTheDocument()
   })
 
-  it('renders the view switcher', () => {
-    render(<App />)
-    expect(screen.getByText(/Public Search/i)).toBeInTheDocument()
-    expect(screen.getByText(/Admin Panel/i)).toBeInTheDocument()
+  it('does not fetch for queries shorter than 2 chars', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch')
+    render(<PublicView />)
+
+    fireEvent.change(screen.getByPlaceholderText(/search for a medicine/i), {
+      target: { value: 'a' },
+    })
+
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+
+    expect(fetchMock).not.toHaveBeenCalled()
+  })
+
+  it('fetches and displays results for valid query', async () => {
+    const medicines = [
+      { id: 'REG001', name: 'Ibuprofeno 400mg', active_ingredient: 'Ibuprofeno', dosage: '400mg', form: 'Comprimido' },
+    ]
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      json: async () => medicines,
+    })
+
+    render(<PublicView />)
+
+    fireEvent.change(screen.getByPlaceholderText(/search for a medicine/i), {
+      target: { value: 'ibu' },
+    })
+
+    await act(async () => {
+      await vi.runAllTimersAsync()
+    })
+
+    expect(screen.getByText('Ibuprofeno 400mg')).toBeInTheDocument()
+  })
+
+  it('clears results when query is cleared after a search', async () => {
+    const medicines = [
+      { id: 'REG001', name: 'Ibuprofeno 400mg', active_ingredient: 'Ibuprofeno', dosage: '400mg', form: 'Comprimido' },
+    ]
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      json: async () => medicines,
+    })
+
+    render(<PublicView />)
+    const input = screen.getByPlaceholderText(/search for a medicine/i)
+
+    fireEvent.change(input, { target: { value: 'ibu' } })
+    await act(async () => { await vi.runAllTimersAsync() })
+    expect(screen.getByText('Ibuprofeno 400mg')).toBeInTheDocument()
+
+    fireEvent.change(input, { target: { value: '' } })
+    await act(async () => { await vi.runAllTimersAsync() })
+
+    expect(screen.queryByText('Ibuprofeno 400mg')).not.toBeInTheDocument()
   })
 })

frontend/src/components/PharmacyMap.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+
+// Fix default marker icon broken by webpack/vite asset bundling
+delete L.Icon.Default.prototype._getIconUrl;
+L.Icon.Default.mergeOptions({
+  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',
+  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',
+  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',
+});
+
+function PharmacyMap({ pharmacies }) {
+  const located = pharmacies.filter(p => p.latitude != null && p.longitude != null);
+
+  if (located.length === 0) return null;
+
+  const center = [
+    located.reduce((s, p) => s + p.latitude, 0) / located.length,
+    located.reduce((s, p) => s + p.longitude, 0) / located.length,
+  ];
+
+  return (
+    <div className="pharmacy-map-wrapper" style={{ height: '350px', width: '100%', marginTop: '1rem', borderRadius: '8px', overflow: 'hidden' }}>
+      <MapContainer center={center} zoom={13} style={{ height: '100%', width: '100%' }} scrollWheelZoom={false}>
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {located.map(pharmacy => (
+          <Marker key={pharmacy.id} position={[pharmacy.latitude, pharmacy.longitude]}>
+            <Popup>
+              <strong>{pharmacy.name}</strong><br />
+              {pharmacy.address}
+              {pharmacy.phone && <><br />{pharmacy.phone}</>}
+            </Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}
+
+export default PharmacyMap;

frontend/src/views/PublicView.jsx

@@ -3,6 +3,7 @@ import '../App.css';
 import SearchBar from '../components/SearchBar';
 import MedicineResults from '../components/MedicineResults';
 import PharmacyList from '../components/PharmacyList';
+import PharmacyMap from '../components/PharmacyMap';
 
 function PublicView() {
   const [searchQuery, setSearchQuery] = useState('');
@@ -102,7 +103,8 @@ function PublicView() {
               </button>
             </div>
 
-            <PharmacyList 
+            <PharmacyMap pharmacies={pharmacies} />
+            <PharmacyList
               pharmacies={pharmacies}
               loading={loading}
             />

frontend/vite.config.js

@@ -3,6 +3,11 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.js'],
+    globals: true,
+  },
   server: {
     allowedHosts: ['localhost', 'oligocarpous-bilaterally-keiko.ngrok-free.dev'],
     port: 3000,