react_native/donutshop/app/screen/Favorite.tsx

62 lines
No EOL
2.4 KiB
TypeScript

import { View, Text, ScrollView, Image, Pressable } from 'react-native';
import React from 'react';
import { useStore } from '../store/store';
import FavCard from "../components/FavCard";
const Favorite = ({navigation}: any) => {
const FavoriteList = useStore((state: any) => state.FavoriteList);
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);
const ToggleFavourite = (favourite: boolean, type: string, id: string) => {
favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
};
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
<View style={{flex: 1, justifyContent: 'space-between'}}>
<View style={{marginTop: 20, paddingVertical: 10}}>
<Text style={{paddingHorizontal: 20, fontSize: 30, fontWeight: 600}}>Favorite List</Text>
{FavoriteList.length == 0 ? (
<View style={{marginVertical: 50, alignItems: 'center'}}>
<Image source={require('../../assets/images/misc/fav.png')} style={{ width: 200, height: 200, resizeMode: "contain"}} />
<Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your have no favorite list!</Text>
</View>
):(
<View style={{gap: 10, marginTop: 20}}>
{FavoriteList.map((data: any)=> (
<Pressable key={data.id} onPress={() => {
navigation.push('detail', {index: data.index, id:data.id, type: data.type})
}}>
<FavCard
id={data.id}
image_item={data.image_item}
name={data.name}
donutname={data.donutname}
type={data.type}
calories={data.calories}
average_rating={data.average_rating}
ratings_count={data.ratings_count}
description={data.description}
favourite={data.favourite}
ToggleFavouriteItem={ToggleFavourite}
/>
</Pressable>
))}
</View>
)}
</View>
</View>
</ScrollView>
</View>
)
}
export default Favorite