Sizes on Product detail screen update

StefanoPitto · Dec 21, 2022 · 7d407a7 · 7d407a7
1 parent 9810b82
commit 7d407a7
Show file tree

Hide file tree

Showing 9 changed files with 142 additions and 76 deletions.
diff --git a/assets/products.json b/assets/products.json
@@ -79,22 +79,43 @@
     },
     {
       "id": 12,
-      "productImage": "https://i.imgur.com/58YHBHp.png",
-      "productName": "Campera Nike",
+      "imageURL": "https://i.imgur.com/OpBXDOR.png",
+      "productName": "Nike Jacket",
       "productPrice": 200,
       "productType": "tops"
     },
     {
       "id": 13,
-      "productImage": "https://i.imgur.com/O1nSRXF.png",
-      "productName": "Campera Nike",
+      "imageURL": "https://i.imgur.com/J2hcp0U.png",
+      "productName": "Nike Jacket",
       "productPrice": 180,
       "productType": "tops"
     },
     {
       "id": 14,
-      "productImage": "https://i.imgur.com/6NDgCq9.png",
-      "productName": "Campera Nike",
+      "imageURL": "https://i.imgur.com/iYksCxD.png",
+      "productName": "Nike Jacket",
+      "productPrice": 180,
+      "productType": "tops"
+    },
+    {
+      "id": 15,
+      "imageURL": "https://i.imgur.com/WpiKeSo.png",
+      "productName": "Pants",
+      "productPrice": 180,
+      "productType": "pants"
+    },
+    {
+      "id": 16,
+      "imageURL": "https://i.imgur.com/QQq0pwK.png",
+      "productName": "T-Shirt",
+      "productPrice": 180,
+      "productType": "tops"
+    },
+    {
+      "id": 17,
+      "imageURL": "https://i.imgur.com/8VCQyL0.png",
+      "productName": "T-Shirt",
       "productPrice": 180,
       "productType": "tops"
     }

diff --git a/package.json b/package.json
@@ -25,7 +25,8 @@
     "react-native-gesture-handler": "~2.8.0",
     "react-native-safe-area-context": "4.4.1",
     "react-native-screens": "~3.18.0",
-    "react-native-toast-message": "^2.1.5"
+    "react-native-toast-message": "^2.1.5",
+    "react-native-uuid": "^2.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

diff --git a/src/Components/HorizontalSlider.js b/src/Components/HorizontalSlider.js
@@ -2,6 +2,7 @@ import React from "react";
 import { FlatList, StyleSheet } from "react-native";
 import { SliderProductItem } from "./SliderProductItem";
 import { Text } from "./Text";
