updated donut detail page and create drink detail page with description and size functionality

donutshop/app/components/BackgroundDrinkInfo.tsx

@@ -0,0 +1,73 @@
+import { ImageBackground, ImageProps, Pressable, StyleSheet, Text, View } from 'react-native'
+import React from 'react'
+import { Ionicons, AntDesign } from '@expo/vector-icons';
+
+interface BackgroundDrinkInfoProps{
+  EnableBackHandler: boolean;
+  type: string,
+  id: string,
+  image_item: ImageProps,
+  favourite: boolean,
+  name: string,
+  calories: string,
+  average_rating: number,
+  ratings_count: string,
+  BackHandler?: any;
+  ToggleFavorite: any
+}
+
+
+const BackgroundDrinkInfo:React.FC<BackgroundDrinkInfoProps> = ({
+  EnableBackHandler,
+  type,
+  id,
+  image_item,
+  favourite,
+  name,
+  calories,
+  average_rating,
+  ratings_count,
+  BackHandler,
+  ToggleFavorite,
+}) => {
+
+  return (
+    <View>
+      <ImageBackground source={image_item} style={{width: '100%', aspectRatio: 20/25, justifyContent: 'space-between'}}>
+        {EnableBackHandler ? (
+          <View style={{padding:10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
+              <Pressable onPress={() => {BackHandler()}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
+                <Ionicons name="chevron-back" size={30} color="gray"/>
+              </Pressable>
+              <Pressable onPress={() => {ToggleFavorite(favourite, type, id);}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
+                <AntDesign name="heart" size={24} color={favourite ? '#EF5A6F' : 'gray'} />
+              </Pressable>
+          </View>
+        ) : (
+          <View style={{padding:10, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end'}}>
+              <Pressable onPress={() => {ToggleFavorite(favourite, type, id);}} style={{paddingHorizontal: 10, paddingVertical: 10}}>
+                <AntDesign name="heart" size={24} color={favourite ? '#EF5A6F' : 'gray'} />
+              </Pressable>
+          </View>
+        )}
+        <View style={{backgroundColor: 'rgba(255, 255, 255, 0.8)', borderTopRightRadius: 10, borderTopLeftRadius: 10}}>
+          <View style={{padding: 10, marginHorizontal: 10, marginVertical: 10}}>
+            <Text style={{color: '#DA7297', fontSize: 22, fontWeight: 500}}>{name}</Text>    
+          </View>
+          <View style={{flexDirection: 'row', justifyContent: 'space-between', paddingHorizontal: 20, 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 BackgroundDrinkInfo
+
+const styles = StyleSheet.create({})

donutshop/app/components/BackgroundInfo.tsx

@@ -62,7 +62,7 @@ const BackgroundInfo: React.FC<BackgroundInfoProps> = ({
                 <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'}}>({ratings_count})</Text>
+                    <Text style={{color: 'gray', fontSize: 12}}>({ratings_count})</Text>
                 </View>
             </View>
         </View>

donutshop/app/index.js

@@ -5,8 +5,9 @@ import { createStackNavigator } from '@react-navigation/stack';
 import HomeNavigator from "./navigation/HomeNavigator";
 import Detail from "./screen/Detail";
 import Payment from "./screen/Payment";
-import Inbox from "./screen/Inbox"
-import Profile from "./screen/Profile"
+import Inbox from "./screen/Inbox";
+import Profile from "./screen/Profile";
+import DetailDrink from "./screen/DetailDrink.tsx";
 
 
 const Stack = createStackNavigator();
@@ -19,6 +20,7 @@ export default function Index() {
           <Stack.Navigator screenOptions={{headerShown: false}}>
             <Stack.Screen name='Tab' component={HomeNavigator}/>
             <Stack.Screen name='detail' component={Detail}/>
+            <Stack.Screen name='detailDrink' component={DetailDrink}/>
             <Stack.Screen name='payment' component={Payment}/>
             <Stack.Screen name='inbox' component={Inbox}/>
             <Stack.Screen name='profile' component={Profile}/>

donutshop/app/screen/Detail.tsx

@@ -1,14 +1,15 @@
 import { View, Text, ScrollView } from 'react-native';
-import React from 'react';
+import React, { useState } from 'react';
 import { useStore } from '../store/store';
 import { StatusBar } from 'expo-status-bar';
 import BackgroundInfo from "../components/BackgroundInfo";
+import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 
 
 
 const Detail = ({navigation, route}: any) => {
   const ItemOfIndex = useStore((state: any) => 
-    route.params.type == 'Donut' ? state.AllDonutList1 : state.AllDrinkList,
+    route.params.type == 'Donut' ? state.AllDonutList1 : state.AllDrinkList1,
   )[route.params.index];
   
   const addToFavoriteList = useStore((state: any) => state.addToFavoriteList);
@@ -24,26 +25,40 @@ const Detail = ({navigation, route}: any) => {
     navigation.pop();
   }
 
+  //desc
+  const [descriptionDrink, setDescriptionDrink] = useState(false);
+
   
   return (
-    <View style={{flex: 1, backgroundColor: 'white'}}>
-      <StatusBar backgroundColor='dark'/>
-      <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
-        <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}
-        />
-      </ScrollView>
-    </View>
+  <View style={{flex: 1, backgroundColor: 'white'}}>
+    <StatusBar backgroundColor='dark'/>
+    <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{flexGrow: 1}}>
+      <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}}>{ItemOfIndex.description}</Text>
+                </TouchableWithoutFeedback>
+                ) : (
+                <TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
+                    <Text style={{color: 'gray', fontSize: 16}} numberOfLines={3}>{ItemOfIndex.description}</Text>
+                </TouchableWithoutFeedback>
+            )}
+        </View>
+    </ScrollView>
+  </View>
   )
 }
 

donutshop/app/screen/DetailDrink.tsx

@@ -0,0 +1,90 @@
+import { Pressable, StyleSheet, Text, View } from 'react-native'
+import React, { useState } from 'react'
+import { useStore } from '../store/store'
+import { StatusBar } from 'expo-status-bar';
+import { ScrollView, TouchableWithoutFeedback } from 'react-native-gesture-handler';
+import BackgroundDrinkInfo from "../components/BackgroundDrinkInfo";
+
+
+const DetailDrink = ({navigation, route}: any) => {
+    const ItemOfIndex = useStore((state: any) =>
+        route.params.type == 'Donut' ? state.AllDonutList1 : state.AllDrinkList1,
+    )[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)
+    }
+
+    //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}}>
+        <BackgroundDrinkInfo 
+            EnableBackHandler={true}
+            type={ItemOfIndex.type}
+            id={ItemOfIndex.id}
+            image_item={ItemOfIndex.image_item}
+            favourite={ItemOfIndex.favourite}
+            name={ItemOfIndex.name}
+            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}}>{ItemOfIndex.description}</Text>
+                </TouchableWithoutFeedback>
+                ) : (
+                <TouchableWithoutFeedback onPress={() => {setDescriptionDrink(prev => !prev)}}>
+                    <Text style={{color: 'gray', fontSize: 16}} numberOfLines={3}>{ItemOfIndex.description}</Text>
+                </TouchableWithoutFeedback>
+            )}
+
+            <View style={{marginVertical: 20}}>
+                <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'}]}>
+                            <Text style={{fontSize: ItemOfIndex.type == 'Drink'? 14: 16, color: data.size == price.size ? 'white' : 'gray'}}>{data.size}</Text>
+                        </Pressable>
+                    ))}
+                </View>
+            </View>
+        </View>
+        
+      </ScrollView>
+    </View>
+  )
+}
+
+export default DetailDrink
+
+const styles = StyleSheet.create({
+    sizeBox:{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 10,
+        marginTop: 10,
+        borderRadius: 5,
+        borderWidth: 1
+    }
+})

donutshop/app/screen/Menu.tsx

@@ -33,7 +33,7 @@ const getDonutList = (category: string, data: any) => {
 
 const Menu = ({navigation}: any) => {
   const DonutList = useStore((state: any) => state.AllDonutList1);
-  const DrinkList = useStore((state: any) => state.AllDrinkList);
+  const DrinkList = useStore((state: any) => state.AllDrinkList1);
 
   const [categories, setCategories] = useState(getCategoriesFromData(DonutList));
   const [searchMenu, setSearchMenu] = useState('');
@@ -151,7 +151,7 @@ const Menu = ({navigation}: any) => {
             keyExtractor={item => item.id} 
             renderItem={({item}) => {
             return <Pressable onPress={() => {
-              navigation.push('detail', {
+              navigation.push('detailDrink', {
                 index: item.index,
                 id: item.id,
                 type: item.type,