From f103fbbc014596c185afea9d3e019f11a87cc0d8 Mon Sep 17 00:00:00 2001 From: Miguel Camilo Date: Mon, 3 Apr 2023 17:33:56 -0400 Subject: [PATCH 1/4] Fixed product fetch infinite loop and fixed shopping cart not closing on touch of gray area --- package-lock.json | 1 + src/Components/Cart.jsx | 3 ++- src/Components/ProductTable.jsx | 30 ++++++++++++++++++++++-------- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index d01ddfa..bbd664e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "react-ecommerce", "version": "0.0.1", "dependencies": { "@headlessui/react": "^1.6.0", diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 917b7a1..aaf0dcc 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -22,7 +22,8 @@ export default function Cart({ open, setOpen, cart, updateCart }) { leaveFrom="opacity-100" leaveTo="opacity-0" > - + + setOpen(false)} className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx index ea76621..c1677f0 100644 --- a/src/Components/ProductTable.jsx +++ b/src/Components/ProductTable.jsx @@ -33,15 +33,29 @@ export default function ProductTable({ cart, updateCart }) { const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions()); const [sortOptions, setSortOptions] = useState(getDefaultSortOptions()); + // useEffect(() => { + // let fetchProducts = async () => { + // console.info("Fetching Products..."); + // let res = await fetch("http://localhost:3001/products"); + // let body = await res.json(); + // setProducts(body); + // }; + // fetchProducts(); + // },[]); + + //! fixed product infinite fetch loop useEffect(() => { - let fetchProducts = async () => { - console.info("Fetching Products..."); - let res = await fetch("http://localhost:3001/products"); - let body = await res.json(); - setProducts(body); - }; - fetchProducts(); - }); + fetch("http://localhost:3001/products") + .then(res => res.json()) + .then(data => { + setProducts(data); + console.info("Fetching Products..."); + }) + .catch(err => { + console.alert(err); + }) + + },[]) return (
From c3786622041a45a617049c3a53821c51d506aa7f Mon Sep 17 00:00:00 2001 From: Miguel Camilo Date: Mon, 3 Apr 2023 23:38:53 -0400 Subject: [PATCH 2/4] fixed persitent cart storage --- src/Components/Cart.jsx | 298 +++++++++++++++++++++----------------- src/Components/NavBar.jsx | 6 +- src/Pages/Home.jsx | 6 +- 3 files changed, 176 insertions(+), 134 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index aaf0dcc..47709e0 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -1,141 +1,179 @@ +import { useEffect } from "react"; 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 }) { - return ( - - { - setOpen; - }} - > -
- - - setOpen(false)} className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" /> - -
- -
-
-
-
- Shopping cart -
- -
-
+ const calculate_cart_total = () => { + let sum = 0 + cart.forEach((product) => { + sum += product.price + }) + return sum + } -
-
-
    - {cart.map((product) => ( -
  • -
    - {product.imageAlt} -
    + useEffect(() => { + // localStorage can only store string values thats + // why we use JSON.stringify + localStorage.setItem(`cart-item${cart.id}`, JSON.stringify(cart)); +}, [cart, cart.id]); -
    -
    -
    -

    {product.name}

    -

    ${product.price}

    -
    -
    -
    -

    Qty {product.quantity}

    -
    - -
    -
    -
    -
    • - ))} -
-
-
-
+
+ +
+
+
+
+ + {" "} + Shopping Cart{" "} + +
+ +
+
+ {/* if no items then show Empty Cart icon */} + {cart.length === 0 && +
+ +

Your Cart is Empty.

+
+ } -
-
-

Subtotal

-

$262.00

-
-

Shipping and taxes calculated at checkout.

- -
-

- or{" "} - -

-
-
-
-
- -
-
-
- - ); +
+
+
    + {/* turnary showing empty cart if not items */} + {cart.map((product) => ( +
  • +
    + {product.imageAlt} +
    + +
    +
    +
    +

    {product.name}

    +

    ${product.price}

    +
    +
    +
    +

    + Qty {product.quantity} +

    + +
    + +
    +
    +
    +
    • + ))} +
+
+
+
+ +
+
+

Subtotal

+

${calculate_cart_total()}

+
+

+ Shipping and taxes calculated at checkout. +

+ +
+

+ or{" "} + +

+
+
+
+ + + + + + + ); } diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx index b1d0db9..9e9fff5 100644 --- a/src/Components/NavBar.jsx +++ b/src/Components/NavBar.jsx @@ -1,7 +1,9 @@ import { ShoppingBagIcon } from "@heroicons/react/outline"; import React from "react"; -export default function NavBar({ setOpen }) { +export default function NavBar({ cart, setOpen }) { + let cart_items = cart.length + return (
@@ -41,7 +43,7 @@ export default function NavBar({ setOpen }) { className="flex-shrink-0 h-6 w-6 text-gray-400 group-hover:text-gray-500" aria-hidden="true" /> - 0 + {cart_items} items in cart, view bag
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 1a5d5d9..f64cdfe 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -5,11 +5,13 @@ import ProductTable from "../Components/ProductTable"; function Home() { const [open, setOpen] = useState(false); - const [cart, updateCart] = useState([]); + const initialCart = JSON.parse(localStorage.getItem('cart-item')) || []; + const [cart, updateCart] = useState(initialCart); + return (
- +
From 4ff57fcfb9a37d2fb2a3df872f44fff99f15280f Mon Sep 17 00:00:00 2001 From: Miguel Camilo Date: Tue, 4 Apr 2023 15:49:03 -0400 Subject: [PATCH 3/4] fixed issues with localStorage --- src/Components/Cart.jsx | 14 +++++++------- src/Components/ProductFilters.jsx | 4 +++- src/Components/ProductTable.jsx | 10 ---------- src/Pages/Home.jsx | 2 +- 4 files changed, 11 insertions(+), 19 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 47709e0..3b29653 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -8,7 +8,8 @@ export default function Cart({ open, setOpen, cart, updateCart }) { const calculate_cart_total = () => { let sum = 0 cart.forEach((product) => { - sum += product.price + // sum += product.price + sum = sum + (product.price * product.quantity) }) return sum } @@ -16,8 +17,8 @@ export default function Cart({ open, setOpen, cart, updateCart }) { useEffect(() => { // localStorage can only store string values thats // why we use JSON.stringify - localStorage.setItem(`cart-item${cart.id}`, JSON.stringify(cart)); -}, [cart, cart.id]); + localStorage.setItem(`cart-item`, JSON.stringify(cart)); +}, [cart]); return ( @@ -60,8 +61,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
- {" "} - Shopping Cart{" "} + Shopping Cart