smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 14:20:43 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: effect

Browse source
This commit is contained in:
mike 2024-10-14 20:56:58 -04:00
parent f34aa95bfe
commit 9a7596b2a8
3 changed files with 54 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
shopping-cart/src/App.jsx
View file

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

2
shopping-cart/src/Cart.jsx
View file

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

71
shopping-cart/src/Store.jsx
View file

@ -3,28 +3,15 @@ import ProductCollection from "./components/productCollection";
import { useOutletContext } from "react-router-dom"; import { useOutletContext } from "react-router-dom";
export default function Store() { export default function Store() {
const [cart, setCart] = useOutletContext(); const [cart, setCart, items, setItems] = 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 [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const url = 'https://fakestoreapi.com/products?limit=5'
console.table(items)
useEffect(() => { useEffect(() => {
fetch("https://fakestoreapi.com/products?limit=5", { mode: "cors" }) if (items === null) {
fetch(url, { mode: "cors" })
.then((response) => { .then((response) => {
if (response.status >= 400) { if (response.status >= 400) {
throw new Error("unable to fetch items"); throw new Error("unable to fetch items");
@ -45,7 +32,51 @@ function useFakeStoreAPI() {
}) })
.catch((error) => console.log(error)) .catch((error) => console.log(error))
.finally(() => setLoading(false)); .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 };
// }