Antoni Nuñez Romeu
107 lines
2.8 KiB
TypeScript
107 lines
2.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { View, FlatList, StyleSheet, Text } from 'react-native';
|
|
import { SearchBar } from '../../components/SearchBar';
|
|
import { MedicineCard } from '../../components/MedicineCard';
|
|
import { LoadingSpinner } from '../../components/LoadingSpinner';
|
|
import { useDebounce } from '../../hooks/useDebounce';
|
|
import { searchMedicines } from '../../services/medicines';
|
|
import { colors, spacing } from '../../constants/theme';
|
|
import { Medicine } from '../../types';
|
|
import { config } from '../../constants/config';
|
|
|
|
export default function HomeScreen() {
|
|
const [query, setQuery] = useState('');
|
|
const [results, setResults] = useState<Medicine[]>([]);
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
|
|
|
|
useEffect(() => {
|
|
if (debouncedQuery.length < 2) {
|
|
setResults([]);
|
|
return;
|
|
}
|
|
|
|
const fetchResults = async () => {
|
|
setIsLoading(true);
|
|
setError(null);
|
|
try {
|
|
const data = await searchMedicines(debouncedQuery);
|
|
setResults(data);
|
|
} catch (err) {
|
|
setError('Error al buscar medicamentos');
|
|
console.error(err);
|
|
} finally {
|
|
setIsLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchResults();
|
|
}, [debouncedQuery]);
|
|
|
|
const handleSearch = (searchQuery: string) => {
|
|
setQuery(searchQuery);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<SearchBar
|
|
onSearch={handleSearch}
|
|
value={query}
|
|
onChangeText={setQuery}
|
|
/>
|
|
|
|
{isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
|
|
|
|
{error && (
|
|
<View style={styles.errorContainer}>
|
|
<Text style={styles.errorText}>{error}</Text>
|
|
</View>
|
|
)}
|
|
|
|
{!isLoading && !error && results.length === 0 && query.length >= 2 && (
|
|
<View style={styles.emptyContainer}>
|
|
<Text style={styles.emptyText}>No se encontraron medicamentos</Text>
|
|
</View>
|
|
)}
|
|
|
|
<FlatList
|
|
data={results}
|
|
keyExtractor={(item) => item.nregistro}
|
|
renderItem={({ item }) => <MedicineCard medicine={item} />}
|
|
contentContainerStyle={styles.list}
|
|
showsVerticalScrollIndicator={false}
|
|
/>
|
|
</View>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: colors.background,
|
|
},
|
|
list: {
|
|
paddingBottom: spacing.xl,
|
|
},
|
|
errorContainer: {
|
|
padding: spacing.md,
|
|
marginHorizontal: spacing.md,
|
|
backgroundColor: '#F8D7DA',
|
|
borderRadius: 8,
|
|
},
|
|
errorText: {
|
|
color: '#721C24',
|
|
textAlign: 'center',
|
|
},
|
|
emptyContainer: {
|
|
padding: spacing.xl,
|
|
alignItems: 'center',
|
|
},
|
|
emptyText: {
|
|
color: colors.textSecondary,
|
|
fontSize: 16,
|
|
},
|
|
});
|