API, Backend & Frontend

2026-04-01 01:18:21 +02:00
parent 331c04fbef
commit 0fe8ec9bc0
44 changed files with 10060 additions and 0 deletions
--- a/frontend/src/views/PublicView.jsx
+++ b/frontend/src/views/PublicView.jsx
@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import '../App.css';
+import SearchBar from '../components/SearchBar';
+import MedicineResults from '../components/MedicineResults';
+import PharmacyList from '../components/PharmacyList';
+
+function PublicView() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [medicines, setMedicines] = useState([]);
+  const [selectedMedicine, setSelectedMedicine] = useState(null);
+  const [pharmacies, setPharmacies] = useState([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    const searchMedicines = async () => {
+      if (searchQuery.trim().length < 2) {
+        setMedicines([]);
+        setSelectedMedicine(null);
+        setPharmacies([]);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/medicines/search?q=${encodeURIComponent(searchQuery)}`);
+        const data = await response.json();
+        setMedicines(data);
+      } catch (error) {
+        console.error('Error searching medicines:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    const timeoutId = setTimeout(searchMedicines, 300);
+    return () => clearTimeout(timeoutId);
+  }, [searchQuery]);
+
+  useEffect(() => {
+    const fetchPharmacies = async () => {
+      if (!selectedMedicine) {
+        setPharmacies([]);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const response = await fetch(`/api/medicines/${selectedMedicine.id}/pharmacies`);
+        const data = await response.json();
+        setPharmacies(data);
+      } catch (error) {
+        console.error('Error fetching pharmacies:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchPharmacies();
+  }, [selectedMedicine]);
+
+  return (
+    <>
+      <header className="app-header">
+        <h1>💊 FarmaFinder</h1>
+        <p>Find your medicine at nearby pharmacies</p>
+      </header>
+
+      <main className="app-main">
+        <SearchBar 
+          value={searchQuery}
+          onChange={setSearchQuery}
+          placeholder="Search for a medicine..."
+        />
+
+        {loading && <div className="loading">Searching...</div>}
+
+        {searchQuery && !selectedMedicine && (
+          <MedicineResults 
+            medicines={medicines}
+            onSelect={setSelectedMedicine}
+            query={searchQuery}
+          />
+        )}
+
+        {selectedMedicine && (
+          <div className="selected-medicine-section">
+            <div className="medicine-info">
+              <h2>{selectedMedicine.name}</h2>
+              <div className="medicine-details">
+                <span><strong>Active Ingredient:</strong> {selectedMedicine.active_ingredient}</span>
+                <span><strong>Dosage:</strong> {selectedMedicine.dosage}</span>
+                <span><strong>Form:</strong> {selectedMedicine.form}</span>
+              </div>
+              <button 
+                className="back-button"
+                onClick={() => {
+                  setSelectedMedicine(null);
+                  setPharmacies([]);
+                }}
+              >
+                ← Back to search
+              </button>
+            </div>
+
+            <PharmacyList 
+              pharmacies={pharmacies}
+              loading={loading}
+            />
+          </div>
+        )}
+      </main>
+    </>
+  );
+}
+
+export default PublicView;
+