65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
} from 'react-native';
|
|
import { getStyles } from './searchScreen.styles';
|
|
import { SearchBar, ProviderCard } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { deliveryService } from '../../../services/deliveryService';
|
|
import { Provider } from '../../../interfaces';
|
|
|
|
export const SearchScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
|
|
const [query, setQuery] = useState('');
|
|
const [results, setResults] = useState<Provider[]>([]);
|
|
|
|
useEffect(() => {
|
|
if (query.trim().length > 0) {
|
|
deliveryService.searchProviders(query).then(setResults);
|
|
} else {
|
|
setResults([]);
|
|
}
|
|
}, [query]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<SearchBar
|
|
value={query}
|
|
onChangeText={setQuery}
|
|
placeholder="Search providers or items..."
|
|
/>
|
|
<FlatList
|
|
data={results}
|
|
keyExtractor={(item) => item.id}
|
|
renderItem={({ item }) => (
|
|
<ProviderCard
|
|
imageUrl={item.imageUrl}
|
|
name={item.name}
|
|
rating={item.rating}
|
|
deliveryTime={item.deliveryTime}
|
|
tag={item.tag}
|
|
discountText={item.discountText}
|
|
/>
|
|
)}
|
|
ListEmptyComponent={
|
|
query.trim().length > 0 ? (
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyText}>No results found</Text>
|
|
</View>
|
|
) : (
|
|
<View style={styles.empty}>
|
|
<Text style={styles.emptyIcon}>🔍</Text>
|
|
<Text style={styles.emptyText}>Search for food, groceries, medicines...</Text>
|
|
</View>
|
|
)
|
|
}
|
|
contentContainerStyle={styles.list}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|