70 lines
2.1 KiB
TypeScript
70 lines
2.1 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
FlatList,
|
|
TouchableOpacity,
|
|
ScrollView,
|
|
} from 'react-native';
|
|
import { getStyles } from './providerListScreen.styles';
|
|
import { ProviderCard, Header } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { deliveryService } from '../../../services/deliveryService';
|
|
import { Provider } from '../../../interfaces';
|
|
|
|
const FILTERS = ['Filters', 'Rating 4.0+', 'Fast Delivery'];
|
|
|
|
export const ProviderListScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [activeFilter, setActiveFilter] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
deliveryService.getProviders().then(setProviders);
|
|
}, []);
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<Header title="Providers" onBack={() => {}} />
|
|
<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={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}
|
|
/>
|
|
)}
|
|
contentContainerStyle={styles.list}
|
|
/>
|
|
</View>
|
|
);
|
|
};
|