diff --git a/shopping-cart/src/App.jsx b/shopping-cart/src/App.jsx
index 0c720d4..c68d04d 100644
--- a/shopping-cart/src/App.jsx
+++ b/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 (
<>
-
+
>
);
}
diff --git a/shopping-cart/src/Cart.jsx b/shopping-cart/src/Cart.jsx
index f303374..06e918c 100644
--- a/shopping-cart/src/Cart.jsx
+++ b/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);
diff --git a/shopping-cart/src/Store.jsx b/shopping-cart/src/Store.jsx
index 2992cd7..1492297 100644
--- a/shopping-cart/src/Store.jsx
+++ b/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 (
-
-
Smig.Tech Coaching Store
-
-
- );
-}
-
-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 (
+
+
Smig.Tech Coaching Store
+
+
+ );
}
+
+// 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 };
+// }