import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions} from 'react-native' import React, { useState } from 'react' import { useStore } from '../store/store'; import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; import { FlatList, TextInput } from 'react-native-gesture-handler'; import { AntDesign, MaterialIcons} from '@expo/vector-icons'; import MenuCard from "../components/MenuCard"; import DrinkCard from "../components/DrinkCard"; const getCategoriesFromData = (data: any) => { let temp: any = {}; for (let i = 0; i < data.length; i++) { if (temp[data[i].name] == undefined) { temp[data[i].name] = 1; } else { temp[data[i].name]++; } } let categories = Object.keys(temp); categories.unshift('All'); return categories; }; const getDonutList = (category: string, data: any) => { if (category == 'All') { return data; } else { let donutlist = data.filter((item: any) => item.name == category); return donutlist; } }; const Menu = ({navigation}: any) => { const DonutList = useStore((state: any) => state.AllDonutList1); const DrinkList = useStore((state: any) => state.AllDrinkList); const [categories, setCategories] = useState(getCategoriesFromData(DonutList)); const [searchMenu, setSearchMenu] = useState(''); const [categoryIndex, setCategoryIndex] = useState({index: 0, category: categories[0]}); const [sortItem, setSortItem] = useState(getDonutList(categoryIndex.category, DonutList)); const tabBar = useBottomTabBarHeight(); //console.log(sortItem.length) const searchMenuItem = (search:string) => { if(search != ''){ setCategoryIndex({index: 0, category: categories[0]}); setSortItem([...DonutList.filter((item: any) => item.donutname.toLowerCase().includes(search.toLocaleLowerCase()),),] ); } }; const resetSearch = () => { setCategoryIndex({index: 0, category: categories[0]}); setSortItem([...DonutList]); setSearchMenu(''); } return ( Menu {/*===== search =====*/} {searchMenu.length == 0 ? ( {searchMenuItem(searchMenu)}}> ) : ( {resetSearch()}}> )} {setSearchMenu(text); searchMenuItem(text)}} placeholder='Search...' style={{fontSize: 18, flex:1, marginLeft: 5}}/> {searchMenu.length > 0 ? ( {searchMenuItem(searchMenu)}}> ) : ( <> )} {/*===== Tab category =====*/} Donuts {categories.map((item, index) => ( {setCategoryIndex({index:index, category:categories[index]}); setSortItem([...getDonutList(categories[index], DonutList)])}}> {item} {categoryIndex.index == index ? ( ) : ( <> )} ))} {/*===== donuts=====*/} item.id} ListEmptyComponent={ Sorry, this item is not on our menu } renderItem={({item}) => { return { navigation.push('detail', { index: item.index, id: item.id, type: item.type, }); }}> {}} /> }}/> {/*===== drinks =====*/} Drinks item.id} renderItem={({item}) => { return { navigation.push('detail', { index: item.index, id: item.id, type: item.type, }); }}> {}} /> }}/> ) } export default Menu const styles = StyleSheet.create({ ScrollViewFlex:{ flexGrow: 1, }, CategoryView:{ paddingHorizontal: 5 }, CategoryScroll:{ paddingHorizontal: 20 }, catText:{ fontSize: 16, fontWeight: 600, color: 'gray' }, activeCategory:{ backgroundColor: '#DA7297', padding: 1 }, MenuListContainer:{ gap: 20, paddingVertical: 20, paddingHorizontal: 20 } })