feat: unified search - remove filter tabs, show all results together
- Frontend now searches both CIMA and Parapharmacy simultaneously - Removed filter tabs (Todos/Medicamentos/Parafarmacia) - Results show in a single unified list - Mobile: Shows medicines first, then parapharmacy section - Web: Same unified approach with results summary
This commit is contained in:
@@ -33,7 +33,6 @@ export default function SearchScreen() {
|
|||||||
const [query, setQuery] = useState('');
|
const [query, setQuery] = useState('');
|
||||||
const [results, setResults] = useState<Medicine[]>([]);
|
const [results, setResults] = useState<Medicine[]>([]);
|
||||||
const [products, setProducts] = useState<Product[]>([]);
|
const [products, setProducts] = useState<Product[]>([]);
|
||||||
const [searchMode, setSearchMode] = useState<'all' | 'medicines' | 'products'>('all');
|
|
||||||
const [isLoading, setIsLoading] = useState(false);
|
const [isLoading, setIsLoading] = useState(false);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
|
||||||
@@ -104,17 +103,11 @@ export default function SearchScreen() {
|
|||||||
onChangeText={setQuery}
|
onChangeText={setQuery}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{query.length >= 2 && (
|
{query.length >= 2 && (results.length + products.length) > 0 && (
|
||||||
<View style={styles.filterContainer}>
|
<View style={styles.resultsSummary}>
|
||||||
<TouchableOpacity style={[styles.filterTab, searchMode === 'all' && styles.filterTabActive]} onPress={() => setSearchMode('all')}>
|
<Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
|
||||||
<Text style={[styles.filterText, searchMode === 'all' && styles.filterTextActive]}>Todos</Text>
|
{results.length + products.length} resultados encontrados
|
||||||
</TouchableOpacity>
|
</Text>
|
||||||
<TouchableOpacity style={[styles.filterTab, searchMode === 'medicines' && styles.filterTabActive]} onPress={() => setSearchMode('medicines')}>
|
|
||||||
<Text style={[styles.filterText, searchMode === 'medicines' && styles.filterTextActive]}>Medicamentos</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
<TouchableOpacity style={[styles.filterTab, searchMode === 'products' && styles.filterTabActive]} onPress={() => setSearchMode('products')}>
|
|
||||||
<Text style={[styles.filterText, searchMode === 'products' && styles.filterTextActive]}>Parafarmacia</Text>
|
|
||||||
</TouchableOpacity>
|
|
||||||
</View>
|
</View>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -176,29 +169,29 @@ export default function SearchScreen() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<FlatList
|
<FlatList
|
||||||
data={(searchMode === 'medicines' || searchMode === 'all') ? results : []}
|
data={results}
|
||||||
keyExtractor={(item) => item.nregistro}
|
keyExtractor={(item) => item.nregistro}
|
||||||
renderItem={({ item }) => <MedicineCard medicine={item} />}
|
renderItem={({ item }) => <MedicineCard medicine={item} />}
|
||||||
ListHeaderComponent={
|
ListHeaderComponent={
|
||||||
<>
|
<>
|
||||||
{(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
|
{products.length > 0 && (
|
||||||
<View style={styles.section}>
|
<View style={styles.section}>
|
||||||
<Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia y Bebé</Text>
|
<Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia</Text>
|
||||||
{products.map((product) => (
|
{products.map((product) => (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
key={`${product.source}-${product.id}`}
|
key={`${product.source}-${product.id || product._id}`}
|
||||||
style={[styles.productCard, { backgroundColor: colors.card, borderColor: colors.border }]}
|
style={[styles.productCard, { backgroundColor: colors.card, borderColor: colors.border }]}
|
||||||
onPress={() => router.push(`/product/${product.source}/${product.id}`)}
|
onPress={() => router.push(`/product/${product.source}/${product.id || product._id}`)}
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<View style={styles.productInfo}>
|
<View style={styles.productInfo}>
|
||||||
<View style={styles.badges}>
|
<View style={styles.badges}>
|
||||||
<View style={[styles.sourceBadge, { backgroundColor: product.source === 'cima' ? '#2563eb' : '#16a34a' }]}>
|
<View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
|
||||||
<Text style={styles.badgeText}>{product.source === 'cima' ? 'CIMA' : 'OFF'}</Text>
|
<Text style={styles.badgeText}>Parafarmacia</Text>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
|
<Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
|
||||||
<Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand}</Text>
|
<Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand} • {product.price}€</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
))}
|
))}
|
||||||
@@ -217,29 +210,13 @@ const styles = StyleSheet.create({
|
|||||||
container: {
|
container: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
filterContainer: {
|
resultsSummary: {
|
||||||
flexDirection: 'row',
|
paddingHorizontal: spacing.lg,
|
||||||
justifyContent: 'center',
|
|
||||||
gap: spacing.sm,
|
|
||||||
paddingVertical: spacing.sm,
|
paddingVertical: spacing.sm,
|
||||||
paddingHorizontal: spacing.md,
|
|
||||||
},
|
},
|
||||||
filterTab: {
|
resultsSummaryText: {
|
||||||
paddingHorizontal: spacing.md,
|
|
||||||
paddingVertical: spacing.sm,
|
|
||||||
borderRadius: borderRadius.full,
|
|
||||||
backgroundColor: 'rgba(0,0,0,0.05)',
|
|
||||||
},
|
|
||||||
filterTabActive: {
|
|
||||||
backgroundColor: '#7fbf8f',
|
|
||||||
},
|
|
||||||
filterText: {
|
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: '600',
|
fontWeight: '500',
|
||||||
color: '#41493e',
|
|
||||||
},
|
|
||||||
filterTextActive: {
|
|
||||||
color: '#ffffff',
|
|
||||||
},
|
},
|
||||||
section: {
|
section: {
|
||||||
paddingHorizontal: spacing.lg,
|
paddingHorizontal: spacing.lg,
|
||||||
|
|||||||
@@ -18,7 +18,6 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
|
|||||||
const [searchQuery, setSearchQuery] = useState(initialQuery);
|
const [searchQuery, setSearchQuery] = useState(initialQuery);
|
||||||
const [medicines, setMedicines] = useState([]);
|
const [medicines, setMedicines] = useState([]);
|
||||||
const [products, setProducts] = useState([]);
|
const [products, setProducts] = useState([]);
|
||||||
const [searchMode, setSearchMode] = useState('all');
|
|
||||||
const [selectedMedicine, setSelectedMedicine] = useState(null);
|
const [selectedMedicine, setSelectedMedicine] = useState(null);
|
||||||
const [pharmacies, setPharmacies] = useState([]);
|
const [pharmacies, setPharmacies] = useState([]);
|
||||||
const [loading, setLoading] = useState(false);
|
const [loading, setLoading] = useState(false);
|
||||||
@@ -88,16 +87,24 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
|
|||||||
const query = searchQuery.trim();
|
const query = searchQuery.trim();
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// Only search medications from CIMA
|
// Search both CIMA and Parapharmacy simultaneously
|
||||||
const medicinesRes = await fetch(`/api/medicines/search?q=${encodeURIComponent(query)}`);
|
const [medicinesRes, productsRes] = await Promise.allSettled([
|
||||||
|
fetch(`/api/medicines/search?q=${encodeURIComponent(query)}`),
|
||||||
|
fetch(`/api/products/parapharmacy/search?q=${encodeURIComponent(query)}`)
|
||||||
|
]);
|
||||||
|
|
||||||
// Only update if this search is still the current one
|
// Only update if this search is still the current one
|
||||||
if (query !== searchQuery.trim()) return;
|
if (query !== searchQuery.trim()) return;
|
||||||
|
|
||||||
if (medicinesRes.ok) {
|
if (medicinesRes.status === 'fulfilled' && medicinesRes.value.ok) {
|
||||||
const medicinesData = await medicinesRes.json();
|
const medicinesData = await medicinesRes.value.json();
|
||||||
setMedicines(medicinesData);
|
setMedicines(medicinesData);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (productsRes.status === 'fulfilled' && productsRes.value.ok) {
|
||||||
|
const productsData = await productsRes.value.json();
|
||||||
|
setProducts(productsData.results || []);
|
||||||
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Search error:', error);
|
console.error('Search error:', error);
|
||||||
} finally {
|
} finally {
|
||||||
@@ -108,26 +115,6 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
|
|||||||
return () => clearTimeout(timeoutId);
|
return () => clearTimeout(timeoutId);
|
||||||
}, [searchQuery]);
|
}, [searchQuery]);
|
||||||
|
|
||||||
// Search parapharmacy when user switches to Parafarmacia tab
|
|
||||||
useEffect(() => {
|
|
||||||
if (searchMode !== 'products' || searchQuery.trim().length < 2) return;
|
|
||||||
|
|
||||||
const searchProducts = async () => {
|
|
||||||
const query = searchQuery.trim();
|
|
||||||
try {
|
|
||||||
const response = await fetch(`/api/products/parapharmacy/search?q=${encodeURIComponent(query)}`);
|
|
||||||
if (response.ok) {
|
|
||||||
const data = await response.json();
|
|
||||||
setProducts(data.results || []);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Parapharmacy search error:', error);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
searchProducts();
|
|
||||||
}, [searchMode, searchQuery]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchPharmacies = async () => {
|
const fetchPharmacies = async () => {
|
||||||
if (!selectedMedicine) {
|
if (!selectedMedicine) {
|
||||||
@@ -310,28 +297,13 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
|
|||||||
|
|
||||||
{searchQuery && !selectedMedicine && (
|
{searchQuery && !selectedMedicine && (
|
||||||
<>
|
<>
|
||||||
<div className="filter-tabs">
|
<div className="results-summary">
|
||||||
<button
|
{(medicines.length + products.length) > 0 && (
|
||||||
className={`filter-tab ${searchMode === 'all' ? 'filter-tab--active' : ''}`}
|
<span>{medicines.length + products.length} resultados encontrados</span>
|
||||||
onClick={() => setSearchMode('all')}
|
)}
|
||||||
>
|
|
||||||
Todos ({medicines.length + products.length})
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`filter-tab ${searchMode === 'medicines' ? 'filter-tab--active' : ''}`}
|
|
||||||
onClick={() => setSearchMode('medicines')}
|
|
||||||
>
|
|
||||||
Medicamentos ({medicines.length})
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`filter-tab ${searchMode === 'products' ? 'filter-tab--active' : ''}`}
|
|
||||||
onClick={() => setSearchMode('products')}
|
|
||||||
>
|
|
||||||
Parafarmacia ({products.length})
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{(searchMode === 'all' || searchMode === 'medicines') && (
|
{medicines.length > 0 && (
|
||||||
<MedicineResults
|
<MedicineResults
|
||||||
medicines={medicines}
|
medicines={medicines}
|
||||||
onSelect={(m) => {
|
onSelect={(m) => {
|
||||||
@@ -344,9 +316,9 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
|
{products.length > 0 && (
|
||||||
<div className="products-section">
|
<div className="products-section">
|
||||||
<h3 className="section-subtitle">Parafarmacia y Bebé</h3>
|
<h3 className="section-subtitle">Parafarmacia</h3>
|
||||||
<ProductResults
|
<ProductResults
|
||||||
products={products}
|
products={products}
|
||||||
onSelect={(p) => {
|
onSelect={(p) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user