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:
Antoni Nuñez Romeu
2026-07-16 15:36:08 +02:00
parent 05b99e9ed4
commit 570d4ab43e
2 changed files with 36 additions and 87 deletions
+17 -40
View File
@@ -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,
+19 -47
View File
@@ -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) => {