react_native/donutshop/app/screen/Cart.tsx

77 lines
No EOL
3 KiB
TypeScript

import { View, Text, ScrollView, Image, Pressable} from 'react-native'
import React from 'react'
import { useStore } from '../store/store';
import PaymentFooter from '../components/PaymentFooter';
import CartItem from '../components/CartItem';
const Cart = ({navigation, route}: any) => {
const CartList = useStore((state: any) => state.CartList);
const CartPrice = useStore((state: any) => state.CartPrice);
const addCartItemQuantity = useStore((state: any) => state.addCartItemQuantity);
const removeCartItemQuantity = useStore((state: any) => state.removeCartItemQuantity);
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
//console.log("CartList =", CartList.length)
const buttonPressHandler = () => {
navigation.push('payment', {amount: CartPrice});
}
//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'}}>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
<View style={{flex: 1, justifyContent: 'space-between'}}>
<View style={{marginTop: 20, paddingVertical: 10, paddingHorizontal: 20}}>
<Text style={{fontSize: 30, fontWeight: 600}}>Cart</Text>
{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}}>Your cart is empty!</Text>
</View>
):(
<View style={{gap: 10, marginTop: 20}}>
{CartList.map((data: any)=> (
<Pressable key={data.id} onPress={() => {
navigation.push('detail', {index: data.index, id:data.id, type: data.type})
}}>
<CartItem
id = {data.id}
name = {data.name}
donutname= {data.donutname}
prices = {data.prices}
type = {data.type}
image_item = {data.image_item}
addCartItemQuantityHandler = {addCartItemQuantityHandler}
removeCartItemQuantityHandler = {removeCartItemQuantityHandler}
/>
</Pressable>
))}
</View>
)}
</View>
{CartList.length != 0 ? (
<PaymentFooter buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
) : (
<></>
)}
</View>
</ScrollView>
</View>
)
}
export default Cart