fetch-api

src/App.tsx

@@ -2,6 +2,8 @@ import React from "react";
 import { AiFillStar, AiOutlineStar, AiOutlineShoppingCart } from "react-icons/ai";
 
 import Headers from "./components/Headers";
+import CartContextProvider from "./context/CartContextProvider";
+
 import Home from "./Pages/home/Home";
 import "./App.css";
 import { useRoutes } from "react-router-dom";
@@ -11,21 +13,21 @@ function App() {
   const router = useRoutes(routes);
 
   return (
-    // <ContextDataProvider>
-    <div className="app">
-      {/* Start Content */}
-      <Headers />
-      {router}
+    <CartContextProvider>
+      <div className="app">
+        {/* Start Content */}
+        <Headers />
+        {router}
 
-      {/* Finish Content */}
+        {/* Finish Content */}
 
-      <footer>
-        <a target={"_blank"}>
-          mohammad
-        </a>
-      </footer>
-    </div>
-    // </ContextDataProvider>
+        <footer>
+          <a target={"_blank"}>
+            mohammad
+          </a>
+        </footer>
+      </div>
+    // </CartContextProvider>
   );
 }
 

src/context/CartContextProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useState } from 'react';
+import React, { createContext, useEffect, useState } from 'react';
 
 import { Produts } from '../types/products.types';
 
@@ -20,6 +20,18 @@ const CartContextProvider = ({ children }: CartProps) => {
 
     const [userCart, setUserCart] = useState<Produts[]>([]);
     const [shop, setShop] = useState<Produts[]>([]);
+
+    useEffect(() => {
+
+        fetch("https://fakestoreapi.com/products")
+            .then(res => res.json())
+            .then(data => {
+                console.log("data =>", data);
+                setShop(data);
+            })
+            .catch(err => console.log(err));
+
+    }, [])
 
     const addProduts = (id: number) => {