fix: effect

shopping-cart/src/App.jsx

@@ -5,10 +5,11 @@ import Navbar from "./components/navbar";
 
 function App() {
   const [cart, setCart] = useState({});
+  const [items, setItems] = useState(null);
   return (
     <>
       <Navbar cartItems={cart} />
-      <Outlet context={[cart, setCart]} />
+      <Outlet context={[cart, setCart, items, setItems]} />
     </>
   );
 }

shopping-cart/src/Cart.jsx

@@ -3,7 +3,7 @@ import styles from "./css/cart.module.css";
 import { useOutletContext } from "react-router-dom";
 
 const Cart = () => {
-  const [cart, setCart] = useOutletContext();
+  const [cart, setCart, items, SetItems] = useOutletContext();
 
   const cartItems = Object.keys(cart);
 

shopping-cart/src/Store.jsx

@@ -3,28 +3,15 @@ import ProductCollection from "./components/productCollection";
 import { useOutletContext } from "react-router-dom";
 
 export default function Store() {
-  const [cart, setCart] = useOutletContext();
-  const { items, loading } = useFakeStoreAPI();
-
-  return (
-    <div>
-      <h1>Smig.Tech Coaching Store</h1>
-      <ProductCollection
-        loading={loading}
-        items={items}
-        cart={cart}
-        setCart={setCart}
-      />
-    </div>
-  );
-}
-
-function useFakeStoreAPI() {
-  const [items, setItems] = useState(null);
+  const [cart, setCart, items, setItems] = useOutletContext();
   const [loading, setLoading] = useState(true);
+  const url = 'https://fakestoreapi.com/products?limit=5'
 
+  console.table(items)
   useEffect(() => {
-    fetch("https://fakestoreapi.com/products?limit=5", { mode: "cors" })
+    if (items === null) {
+
+    fetch(url, { mode: "cors" })
       .then((response) => {
         if (response.status >= 400) {
           throw new Error("unable to fetch items");
@@ -45,7 +32,51 @@ function useFakeStoreAPI() {
       })
       .catch((error) => console.log(error))
       .finally(() => setLoading(false));
+    } else {
+      setLoading(false);
+    }
   }, []);
 
-  return { items, loading };
+  return (
+    <div>
+      <h1>Smig.Tech Coaching Store</h1>
+      <ProductCollection
+        loading={loading}
+        items={items}
+        cart={cart}
+        setCart={setCart}
+      />
+    </div>
+  );
 }
+
+// function useFakeStoreAPI() {
+//   const [items, setItems] = useState(null);
+//   const [loading, setLoading] = useState(true);
+
+//   useEffect(() => {
+//     fetch("https://fakestoreapi.com/products?limit=5", { mode: "cors" })
+//       .then((response) => {
+//         if (response.status >= 400) {
+//           throw new Error("unable to fetch items");
+//         }
+//         return response.json();
+//       })
+//       .then((response) => {
+//         const arr = [];
+//         response.forEach((item) => {
+//           arr.push({
+//             title: item.title,
+//             price: item.price,
+//             image: item.image,
+//             id: crypto.randomUUID(),
+//           });
+//         });
+//         setItems(arr);
+//       })
+//       .catch((error) => console.log(error))
+//       .finally(() => setLoading(false));
+//   }, []);
+
+//   return { items, loading };
+// }