Horizontal slider add and HomeScreen update

App.js

@@ -1,13 +1,16 @@
 import { NavigationContainer } from "@react-navigation/native";
-import FavoriteContextProvider from "./src/Context/FavoritesContextProvider";
+import CartContextProvider from "./src/Context/CartContext/CartContextProvider";
+import FavoriteContextProvider from "./src/Context/FavoriteContext/FavoritesContextProvider";
 import { Navigator } from "./src/Navigator/Navigator";
 
 export default function App() {
   return (
     <FavoriteContextProvider>
-      <NavigationContainer>
-        <Navigator />
-      </NavigationContainer>
+      <CartContextProvider>
+        <NavigationContainer>
+          <Navigator />
+        </NavigationContainer>
+      </CartContextProvider>
     </FavoriteContextProvider>
   );
 }

package.json

@@ -24,7 +24,8 @@
     "react-native": "0.70.5",
     "react-native-gesture-handler": "~2.8.0",
     "react-native-safe-area-context": "4.4.1",
-    "react-native-screens": "~3.18.0"
+    "react-native-screens": "~3.18.0",
+    "react-native-toast-message": "^2.1.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9"

src/Components/CartItem.js

@@ -0,0 +1,53 @@
+import React, { useContext } from "react";
+import {
+  TouchableOpacity,
+  View,
+  Image,
+  Pressable,
+  StyleSheet,
+} from "react-native";
+import { FontAwesome } from "@expo/vector-icons";
+import { Text } from "./Text";
+import CartContext from "../Context/CartContext/CartContext";
+export const CartItem = ({ item, id }) => {
+  const { removeFromCart } = useContext(CartContext);
+  return (
+    <TouchableOpacity style={styles.container}>
+      <View style={styles.innerContainer}>
+        <Image style={styles.image} source={{ uri: item.imageURL }} />
+        <Text>{item.productName}</Text>
+        <Text>{item.size}</Text>
+        <Text>$ {item.productPrice}</Text>
+        <Pressable
+          style={{ zIndex: 10 }}
+          onPress={() => {
+            console.log("PRESSED");
+            removeFromCart({ id, productPrice: item.productPrice });
+          }}
+        >
+          <FontAwesome name="times" size={24} color="red" />
+        </Pressable>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginVertical: 10,
+    marginHorizontal: 20,
+    borderRadius: 5,
+    backgroundColor: "#f1f3f5",
+  },
+  innerContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "center",
+  },
+  image: {
+    width: 100,
+    height: 100,
+    resizeMode: "contain",
+  },
+});

src/Components/HorizontalSlider.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { FlatList, StyleSheet } from "react-native";
+import { SliderProductItem } from "./SliderProductItem";
+import { Text } from "./Text";
+export const HorizontalSlider = ({ products, title }) => {
+  return (
+    <>
+      <Text style={styles.headline}>{title}</Text>
+      {products && (
+        <FlatList
+          style={styles.list}
+          horizontal
+          data={products}
+          renderItem={({ item }) => <SliderProductItem item={item} />}
+          showsHorizontalScrollIndicator={false}
+        />
+      )}
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    marginHorizontal: 20,
+  },
+  headline: {
+    marginTop: 20,
+    fontSize: 20,
+    color: "#ffffff",
+    marginLeft: 24,
+    textTransform: "uppercase",
+  },
+});

src/Components/SliderProductItem.js

@@ -0,0 +1,64 @@
+import React from "react";
+import { View, Image, StyleSheet, TouchableOpacity } from "react-native";
+import { Text } from "./Text";
+import { useNavigation } from "@react-navigation/native";
+
+export const SliderProductItem = ({ item }) => {
+  const navigator = useNavigation();
+  return (
+    <TouchableOpacity
+      onPress={() => {
+        navigator.navigate("ProductDetailScreen", item);
+      }}
+      style={styles.outerContainer}
+    >
+      <View style={styles.container}>
+        <View style={styles.imageContainer}>
+          <Image style={styles.image} source={{ uri: item.imageURL }} />
+        </View>
+        <View style={styles.textContainer}>
+          <Text style={styles.textStyle}>{item.productName}</Text>
+          <Text>${item.productPrice}</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    marginHorizontal: 4,
+  },
+  container: {
+    width: 300,
+    marginTop: 10,
+    marginHorizontal: 20,
+    paddingVertical: 20,
+    marginRight: "auto",
+    marginLeft: "auto",
+    backgroundColor: "#a8edf599",
+    borderRadius: 10,
+  },
+  imageContainer: {
+    width: 180,
+    height: 180,
+    marginRight: "auto",
+    marginLeft: "auto",
+  },
+  image: {
+    widht: 180,
+    height: 180,
+    resizeMode: "contain",
+  },
+  textStyle: {
+    textAlign: "left",
+    color: "#ffffff",
+    fontSize: 16,
+  },
+  textContainer: {
+    display: "flex",
+    justifyContent: "space-around",
+    alignItems: "center",
+    flexDirection: "row",
+  },
+});

src/Context/CartContext/CartContext.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+
+const CartContext = createContext();
+
+export const { Provider } = CartContext;
+
+export default CartContext;

src/Context/CartContext/CartContextProvider.js

