Sizes updated

StefanoPitto · Dec 21, 2022 · 6d33a04 · 6d33a04
1 parent 7d407a7
commit 6d33a04
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 50 deletions.
diff --git a/src/Components/ProductItem.js b/src/Components/ProductItem.js
@@ -1,15 +1,14 @@
 import React from "react";
 import { View, Image, StyleSheet, TouchableOpacity } from "react-native";
 import { Text } from "./Text";
-import { useNavigation } from "@react-navigation/native";
+import { useNavigation, CommonActions } from "@react-navigation/native";
 
 export const ProductItem = ({ item }) => {
-  const navigator = useNavigation();
-
+  const navigation = useNavigation();
   return (
     <TouchableOpacity
       onPress={() => {
-        navigator.navigate("ProductDetailScreen", item);
+        navigation.push("ProductDetailScreen", item);
       }}
     >
       <View style={styles.container}>

diff --git a/src/Components/SliderProductItem.js b/src/Components/SliderProductItem.js
@@ -8,7 +8,7 @@ export const SliderProductItem = ({ item }) => {
   return (
     <TouchableOpacity
       onPress={() => {
-        navigator.navigate("ProductDetailScreen", item);
+        navigator.push("ProductDetailScreen", item);
       }}
       style={styles.outerContainer}
     >

diff --git a/src/Screens/ProductDetailScreen.js b/src/Screens/ProductDetailScreen.js
@@ -35,15 +35,19 @@ export const ProductDetailScreen = ({ route, navigation }) => {
   const { favorites, addToFavorites, removeFromFavorites, isInFavorites } =
     useContext(FavoriteContext);
   const { addToCart, removeFromCart, isInCart } = useContext(CartContext);
-  const { id, imageURL, productName, productPrice, productType } = route.params;
+  const [item, setItem] = useState();
   const [selectedValue, setSelectedValue] = useState();
   const [isFavorite, setIsFavorite] = useState(false);
   const [sizes, setSizes] = useState();
+  const { id, productPrice, productName, productType, imageURL } = route.params;
+
   useEffect(() => {
-    handleSizes();
-  }, [productType]);
+    handleItem();
+  }, []);
 
-  const handleSizes = () => {
+  const handleItem = () => {
+    setItem(id, productPrice, productName, productType, imageURL);
+    if (productType === undefined) return;
     productType === "shoes" ? setSizes(shoesSizes) : setSizes(otherSizes);
   };
   useEffect(() => {
@@ -115,8 +119,15 @@ export const ProductDetailScreen = ({ route, navigation }) => {
                       imageURL,
                       productName,
                       productPrice,
+                      productType,
                     })
-                  : addToFavorites({ id, imageURL, productName, productPrice });
+                  : addToFavorites({
+                      id,
+                      imageURL,
+                      productName,
+                      productPrice,
+                      productType,
+                    });
               }}
               style={styles.favoriteBtn}
             >
@@ -131,46 +142,52 @@ export const ProductDetailScreen = ({ route, navigation }) => {
               )}
             </Pressable>
           </View>
-          <View>
-            <Image style={styles.image} source={{ uri: imageURL }} />
-          </View>
-          <View style={styles.headTextContainer}>
-            <Text style={styles.nameText}>{productName}</Text>
-            <Text style={styles.priceText}>$ {productPrice}</Text>
-          </View>
-          <View style={styles.container}>
-            <Text style={styles.sizeHeadline}>Size</Text>
-            {sizes && (
-              <FlatList
-                data={sizes}
-                horizontal
-                showsHorizontalScrollIndicator={false}
-                renderItem={({ item }) => {
-                  return (
-                    <Pressable
-                      style={[
-                        styles.sizeBtn,
-                        selectedValue === item ? styles.selectedSizeBtn : "",
-                      ]}
-                      onPress={() => {
-                        setSelectedValue(item);
-                      }}
-                    >
-                      <Text
-                        style={
-                          selectedValue === item
-                            ? styles.selectedSizeBtnText
-                            : styles.sizeBtnText
-                        }
-                      >
-                        {item}
-                      </Text>
-                    </Pressable>
-                  );
-                }}
-              />
-            )}
-          </View>
+          {item && (
+            <>
+              <View>
+                <Image style={styles.image} source={{ uri: imageURL }} />
+              </View>
+              <View style={styles.headTextContainer}>
+                <Text style={styles.nameText}>{productName}</Text>
+                <Text style={styles.priceText}>$ {productPrice}</Text>
+              </View>
+              <View style={styles.container}>
+                <Text style={styles.sizeHeadline}>Size</Text>
+                {sizes && (
+                  <FlatList
+                    data={sizes}
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    renderItem={({ item }) => {
+                      return (
+                        <Pressable
+                          style={[
+                            styles.sizeBtn,
+                            selectedValue === item
+                              ? styles.selectedSizeBtn
+                              : "",
+                          ]}
+                          onPress={() => {
+                            setSelectedValue(item);
+                          }}
+                        >
+                          <Text
+                            style={
+                              selectedValue === item
+                                ? styles.selectedSizeBtnText
+                                : styles.sizeBtnText
+                            }
+                          >
+                            {item}
+                          </Text>
+                        </Pressable>
+                      );
+                    }}
+                  />
+                )}
+              </View>
+            </>
+          )}
           <TouchableOpacity style={styles.addToCartBtn} onPress={handleAddBtn}>
             <Text style={styles.btnText}>ADD TO CART</Text>
           </TouchableOpacity>