Ichitux/FarmaFinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unified search - remove filter tabs, show all results together

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend-mobile/app/(tabs)/search.tsx
+17 -40
View File
@@ -33,7 +33,6 @@ export default function SearchScreen() {
const [query, setQuery] = useState('');
const [results, setResults] = useState<Medicine[]>([]);
const [products, setProducts] = useState<Product[]>([]);
const [searchMode, setSearchMode] = useState<'all' | 'medicines' | 'products'>('all');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
@@ -104,17 +103,11 @@ export default function SearchScreen() {
onChangeText={setQuery}
/>
{query.length >= 2 && (
<View style={styles.filterContainer}>
<TouchableOpacity style={[styles.filterTab, searchMode === 'all' && styles.filterTabActive]} onPress={() => setSearchMode('all')}>
<Text style={[styles.filterText, searchMode === 'all' && styles.filterTextActive]}>Todos</Text>
</TouchableOpacity>
<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>
{query.length >= 2 && (results.length + products.length) > 0 && (
<View style={styles.resultsSummary}>
<Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
{results.length + products.length} resultados encontrados
</Text>
</View>
)}
@@ -176,29 +169,29 @@ export default function SearchScreen() {
)}
<FlatList
data={(searchMode === 'medicines' || searchMode === 'all') ? results : []}
data={results}
keyExtractor={(item) => item.nregistro}
renderItem={({ item }) => <MedicineCard medicine={item} />}
ListHeaderComponent={
<>
{(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
{products.length > 0 && (
<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) => (
<TouchableOpacity
key={`${product.source}-${product.id}`}
key={`${product.source}-${product.id || product._id}`}
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}
>
<View style={styles.productInfo}>
<View style={styles.badges}>
<View style={[styles.sourceBadge, { backgroundColor: product.source === 'cima' ? '#2563eb' : '#16a34a' }]}>
<Text style={styles.badgeText}>{product.source === 'cima' ? 'CIMA' : 'OFF'}</Text>
<View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
<Text style={styles.badgeText}>Parafarmacia</Text>
</View>
</View>
<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>
</TouchableOpacity>
))}
@@ -217,29 +210,13 @@ const styles = StyleSheet.create({
container: {
flex: 1,
},
filterContainer: {
flexDirection: 'row',
justifyContent: 'center',
gap: spacing.sm,
resultsSummary: {
paddingHorizontal: spacing.lg,
paddingVertical: spacing.sm,
paddingHorizontal: spacing.md,
},
filterTab: {
paddingHorizontal: spacing.md,
paddingVertical: spacing.sm,
borderRadius: borderRadius.full,
backgroundColor: 'rgba(0,0,0,0.05)',
},
filterTabActive: {
backgroundColor: '#7fbf8f',
},
filterText: {
resultsSummaryText: {
fontSize: 14,
fontWeight: '600',
color: '#41493e',
},
filterTextActive: {
color: '#ffffff',
fontWeight: '500',
},
section: {
paddingHorizontal: spacing.lg,