cart component added

src/components/cart-dropdown/cart-dropdown.component.jsx

@@ -1,11 +1,15 @@
+import { useContext } from 'react';
+import { CartContext } from '../../contexts/cart.context';
 import Button from '../button/button.component';
+import CartItem from '../cart-item/cart-item.component';
 import './cart-dropdown.styles.scss';
 
 const CartDropdown = () => {
+    const {cartItems} = useContext(CartContext)
     return (
         <div className='cart-dropdown-container'>
             <div className='cart-items'>
-
+                {cartItems.map((item) => <CartItem key={item.id} cartItem={item}/>)}
             </div>
             <Button>GO TO CHECKOUT</Button>
         </div>

src/components/cart-icon/cart-icon.component.jsx

@@ -4,12 +4,12 @@ import { ReactComponent as ShoppingIcon } from '../../assets/shopping-bag.svg';
 import './cart-icon.styles.scss';
 
 const CartIcon = () => {
-    const { isCartOpen, setIsCartOpen } = useContext(CartContext);
+    const { isCartOpen, setIsCartOpen, cartCount } = useContext(CartContext);
     const toggleIsCartOpen = () => setIsCartOpen(!isCartOpen)
     return (
         <div className='cart-icon-container' onClick={toggleIsCartOpen}>
             <ShoppingIcon className='shopping-icon' />
-            <span className='item-count'>0</span>
+            <span className='item-count'>{cartCount}</span>
         </div>
     )
 }

src/components/cart-item/cart-item.component.jsx

@@ -0,0 +1,16 @@
+import './cart-item.styles.scss';
+
+const CartItem = ({ cartItem }) => {
+    const { name, imageUrl, price, quantity } = cartItem;
+    return (
+        <div className='cart-item-container'>
+            <img src={imageUrl} alt={`${name}`} />
+            <div className='item-details'>
+                <span className='name'>{name}</span>
+                <span className='price'>{quantity} X ${price}</span>
+            </div>
+        </div>
+    )
+}
+
+export default CartItem;

src/components/cart-item/cart-item.styles.scss

@@ -0,0 +1,24 @@
+.cart-item-container {
+    width: 100%;
+    display: flex;
+    height: 80px;
+    margin-bottom: 15px;
+
+    img {
+      width: 30%;
+    }
+
+    .item-details {
+      width: 70%;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 10px 20px;
+
+      .name {
+        font-size: 16px;
+      }
+    }
+  }
+

src/components/product-card/product-card.component.jsx

@@ -1,15 +1,19 @@
+import { useContext } from 'react';
+import { CartContext } from '../../contexts/cart.context';
 import './product-card.styles.scss';
 import Button from '../button/button.component';
 const ProductCard = ({ product }) => {
     const { name, price, imageUrl } = product;
+    const {addItemToCart} = useContext(CartContext)
+    const addProductToCart = () => addItemToCart(product);
     return (
         <div className='product-card-container'>
             <img src={imageUrl} alt={`${name}`} />
             <div className='footer'>
                 <span className='name'>{name}</span>
                 <span className='price'>{price}</span>
             </div>
-            <Button buttonType='inverted'>Add To Cart</Button>
+            <Button onClick={addProductToCart} buttonType='inverted'>Add To Cart</Button>
         </div>
     )
 }

src/contexts/cart.context.jsx

@@ -1,13 +1,36 @@
-import { createContext, useState } from "react";
+import { createContext, useState, useEffect } from "react";
+
+const addCartItem = (cartItems, productToAdd) => {
+    const exsistingCartItem = cartItems.find((cartItem) => cartItem.id === productToAdd.id)
+    if (exsistingCartItem) {
+        return cartItems.map((cartItem) => cartItem.id === productToAdd.id ? { ...cartItem, quantity: cartItem.quantity + 1 } : cartItem)
+    }
+    return [...cartItems, { ...productToAdd, quantity: 1 }]
+
+}
 
 export const CartContext = createContext({
-    isCartOpen:false,
-    setIsCartOpen: () => {}
+    isCartOpen: false,
+    setIsCartOpen: () => { },
+    cartItems: [],
+    addItemToCart: () => { },
+    cartCount: 0
 });
 
-export const CartProvider = ({children}) => {
+export const CartProvider = ({ children }) => {
     const [isCartOpen, setIsCartOpen] = useState(false)
-    const value = {isCartOpen, setIsCartOpen};
+    const [cartItems, setCartItems] = useState([]);
+    const [cartCount, setCartCount] = useState(0);
+
+    useEffect(() => {
+        const newCartCount = cartItems.reduce((total, cartItem) => total + cartItem.quantity, 0)
+        setCartCount(newCartCount);
+    }, [cartItems])
+
+    const addItemToCart = (product) => {
+        setCartItems(addCartItem(cartItems, product))
+    }
+    const value = { isCartOpen, setIsCartOpen, addItemToCart, cartItems, cartCount };
     return (
         <CartContext.Provider value={value}>{children}</CartContext.Provider>
     )