From 5a92dfdb97d67c64d7d20b30f806d1a279614f55 Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Sun, 19 Feb 2023 13:52:13 -0800 Subject: [PATCH 1/6] fix infinite loop --- src/Components/ProductTable.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx index ea76621..4bcff02 100644 --- a/src/Components/ProductTable.jsx +++ b/src/Components/ProductTable.jsx @@ -41,7 +41,7 @@ export default function ProductTable({ cart, updateCart }) { setProducts(body); }; fetchProducts(); - }); + }, []); return (
From b5a8c4def2cb982461fadc0d431bfe6ae5ad7d64 Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Mon, 20 Feb 2023 09:20:43 -0800 Subject: [PATCH 2/6] add cart is empty --- src/Components/Cart.jsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 917b7a1..8e654c9 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -1,5 +1,5 @@ import { Dialog, Transition } from "@headlessui/react"; -import { XIcon } from "@heroicons/react/outline"; +import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline"; import React, { Fragment } from "react"; export default function Cart({ open, setOpen, cart, updateCart }) { @@ -37,7 +37,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) { >
-
+
Shopping cart
@@ -51,7 +51,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
- +
+ +

Your Cart is Empty.

+
    From a048ef6202d2242fd4835c0599ab5d097b1a1182 Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Mon, 20 Feb 2023 09:35:29 -0800 Subject: [PATCH 3/6] show cart empty when cart.length is 0 --- src/Components/Cart.jsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 8e654c9..ab5d322 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -51,10 +51,11 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
-
+ {cart.length == 0 && +
-

Your Cart is Empty.

-
+ Your Cart is Empty. +
}
    From 8ddb7cabb18bb6cc70dc82cb041721eb04d3257a Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Wed, 22 Feb 2023 15:16:56 -0800 Subject: [PATCH 4/6] load cart from localstorage if exists --- src/Pages/Home.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 1a5d5d9..19f5a22 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -1,11 +1,22 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import Cart from "../Components/Cart"; import NavBar from "../Components/NavBar"; import ProductTable from "../Components/ProductTable"; function Home() { const [open, setOpen] = useState(false); - const [cart, updateCart] = useState([]); + const [cart, updateCart] = useState(() => { + const localCart = JSON.parse(localStorage.getItem('cart')) + return localCart ? localCart : [] + }); + + // Read cart from localstorage on load + // useEffect(() => { + // const cart = JSON.parse(localStorage.getItem('cart')) + // if (cart) { + // updateCart(cart) + // } + // }, []) return (
    From bfdffeb0c56fa0d6266a84eed16ce2b0eccbe952 Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Wed, 22 Feb 2023 15:36:32 -0800 Subject: [PATCH 5/6] update localstorage cart on add/remove item --- src/Pages/Home.jsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 19f5a22..851c831 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -10,13 +10,16 @@ function Home() { return localCart ? localCart : [] }); - // Read cart from localstorage on load - // useEffect(() => { - // const cart = JSON.parse(localStorage.getItem('cart')) - // if (cart) { - // updateCart(cart) - // } - // }, []) + // Trying to have one location to update the local storage when the cart state changes, but only when items are added or removed. + // It doesn't make sense to overwrite the localstorage every time the page is loaded with the logic I have with state, above. + // But this implementation isn't much better, since I'm reading from disk twice on first load, and then again every time the cart is updated. + // The alternative that I'm aware of is to put it in the onClick actions for adding and removing from the cart, which probably makes more sense at this point in time. + // That way, we're only reading/writing to disk as actually necessary, but it does spread the code to do the same thing across multiple components. + useEffect(() => { + if (cart != JSON.parse(localStorage.getItem('cart'))){ + localStorage.setItem('cart', JSON.stringify(cart)) + } + }, [cart]) return (
    From a91d8356203aeffb7c1148771329c568e42377fe Mon Sep 17 00:00:00 2001 From: Matt Pauls Date: Sat, 11 Mar 2023 16:38:54 -0800 Subject: [PATCH 6/6] change updateCart to separate wrap of setCartState --- src/Pages/Home.jsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 851c831..fa5c8f9 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -5,7 +5,7 @@ import ProductTable from "../Components/ProductTable"; function Home() { const [open, setOpen] = useState(false); - const [cart, updateCart] = useState(() => { + const [cart, setCartState] = useState(() => { const localCart = JSON.parse(localStorage.getItem('cart')) return localCart ? localCart : [] }); @@ -15,6 +15,11 @@ function Home() { // But this implementation isn't much better, since I'm reading from disk twice on first load, and then again every time the cart is updated. // The alternative that I'm aware of is to put it in the onClick actions for adding and removing from the cart, which probably makes more sense at this point in time. // That way, we're only reading/writing to disk as actually necessary, but it does spread the code to do the same thing across multiple components. + function updateCart(newCart) { + localStorage.setItem('cart', JSON.stringify(newCart)) + setCartState(newCart) + } + useEffect(() => { if (cart != JSON.parse(localStorage.getItem('cart'))){ localStorage.setItem('cart', JSON.stringify(cart))