created favorite page
This commit is contained in:
parent
e2c67c021f
commit
2c592fa8ef
4 changed files with 211 additions and 12 deletions
60
donutshop/app/components/FavCard.tsx
Normal file
60
donutshop/app/components/FavCard.tsx
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { ImageProps, StyleSheet, Text, View } from 'react-native'
|
||||
import React from 'react'
|
||||
import FavImgBackground from "../components/FavImgBackground";
|
||||
|
||||
|
||||
interface FavoritesItemCardProps {
|
||||
id: string;
|
||||
image_item: ImageProps;
|
||||
name: string;
|
||||
donutname: string;
|
||||
type: string;
|
||||
calories: string
|
||||
average_rating: number;
|
||||
ratings_count: string;
|
||||
description: string;
|
||||
favourite: boolean;
|
||||
ToggleFavouriteItem: any;
|
||||
}
|
||||
|
||||
const FavCard: React.FC<FavoritesItemCardProps> = ({
|
||||
id,
|
||||
image_item,
|
||||
name,
|
||||
donutname,
|
||||
type,
|
||||
calories,
|
||||
average_rating,
|
||||
ratings_count,
|
||||
description,
|
||||
favourite,
|
||||
ToggleFavouriteItem,
|
||||
}) => {
|
||||
|
||||
|
||||
return (
|
||||
<View style={{overflow: 'hidden'}}>
|
||||
<FavImgBackground
|
||||
EnableBackHandler={false}
|
||||
id={id}
|
||||
image_item={image_item}
|
||||
name={name}
|
||||
donutname={donutname}
|
||||
type={type}
|
||||
calories={calories}
|
||||
average_rating={average_rating}
|
||||
ratings_count={ratings_count}
|
||||
description={description}
|
||||
favourite={favourite}
|
||||
ToggleFavourite={ToggleFavouriteItem}
|
||||
/>
|
||||
<View style={{paddingHorizontal: 20, borderBottomWidth:1, borderColor: '#EEEEEE'}}>
|
||||
<Text style={{fontSize: 16, color: 'gray', marginVertical: 30}}>{description}</Text>
|
||||
</View>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default FavCard
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
79
donutshop/app/components/FavImgBackground.tsx
Normal file
79
donutshop/app/components/FavImgBackground.tsx
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
import { ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
|
||||
import React from 'react'
|
||||
import { AntDesign } from '@expo/vector-icons';
|
||||
|
||||
|
||||
interface FavImgBackgroundProps {
|
||||
EnableBackHandler: boolean;
|
||||
id: string;
|
||||
image_item: ImageProps;
|
||||
name: string;
|
||||
donutname: string;
|
||||
type: string;
|
||||
calories: string;
|
||||
average_rating: number;
|
||||
ratings_count: string;
|
||||
description: string;
|
||||
favourite: boolean;
|
||||
ToggleFavourite: any;
|
||||
BackHandler?: any;
|
||||
}
|
||||
|
||||
|
||||
const FavImgBackground: React.FC<FavImgBackgroundProps> = ({
|
||||
EnableBackHandler,
|
||||
id,
|
||||
image_item,
|
||||
name,
|
||||
donutname,
|
||||
calories,
|
||||
type,
|
||||
average_rating,
|
||||
ratings_count,
|
||||
description,
|
||||
favourite,
|
||||
ToggleFavourite,
|
||||
BackHandler,
|
||||
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<View>
|
||||
<ImageBackground source={image_item} style={{width: '100%', aspectRatio: 1, justifyContent: 'space-between', }}>
|
||||
{EnableBackHandler? (
|
||||
<View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between',}}>
|
||||
<Pressable onPress={() => {BackHandler()}}>
|
||||
<AntDesign name="left" size={24} color="gray" />
|
||||
</Pressable>
|
||||
<Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
|
||||
<AntDesign name="heart" size={24} color="#EF5A6F" />
|
||||
</Pressable>
|
||||
</View>
|
||||
):(
|
||||
<View style={{padding: 20, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end',}}>
|
||||
<Pressable onPress={() => {ToggleFavourite(favourite, type, id);}}>
|
||||
<AntDesign name="heart" size={24} color="#EF5A6F" />
|
||||
</Pressable>
|
||||
</View>
|
||||
)}
|
||||
<View style={{paddingVertical: 10, paddingHorizontal: 10, backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopLeftRadius: 10, borderTopRightRadius: 10}}>
|
||||
<View style={{marginHorizontal: 10, marginVertical: 10}}>
|
||||
<Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{donutname || name}</Text>
|
||||
</View>
|
||||
<View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 10, marginVertical: 10}}>
|
||||
<Text style={{color: '#DA7297', fontSize: 18}}>{calories} calories</Text>
|
||||
<View style={{flexDirection: 'row', gap: 3, alignItems: 'center'}}>
|
||||
<AntDesign name="star" size={20} color="#EF5A6F"/>
|
||||
<Text style={{color: '#DA7297', textAlign: 'right', fontSize: 18}}>{average_rating}</Text>
|
||||
<Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ImageBackground>
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
||||
export default FavImgBackground
|
||||
|
||||
const styles = StyleSheet.create({})
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { View, Text, ScrollView, Image, Pressable} from 'react-native'
|
||||
import React from 'react'
|
||||
import { useStore } from '../store/store';
|
||||
import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
|
||||
import Payment from '../components/Payment';
|
||||
import CartItem from '../components/CartItem';
|
||||
|
||||
|
|
@ -15,13 +14,22 @@ const Cart = ({navigation, route}: any) => {
|
|||
const addCartItemQuantity = useStore((state: any) => state.addCartItemQuantity);
|
||||
const removeCartItemQuantity = useStore((state: any) => state.removeCartItemQuantity);
|
||||
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
|
||||
|
||||
const tabBarHeight = useBottomTabBarHeight();
|
||||
//console.log("CartList =", CartList.length)
|
||||
|
||||
const buttonPressHandler = () => {
|
||||
navigation.push('payment');
|
||||
}
|
||||
//add to cart functionality
|
||||
const addCartItemQuantityHandler = (id: string, size: string) => {
|
||||
addCartItemQuantity(id, size);
|
||||
calculateCartPrice();
|
||||
};
|
||||
//remove from cart functionality
|
||||
const removeCartItemQuantityHandler = (id: string, size: string) => {
|
||||
removeCartItemQuantity(id, size);
|
||||
calculateCartPrice();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<View style={{flex: 1, backgroundColor: 'white'}}>
|
||||
|
|
@ -32,12 +40,14 @@ const Cart = ({navigation, route}: any) => {
|
|||
{CartList.length == 0 ? (
|
||||
<View style={{marginVertical: 50, alignItems: 'center'}}>
|
||||
<Image source={require('../../assets/images/misc/empty_bag.png')} style={{ width: 200, height: 200, resizeMode: "contain"}} />
|
||||
<Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>You bag is empty!</Text>
|
||||
<Text style={{marginTop: 30, fontSize: 16, fontWeight: 500}}>Your cart is empty!</Text>
|
||||
</View>
|
||||
):(
|
||||
<View style={{gap: 10, marginTop: 20}}>
|
||||
{CartList.map((data: any)=> (
|
||||
<Pressable key={data.id} onPress={() => {}}>
|
||||
<Pressable key={data.id} onPress={() => {
|
||||
navigation.push('detail', {index: data.index, id:data.id, type: data.type})
|
||||
}}>
|
||||
<CartItem
|
||||
id = {data.id}
|
||||
name = {data.name}
|
||||
|
|
@ -45,8 +55,8 @@ const Cart = ({navigation, route}: any) => {
|
|||
prices = {data.prices}
|
||||
type = {data.type}
|
||||
image_item = {data.image_item}
|
||||
addCartItemQuantityHandler = {() => {}}
|
||||
removeCartItemQuantityHandler = {() => {}}
|
||||
addCartItemQuantityHandler = {addCartItemQuantityHandler}
|
||||
removeCartItemQuantityHandler = {removeCartItemQuantityHandler}
|
||||
/>
|
||||
</Pressable>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,60 @@
|
|||
import { View, Text } from 'react-native'
|
||||
import React from 'react'
|
||||
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)
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
const Favorite = () => {
|
||||
return (
|
||||
<View>
|
||||
<Text>Favorite</Text>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue