107 lines
No EOL
3.4 KiB
TypeScript
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 |