86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
|
|
import { StackNavigationProp } from '@react-navigation/stack';
|
|
import { getStyles } from './providerListScreen.styles';
|
|
import { ProviderCard, Header } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { getProvidersApi } from '../../../api/deliveryApi';
|
|
import { Provider } from '../../../interfaces';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
|
|
const FILTERS = ['Filters', 'Rating 4.0+', 'Fast Delivery'];
|
|
|
|
type ProviderListNavProp = StackNavigationProp<AppStackParamList, 'ProviderListScreen'>;
|
|
type ProviderListRouteProp = RouteProp<AppStackParamList, 'ProviderListScreen'>;
|
|
|
|
export const ProviderListScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<ProviderListNavProp>();
|
|
const route = useRoute<ProviderListRouteProp>();
|
|
const category = route.params?.category;
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [activeFilter, setActiveFilter] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
// If a category was passed, we can filter or search by it, but for mock data we fetch all
|
|
getProvidersApi().then(setProviders);
|
|
}, [category]);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title={category ? `${category} Providers` : 'Providers'} onBack={() => navigation.goBack()} />
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.filterRow}>
|
|
{FILTERS.map((filter) => (
|
|
<TouchableOpacity
|
|
key={filter}
|
|
style={[
|
|
styles.filterChip,
|
|
activeFilter === filter && styles.filterChipActive,
|
|
]}
|
|
onPress={() => setActiveFilter(activeFilter === filter ? null : filter)}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.filterChipText,
|
|
activeFilter === filter && styles.filterChipTextActive,
|
|
]}
|
|
>
|
|
{filter}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
))}
|
|
</ScrollView>
|
|
<FlatList
|
|
data={category ? providers.filter(p => p.tag === category) : providers}
|
|
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}
|
|
onPress={() =>
|
|
navigation.navigate('ProviderDetailsScreen', {
|
|
providerId: item.id,
|
|
providerName: item.name,
|
|
})
|
|
}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.list}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|