107 lines
3.4 KiB
TypeScript
107 lines
3.4 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
FlatList,
|
|
} from 'react-native';
|
|
import { useNavigation } from '@react-navigation/native';
|
|
import { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
|
|
import { getStyles } from './homeScreen.styles';
|
|
import { SearchBar, ProviderCard, CategoryChip } from '@components';
|
|
import { useAppTheme } from '@theme';
|
|
import { deliveryService } from '../../../services/deliveryService';
|
|
import { Provider } from '../../../interfaces';
|
|
import { AppStackParamList } from '../../../navigation/appStack';
|
|
|
|
type NavProp = BottomTabNavigationProp<AppStackParamList, 'HomeScreen'>;
|
|
|
|
const CATEGORIES = [
|
|
{ key: 'all', icon: '🏠', label: 'All' },
|
|
{ key: 'Food', icon: '🍔', label: 'Food' },
|
|
{ key: 'Groceries', icon: '🛒', label: 'Groceries' },
|
|
{ key: 'Pharmacy', icon: '💊', label: 'Pharmacy' },
|
|
{ key: 'More', icon: '📦', label: 'More' },
|
|
];
|
|
|
|
export const HomeScreen: React.FC = () => {
|
|
const { colors } = useAppTheme();
|
|
const styles = getStyles(colors);
|
|
const navigation = useNavigation<NavProp>();
|
|
|
|
const [providers, setProviders] = useState<Provider[]>([]);
|
|
const [selectedCategory, setSelectedCategory] = useState('all');
|
|
|
|
useEffect(() => {
|
|
deliveryService.getProviders().then(setProviders);
|
|
}, []);
|
|
|
|
const filteredProviders = selectedCategory === 'all'
|
|
? providers
|
|
: providers.filter((p) => p.tag === selectedCategory);
|
|
|
|
const handleSearchFocus = useCallback(() => {
|
|
navigation.navigate('SearchScreen');
|
|
}, [navigation]);
|
|
|
|
return (
|
|
<ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
|
|
<View style={styles.addressBar}>
|
|
<Text style={styles.addressLabel}>Deliver to</Text>
|
|
<TouchableOpacity style={styles.addressRow} activeOpacity={0.7}>
|
|
<Text style={styles.addressText}>Koramangala 4th Block, B... </Text>
|
|
<Text style={styles.dropdownArrow}>▼</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
|
|
<SearchBar
|
|
value=""
|
|
onChangeText={() => {}}
|
|
placeholder="Search providers or items..."
|
|
onFocus={handleSearchFocus}
|
|
/>
|
|
|
|
<View style={styles.banner}>
|
|
<Text style={styles.bannerText}>50% OFF</Text>
|
|
<Text style={styles.bannerSubtext}>on your first order</Text>
|
|
</View>
|
|
|
|
<FlatList
|
|
horizontal
|
|
data={CATEGORIES}
|
|
keyExtractor={(item) => item.key}
|
|
showsHorizontalScrollIndicator={false}
|
|
contentContainerStyle={styles.chipRow}
|
|
renderItem={({ item }) => (
|
|
<CategoryChip
|
|
icon={item.icon}
|
|
label={item.label}
|
|
isSelected={selectedCategory === item.key}
|
|
onPress={() => setSelectedCategory(item.key)}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<Text style={styles.sectionTitle}>
|
|
{selectedCategory === 'all' ? 'Popular Providers' : selectedCategory}
|
|
</Text>
|
|
|
|
{filteredProviders.map((provider) => (
|
|
<ProviderCard
|
|
key={provider.id}
|
|
imageUrl={provider.imageUrl}
|
|
name={provider.name}
|
|
rating={provider.rating}
|
|
deliveryTime={provider.deliveryTime}
|
|
tag={provider.tag}
|
|
discountText={provider.discountText}
|
|
onPress={() => navigation.navigate('SearchScreen')}
|
|
/>
|
|
))}
|
|
|
|
<View style={{ height: 24 }} />
|
|
</ScrollView>
|
|
);
|
|
};
|