+import uuid from "react-native-uuid";
 export const HorizontalSlider = ({ products, title }) => {
   return (
     <>
@@ -11,7 +12,10 @@ export const HorizontalSlider = ({ products, title }) => {
           style={styles.list}
           horizontal
           data={products}
-          renderItem={({ item }) => <SliderProductItem item={item} />}
+          keyExtractor={() => uuid.v4()}
+          renderItem={({ item }) => (
+            <SliderProductItem item={item} key={uuid.v4()} />
+          )}
           showsHorizontalScrollIndicator={false}
         />
       )}

diff --git a/src/Components/ProductItem.js b/src/Components/ProductItem.js
@@ -5,6 +5,7 @@ import { useNavigation } from "@react-navigation/native";
 
 export const ProductItem = ({ item }) => {
   const navigator = useNavigation();
+
   return (
     <TouchableOpacity
       onPress={() => {

diff --git a/src/Screens/CartScreen.js b/src/Screens/CartScreen.js
@@ -30,7 +30,7 @@ export const CartScreen = () => {
             )}
           />
         ) : (
-          <Text style={styles.alternativeText}>No Items On Cart...</Text>
+          <Text style={styles.alternativeText}>No items on cart...</Text>
         )}
         {cartItems.length > 0 && (
           <View style={styles.costContainer}>
@@ -63,5 +63,6 @@ const styles = StyleSheet.create({
     fontSize: 30,
     textAlign: "center",
     marginTop: 200,
+    color: "#ffffff",
   },
 });
diff --git a/src/Screens/FavoriteItemsScreen.js b/src/Screens/FavoriteItemsScreen.js
@@ -31,7 +31,7 @@ export const FavoriteItemsScreen = () => {
               renderItem={({ item }) => <ProductItem item={item} />}
             />
           ) : (
-            <Text style={style.alternativeText}>No Favorite items...</Text>
+            <Text style={style.alternativeText}>No favorite items...</Text>
           )}
         </View>
       </SafeAreaView>

diff --git a/src/Screens/HomeScreen.js b/src/Screens/HomeScreen.js
@@ -1,5 +1,10 @@
 import React from "react";
-import { View, SafeAreaView, ActivityIndicator } from "react-native";
+import {
+  View,
+  SafeAreaView,
+  ActivityIndicator,
+  ScrollView,
+} from "react-native";
 
 import { Text } from "../Components/Text";
 import { useProducts } from "../Hooks/useProducts";
@@ -9,31 +14,67 @@ import { HorizontalSlider } from "../Components/HorizontalSlider";
 export const HomeScreen = () => {
   const { loading, products } = useProducts();
 
+  const getRandomElements = (array, numberOfElements) => {
+    let randomElements = [];
+    for (let i = 0; i < numberOfElements; i++) {
+      randomElements.push(array[Math.floor(Math.random() * array.length)]);
+    }
+    return randomElements;
+  };
+
   return (
     <LinearGradient
       // Button Linear Gradient
       colors={["#E58C8A", "#EEC0C6"]}
       style={{ flex: 1 }}
     >
       <SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
-        <View>
-          <Text
-            style={{
-              fontSize: 40,
-              color: "#ffffff",
-              textAlign: "center",
-              letterSpacing: 4,
-              marginTop: 20,
-            }}
-          >
-            LYRASHOP
-          </Text>
-          {loading ? (
-            <ActivityIndicator />
-          ) : (
-            <HorizontalSlider products={products} title="Shoes" />
-          )}
-        </View>
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          style={{ marginVertical: 20 }}
+        >
+          <View>
+            <Text
+              style={{
+                fontSize: 40,
+                color: "#ffffff",
+                textAlign: "center",
+                letterSpacing: 4,
+                marginTop: 20,
+              }}
+            >
+              LYRASHOP
+            </Text>
+            {loading ? (
+              <ActivityIndicator style={{ marginTop: 260 }} color="#ffffff" />
+            ) : (
+              <>
+                <HorizontalSlider
+                  products={getRandomElements(products, 10)}
+                  title="Trending"
+                />
+                <HorizontalSlider
+                  products={products.filter(
+                    (item) => item.productType === "shoes"
+                  )}
+                  title="Shoes"
+                />
+                <HorizontalSlider
+                  products={products.filter(
+                    (item) => item.productType === "tops"
+                  )}
+                  title="Tops & T-Shirts"
+                />
+                <HorizontalSlider
+                  products={products.filter(
+                    (item) => item.productType === "pants"
+                  )}
+                  title="Pants"
+                />
+              </>
+            )}
+          </View>
+        </ScrollView>
       </SafeAreaView>
     </LinearGradient>
   );

diff --git a/src/Screens/ProductDetailScreen.js b/src/Screens/ProductDetailScreen.js
@@ -38,12 +38,14 @@ export const ProductDetailScreen = ({ route, navigation }) => {
   const { id, imageURL, productName, productPrice, productType } = route.params;
   const [selectedValue, setSelectedValue] = useState();
   const [isFavorite, setIsFavorite] = useState(false);
-  const [isInTheCart, setIsInTheCart] = useState(false);
-
-  const sizes = productType === "shoes" ? shoesSizes : otherSizes;
-
-  useEffect(() => {}, [addToCart, removeFromCart]);
+  const [sizes, setSizes] = useState();
+  useEffect(() => {
+    handleSizes();
+  }, [productType]);
 
+  const handleSizes = () => {
+    productType === "shoes" ? setSizes(shoesSizes) : setSizes(otherSizes);
+  };
   useEffect(() => {
     handleFavorite();
   }, [addToFavorites, removeFromFavorites, favorites]);
@@ -138,50 +140,40 @@ export const ProductDetailScreen = ({ route, navigation }) => {
           </View>
           <View style={styles.container}>
             <Text style={styles.sizeHeadline}>Size</Text>
-            <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
-                      }
+            {sizes && (
+              <FlatList
+                data={sizes}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                renderItem={({ item }) => {
+                  return (
+                    <Pressable
+                      style={[
+                        styles.sizeBtn,
+                        selectedValue === item ? styles.selectedSizeBtn : "",
+                      ]}
+                      onPress={() => {
+                        setSelectedValue(item);
+                      }}
                     >
-                      {item}
-                    </Text>
-                  </Pressable>
-                );
-              }}
-            />
+                      <Text
+                        style={
+                          selectedValue === item
+                            ? styles.selectedSizeBtnText
+                            : styles.sizeBtnText
+                        }
+                      >
+                        {item}
+                      </Text>
+                    </Pressable>
+                  );
+                }}
+              />
+            )}
           </View>
-          {isInTheCart ? (
-            <TouchableOpacity
-              style={styles.addToCartBtn}
-              onPress={handleRemoveBtn}
-            >
-              <Text style={styles.btnText}>Remove From Cart</Text>
-            </TouchableOpacity>
-          ) : (
-            <TouchableOpacity
-              style={styles.addToCartBtn}
-              onPress={handleAddBtn}
-            >
-              <Text style={styles.btnText}>ADD TO CART</Text>
-            </TouchableOpacity>
-          )}
+          <TouchableOpacity style={styles.addToCartBtn} onPress={handleAddBtn}>
+            <Text style={styles.btnText}>ADD TO CART</Text>
+          </TouchableOpacity>
         </View>
       </SafeAreaView>
     </LinearGradient>

diff --git a/yarn.lock b/yarn.lock
@@ -5443,6 +5443,11 @@ react-native-toast-message@^2.1.5:
   resolved "https://registry.yarnpkg.com/react-native-toast-message/-/react-native-toast-message-2.1.5.tgz#550acb9c6c0f1ee49c6b57b65a56d34e297eb723"
   integrity sha512-mk3rELtBEhrhWBCN6CTaw0gypgL9ZNauX3xx1LUs4uee9vc0pVsghrKxO57vroUCcNL2hDeZSLJWdQNMCkGeaQ==
 
+react-native-uuid@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-uuid/-/react-native-uuid-2.0.1.tgz#ed4e2dfb1683eddb66967eb5dca140dfe1abddb9"
+  integrity sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g==
+
 [email protected]:
   version "0.70.5"
   resolved "https://registry.yarnpkg.com/react-native/-/react-native-0.70.5.tgz#f60540b21d338891086e0a834e331c124dd1f55c"