@@ -0,0 +1,37 @@
+import React, { useState, useEffect } from "react";
+
+import { Provider } from "./CartContext";
+
+const CartContextProvider = ({ children }) => {
+  const [cartItems, setCartItems] = useState([]);
+  const [totalCost, setTotalCost] = useState(0);
+  const addToCart = (item) => {
+    if (cartItems.includes(item)) return;
+    setCartItems([...cartItems, item]);
+    setTotalCost(totalCost + item.productPrice);
+  };
+
+  const removeFromCart = (item) => {
+    console.log("entre");
+    let updatedCartItems = cartItems.filter(
+      (cartItem, index) => index !== item.id
+    );
+    setCartItems(updatedCartItems);
+    setTotalCost(totalCost - item.productPrice);
+  };
+
+  return (
+    <Provider
+      value={{
+        cartItems,
+        addToCart,
+        removeFromCart,
+        totalCost,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+export default CartContextProvider;

src/Context/FavoritesContextProvider.js → src/Context/FavoriteContext/FavoritesContextProvider.js

@@ -31,6 +31,7 @@ const FavoriteContextProvider = ({ children }) => {
     } catch (error) {
       // Error saving data
     }
+    console.log(favorites);
   };
 
   const removeFromFavorites = async (item) => {
@@ -44,7 +45,7 @@ const FavoriteContextProvider = ({ children }) => {
   };
 
   const isInFavorites = (item) => {
-    let array = favorites.filter((element) => element.id === item.id);
+    let array = favorites.filter((element) => element.id === item);
     return array.length > 0;
   };
 

src/Navigator/Navigator.js

@@ -3,7 +3,7 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { HomeStackNavigator } from "../StackNavigator/HomeStackNavigator";
 import { FavoriteStackNavigator } from "../StackNavigator/FavoriteStackNavigator";
 import { MaterialIcons } from "@expo/vector-icons";
-
+import { CartScreen } from "../Screens/CartScreen";
 const Tab = createBottomTabNavigator();
 
 export const Navigator = () => (
@@ -18,10 +18,14 @@ export const Navigator = () => (
           case "HomeStackNavigator":
             iconName = "home";
             break;
+          case "CartScreen":
+            iconName = "shopping-bag";
+            break;
         }
         return <MaterialIcons name={iconName} size={30} color="#E58C8A" />;
       },
       headerShown: false,
+      tabBarShowLabel: false,
     })}
   >
     <Tab.Screen
@@ -34,5 +38,10 @@ export const Navigator = () => (
       options={{ title: "Favorites" }}
       component={FavoriteStackNavigator}
     />
+    <Tab.Screen
+      name="CartScreen"
+      options={{ title: "Cart" }}
+      component={CartScreen}
+    />
   </Tab.Navigator>
 );

src/Screens/CartScreen.js

@@ -0,0 +1,67 @@
+import React, { useContext } from "react";
+import { View, SafeAreaView, StyleSheet } from "react-native";
+import { Text } from "../Components/Text";
+import { LinearGradient } from "expo-linear-gradient";
+import CartContext from "../Context/CartContext/CartContext";
+import { FlatList } from "react-native-gesture-handler";
+import { CartItem } from "../Components/CartItem";
+
+export const CartScreen = () => {
+  const { cartItems, totalCost } = useContext(CartContext);
+
+  return (
+    <LinearGradient
+      // Button Linear Gradient
+      colors={["#E58C8A", "#EEC0C6"]}
+      style={{ flex: 1 }}
+    >
+      <SafeAreaView>
+        <View>
+          <Text style={styles.headline}>Cart Items</Text>
+        </View>
+        {cartItems.length > 0 ? (
+          <FlatList
+            data={cartItems}
+            keyExtractor={(item, index) => {
+              return `${item.id}${index}`;
+            }}
+            renderItem={({ item, index }) => (
+              <CartItem id={index} item={item} />
+            )}
+          />
+        ) : (
+          <Text style={styles.alternativeText}>No Items On Cart...</Text>
+        )}
+        {cartItems.length > 0 && (
+          <View style={styles.costContainer}>
+            <Text style={{ fontSize: 20 }}>Total cost:</Text>
+            <Text style={{ fontSize: 20 }}>$ {totalCost}</Text>
+          </View>
+        )}
+      </SafeAreaView>
+    </LinearGradient>
+  );
+};
+
+const styles = StyleSheet.create({
+  headline: {
+    color: "#ffffff",
+    textAlign: "center",
+    fontSize: 40,
+    letterSpacing: 4,
+    marginTop: 20,
+  },
+  costContainer: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginHorizontal: 20,
+    borderTopWidth: 4,
+    borderTopColor: "black",
+  },
+  alternativeText: {
+    fontSize: 30,
+    textAlign: "center",
+    marginTop: 200,
+  },
+});

src/Screens/FavoriteItemsScreen.js

@@ -8,7 +8,7 @@ import {
 } from "react-native";
 import { ProductItem } from "../Components/ProductItem";
 import { Text } from "../Components/Text";
-import FavoriteContext from "../Context/FavoriteContext";
+import FavoriteContext from "../Context/FavoriteContext/FavoriteContext";
 import { LinearGradient } from "expo-linear-gradient";
 export const FavoriteItemsScreen = () => {
   const { favorites, loading } = useContext(FavoriteContext);