muayjtp/react_native
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

updated donut detail and drink detail page, cretaed cart page and their functionality

Browse source
This commit is contained in:
Juthatip McDevitt 2024-07-24 22:19:07 -05:00
parent 6dea060eed
commit e2c67c021f
8 changed files with 360 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

98
donutshop/app/components/CartItem.tsx Normal file
View file

@ -0,0 +1,98 @@
import { Image, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { AntDesign } from '@expo/vector-icons';
interface CartItemProps{
id: string;
name: string;
donutname: string;
prices: any;
type: string;
image_item: ImageProps;
addCartItemQuantityHandler: any;
removeCartItemQuantityHandler: any;
}
const CartItem:React.FC<CartItemProps> = ({
id,
name,
donutname,
prices,
type,
image_item,
addCartItemQuantityHandler,
removeCartItemQuantityHandler,
}) => {
return (
<View>
{prices.length != 1 ? (
<View style={{flex: 1, gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
<View style={{flex:1, flexDirection: 'row', gap: 10}}>
<Image source={image_item} style={{height: 80, width: 80}}/>
<View style={{flex:1, paddingVertical: 5, justifyContent: 'space-between'}}>
<View>
<Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text>
</View>
{prices.map((data: any, index: any) => (
<View key={index.toString()} style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
<View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: type == 'Drink' ? 16 : 18}}>{data.size}</Text>
</View>
<Text style={{fontSize: 16, color: '#EF5A6F'}}>{data.currency}{data.price}</Text>
</View>
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
<Pressable onPress={() => {removeCartItemQuantityHandler(id, data.size)}}>
<AntDesign name="minussquare" size={30} color="#DA7297" />
</Pressable>
<View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
<Text>{data.quantity}</Text>
</View>
<Pressable onPress={() => {addCartItemQuantityHandler(id, data.size)}}>
<AntDesign name="plussquare" size={30} color="#DA7297" />
</Pressable>
</View>
</View>
))}
</View>
</View>
</View>
) : (
<View style={{flexDirection: 'row', gap: 10, padding: 10, borderRadius: 10, borderColor: '#DA7297', borderWidth: 1}}>
<View>
<Image source={image_item} style={{height: 80, width: 80}}/>
</View>
<View style={{flex: 1}}>
<Text style={{fontSize: 16, color: '#EF5A6F', fontWeight: 500, marginBottom: 10}}>{name || donutname}</Text>
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center', flexDirection: 'row', gap: 20}}>
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
<View style={{padding: 10, justifyContent: 'center', alignItems: 'center'}}>
<Text style={{fontSize: type == 'Drink' ? 14 : 16}}>{prices[0].size}</Text>
</View>
<Text style={{fontSize: 16, color: '#EF5A6F'}}>{prices[0].currency}{prices[0].price}</Text>
</View>
<View style={{flex: 1, justifyContent: 'space-between', alignItems: 'center', flexDirection: 'row'}}>
<Pressable onPress={() => {removeCartItemQuantityHandler(id, prices[0].size)}}>
<AntDesign name="minussquare" size={30} color="#DA7297" />
</Pressable>
<View style={{padding: 2, borderColor: '#DA7297', borderWidth: 2, width: 30, alignItems: 'center'}}>
<Text>{prices[0].quantity}</Text>
</View>
<Pressable onPress={() => {addCartItemQuantityHandler(id, prices[0].size)}}>
<AntDesign name="plussquare" size={30} color="#DA7297" />
</Pressable>
</View>
</View>
</View>
</View>
)}
</View>
)
}
export default CartItem
const styles = StyleSheet.create({})

8
donutshop/app/components/DrinkCard.tsx
View file

@ -12,7 +12,7 @@ interface DrinkCardProps {
name: string;
image_item: ImageProps;
average_rating: number;
prices: any;
price: any;
buttonPressHandler: any;
}
@ -24,7 +24,7 @@ const DrinkCard:React.FC<DrinkCardProps> = ({
name,
image_item,
average_rating,
prices,
price,
buttonPressHandler,
}) => {
@ -42,8 +42,8 @@ const DrinkCard:React.FC<DrinkCardProps> = ({
</View>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{prices.price}</Text></Text>
<Pressable onPress={() => {}}>
<Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{price.price}</Text></Text>
<Pressable onPress={() => {buttonPressHandler({id, index, type, image_item, name, prices:[{...price, quantity:1}]})}}>
<MaterialIcons name="add-circle" size={24} color="#EF5A6F" />
</Pressable>
</View>

8
donutshop/app/components/MenuCard.tsx
View file

@ -13,7 +13,7 @@ interface donutCardProps {
name: string;
image_item: ImageProps;
average_rating: number;
prices: any;
price: any;
buttonPressHandler: any;
}
@ -25,7 +25,7 @@ const MenuCard:React.FC<donutCardProps> = ({
donutname,
image_item,
average_rating,
prices,
price,
buttonPressHandler,
}) => {
@ -43,8 +43,8 @@ const MenuCard:React.FC<donutCardProps> = ({
</View>
</View>
<View style={{flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{prices.price}</Text></Text>
<Pressable onPress={() => {}}>
<Text style={{fontWeight: 600, color: '#EF5A6F'}}>$<Text>{price.price}</Text></Text>
<Pressable onPress={() => {buttonPressHandler({id, index, type, image_item, donutname, prices:[{...price, quantity:1}]})}}>
<MaterialIcons name="add-circle" size={24} color="#EF5A6F" />
</Pressable>
</View>

42
donutshop/app/components/Payment.tsx Normal file
View file

@ -0,0 +1,42 @@
import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
interface PriceProps{
price: string;
currency: string;
}
interface PaymentProps{
price: PriceProps;
buttonPressHandler: any;
buttonTitle: string;
}
const Payment: React.FC<PaymentProps> = ({
price,
buttonPressHandler,
buttonTitle,
}) => {
return (
<View style={{padding: 10, marginHorizontal: 10, marginVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<View style={{flex: 1, marginHorizontal: 10}}>
<Text style={{color: 'gray', marginBottom: 3}}>Price</Text>
<Text style={{fontSize: 22, color: '#EF5A6F', fontWeight: 500}}>{price.currency}{price.price}</Text>
</View>
<View style={{flex: 2, backgroundColor: '#DA7297', padding: 15, alignItems: 'center', borderRadius: 5}}>
<Pressable onPress={() => buttonPressHandler()}>
<Text style={{color: 'white', fontSize: 16, fontWeight: 500}}>{buttonTitle}</Text>
</Pressable>
</View>
</View>
)
}
export default Payment
const styles = StyleSheet.create({})

63
donutshop/app/screen/Cart.tsx
View file

@ -1,10 +1,65 @@
import { View, Text } from 'react-native'
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';
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);
const tabBarHeight = useBottomTabBarHeight();
//console.log("CartList =", CartList.length)
const buttonPressHandler = () => {
navigation.push('payment');
}
const Cart = () => {
return (
<View>
<Text>Cart</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, 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}}>You bag is empty!</Text>
</View>
):(
<View style={{gap: 10, marginTop: 20}}>
{CartList.map((data: any)=> (
<Pressable key={data.id} onPress={() => {}}>
<CartItem
id = {data.id}
name = {data.name}
donutname= {data.donutname}
prices = {data.prices}
type = {data.type}
image_item = {data.image_item}
addCartItemQuantityHandler = {() => {}}
removeCartItemQuantityHandler = {() => {}}
/>
</Pressable>
))}
</View>
)}
</View>
{CartList.length != 0 ? (
<Payment buttonTitle='Pay' price={{price:CartPrice, currency: '$'}} buttonPressHandler={buttonPressHandler}/>
) : (
<></>
)}
</View>
</ScrollView>
</View>
)
}

68
donutshop/app/screen/Detail.tsx
View file

@ -3,13 +3,14 @@ import React, { useState } from 'react';
import { useStore } from '../store/store';
import { StatusBar } from 'expo-status-bar';
import BackgroundInfo from "../components/BackgroundInfo";
import Payment from "../components/Payment";
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
const Detail = ({navigation, route}: any) => {
const ItemOfIndex = useStore((state: any) =>
route.params.type == 'Donut' ? state.AllDonutList1 : state.AllDrinkList1,
route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
)[route.params.index];
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
@ -20,6 +21,30 @@ const Detail = ({navigation, route}: any) => {
favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
}
//add to cart
const addToCart = useStore((state: any) => state.addToCart);
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
const addtoCartHandler = ({
id,
index,
donutname,
image_item,
type,
price
}: any) => {
addToCart({
id,
index,
donutname,
image_item,
type,
prices:[{...price, quantity:1}],
})
calculateCartPrice();
navigation.navigate('cart');
}
//backhandler functionality
const BackHandler = () => {
navigation.pop();
@ -28,11 +53,14 @@ const Detail = ({navigation, route}: any) => {
//desc
const [descriptionDrink, setDescriptionDrink] = useState(false);
//set prices
const [price, setPrice] = useState(ItemOfIndex.prices[0]);
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<StatusBar backgroundColor='dark'/>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}>
<BackgroundInfo
EnableBackHandler={true}
type={ItemOfIndex.type}
@ -47,16 +75,30 @@ const Detail = ({navigation, route}: any) => {
ToggleFavorite={ToggleFavorite}
/>
<View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>
{descriptionDrink? (
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
<Text style={{color: 'gray', fontSize: 16}}>{ItemOfIndex.description}</Text>
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
<Text style={{color: 'gray', fontSize: 16}} numberOfLines={3}>{ItemOfIndex.description}</Text>
</TouchableWithoutFeedback>
)}
</View>
{descriptionDrink? (
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
<Text style={{color: 'gray', fontSize: 16, marginTop: 10}}>{ItemOfIndex.description}</Text>
</TouchableWithoutFeedback>
) : (
<TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
<Text style={{color: 'gray', fontSize: 16, marginTop: 10}} numberOfLines={3}>{ItemOfIndex.description}</Text>
</TouchableWithoutFeedback>
)}
</View>
<Payment
price={price}
buttonTitle = 'Add to cart'
buttonPressHandler={() => {
addtoCartHandler({
id: ItemOfIndex.id,
index: ItemOfIndex.index,
donutname: ItemOfIndex.donutname,
image_item: ItemOfIndex.image_item,
type: ItemOfIndex.type,
price: price,
})
}}
/>
</ScrollView>
</View>
)

54
donutshop/app/screen/DetailDrink.tsx
View file

@ -4,11 +4,12 @@ import { useStore } from '../store/store'
import { StatusBar } from 'expo-status-bar';
import { ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler';
import BackgroundDrinkInfo from "../components/BackgroundDrinkInfo";
import Payment from "../components/Payment";
const DetailDrink = ({navigation, route}: any) => {
const ItemOfIndex = useStore((state: any) =>
route.params.type == 'Donut' ? state.AllDonutList1 : state.AllDrinkList1,
route.params.type == 'Donut' ? state.AllDonutList2 : state.AllDrinkList2,
)[route.params.index];
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
@ -19,20 +20,47 @@ const DetailDrink = ({navigation, route}: any) => {
favourite ? deleteFromFavoriteList(type, id) : addToFavoriteList(type, id)
}
//add to cart
const addToCart = useStore((state: any) => state.addToCart);
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
const addtoCartHandler = ({
id,
index,
name,
image_item,
type,
price
}: any) => {
addToCart({
id,
index,
name,
image_item,
type,
prices:[{...price, quantity:1}],
});
calculateCartPrice();
navigation.navigate('cart')
}
//backhandler functionality
const BackHandler = () => {
navigation.pop();
}
//desc
const [descriptionDrink, setDescriptionDrink] = useState(false);
//set prices
const [price, setPrice] = useState(ItemOfIndex.prices[0])
const [price, setPrice] = useState(ItemOfIndex.prices[0]);
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<StatusBar backgroundColor='dark'/>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1, justifyContent: 'space-between'}}>
<BackgroundDrinkInfo
EnableBackHandler={true}
type={ItemOfIndex.type}
@ -62,14 +90,28 @@ const DetailDrink = ({navigation, route}: any) => {
<Text style={{fontSize: 18, fontWeight: 500, color: '#EF5A6F'}}>Size</Text>
<View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', gap: 10}}>
{ItemOfIndex.prices.map((data: any) => (
<Pressable key={data.size} style={[styles.sizeBox, {borderColor: data.size == price.size ? '#DA7297' : 'gray', backgroundColor: data.size == price.size ? '#DA7297' : 'white'}]}>
<Pressable onPress={() => {setPrice(data)}} key={data.size} style={[styles.sizeBox, {borderColor: data.size == price.size ? '#DA7297' : 'gray', backgroundColor: data.size == price.size ? '#DA7297' : 'white'}]}>
<Text style={{fontSize: ItemOfIndex.type == 'Drink'? 14: 16, color: data.size == price.size ? 'white' : 'gray'}}>{data.size}</Text>
</Pressable>
))}
</View>
</View>
</View>
<Payment
price={price}
buttonTitle = 'Add to cart'
buttonPressHandler={() => {
addtoCartHandler({
id: ItemOfIndex.id,
index: ItemOfIndex.index,
name: ItemOfIndex.name,
image_item: ItemOfIndex.image_item,
type: ItemOfIndex.type,
price: price,
})
}}
/>
</ScrollView>
</View>
)

57
donutshop/app/screen/Menu.tsx
View file

@ -1,4 +1,4 @@
import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions} from 'react-native'
import { View, Text, ScrollView, StyleSheet, Pressable, Dimensions, ToastAndroid} from 'react-native'
import React, { useState } from 'react'
import { useStore } from '../store/store';
import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';
@ -32,8 +32,8 @@ const getDonutList = (category: string, data: any) => {
const Menu = ({navigation}: any) => {
const DonutList = useStore((state: any) => state.AllDonutList1);
const DrinkList = useStore((state: any) => state.AllDrinkList1);
const DonutList = useStore((state: any) => state.AllDonutList2);
const DrinkList = useStore((state: any) => state.AllDrinkList2);
const [categories, setCategories] = useState(getCategoriesFromData(DonutList));
const [searchMenu, setSearchMenu] = useState('');
@ -57,6 +57,49 @@ const Menu = ({navigation}: any) => {
setSortItem([...DonutList]);
setSearchMenu('');
}
//add to cart
const addToCart = useStore((state: any) => state.addToCart);
const calculateCartPrice = useStore((state: any) => state.calculateCartPrice);
const drinkCardAddToCart = ({
id,
index,
name,
image_item,
type,
prices
}: any) => {
addToCart({
id,
index,
name,
image_item,
type,
prices,
});
calculateCartPrice();
}
const DonutCardAddToCart = ({
id,
index,
donutname,
image_item,
type,
prices
}: any) => {
addToCart({
id,
index,
donutname,
image_item,
type,
prices,
});
calculateCartPrice();
}
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
@ -135,8 +178,8 @@ const Menu = ({navigation}: any) => {
donutname={item.donutname}
image_item={item.image_item}
average_rating={item.average_rating}
prices={item.prices[0]}
buttonPressHandler={() => {}}
price={item.prices[0]}
buttonPressHandler={DonutCardAddToCart}
/>
</Pressable>
}}/>
@ -164,8 +207,8 @@ const Menu = ({navigation}: any) => {
name={item.name}
image_item={item.image_item}
average_rating={item.average_rating}
prices={item.prices[0]}
buttonPressHandler={() => {}}
price={item.prices[0]}
buttonPressHandler={drinkCardAddToCart}
/>
</Pressable>
}}/>