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 }; +// }