add to cart

src/components/Headers.tsx

@@ -1,17 +1,21 @@
-import React from 'react'
+import React, {useContext} from 'react'
 
 import { AiOutlineShoppingCart } from 'react-icons/ai';
-import { Link } from "react-router-dom";
+import { Link, useInRouterContext } from "react-router-dom";
+import { CartContext } from '../context/CartContextProvider';
 
 const Headers = () => {
+
+  const cart = useContext(CartContext);
+
   return (
     <header>
       <Link className="logo" to="/">
         shop cart
       </Link>
       <Link to="/cart">
         <AiOutlineShoppingCart className="shop-icon" />
-        <span>2</span>
+        <span>{cart.userCart.length}</span>
       </Link>
     </header>
   )

src/context/CartContextProvider.tsx

@@ -30,7 +30,26 @@ const CartContextProvider = ({ children }: CartProps) => {
       .catch((err) => console.log(err))
   }, [])
 
-  const addProduts = (id: number) => {}
+  const addProduts = (id: number) => {
+    setUserCart(prevProducts => {
+
+      const mainProductInCart = userCart.find(product => product.id === id);
+
+      if (mainProductInCart) {
+        return prevProducts.map(product => {
+          if (product.id === id) {
+            return {...product, count:product.count + 1}
+          } else {
+            return product;
+          }
+        })
+      } else {
+        const mainProductInShop = shop.find(product => product.id === id) as Produts;
+        return [...prevProducts, {...mainProductInShop, count:1}]
+      }
+      return []
+    })
+  }
 
   const removeProduts = (id: number) => setUserCart(prevProducts => prevProducts.filter(product => product.id !== id));
 

src/types/products.types.ts

@@ -8,5 +8,6 @@ export type Produts = {
     rating: {
         rate: number;
         count: number;
-    }
+    },
+    count: number
 };