118 lines
3.3 KiB
JavaScript
118 lines
3.3 KiB
JavaScript
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;
|
|
|