react_native/donutshop/app/screen/Detail.tsx

107 lines
No EOL
3.4 KiB
TypeScript

import { View, Text, ScrollView } from 'react-native';
import React, { useState } from 'react';
import { useStore } from '../store/store';
import { StatusBar } from 'expo-status-bar';
import BackgroundInfo from "../components/BackgroundInfo";
import PaymentFooter from "../components/PaymentFooter";
import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
const Detail = ({navigation, route}: any) => {
const ItemOfIndex = useStore((state: any) =>
route.params.type == 'Donut' ? state.AllDonutMenu : state.AllDrinkMenu,
)[route.params.index];
const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
const deleteFromFavoriteList = useStore((state: any) => state.deleteFromFavoriteList);
//favorite functionality
const ToggleFavorite = (favourite: boolean, type: string, id: string) => {
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();
}
//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, justifyContent: 'space-between'}}>
<BackgroundInfo
EnableBackHandler={true}
type={ItemOfIndex.type}
id={ItemOfIndex.id}
image_item={ItemOfIndex.image_item}
favourite={ItemOfIndex.favourite}
donutname={ItemOfIndex.donutname}
calories={ItemOfIndex.calories}
average_rating={ItemOfIndex.average_rating}
ratings_count={ItemOfIndex.ratings_count}
BackHandler={BackHandler}
ToggleFavorite={ToggleFavorite}
/>
<View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>
{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>
<PaymentFooter
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>
)
}
export default Detail