From ca49e13863655deba5db20d838a4277c41c9bc88 Mon Sep 17 00:00:00 2001 From: murtuza syed Date: Wed, 11 Jan 2023 23:48:42 -0600 Subject: [PATCH 1/5] Fix: Infinite loop by passing empty array to useEffect --- 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..2dfa707 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 c4fa9f2e964cc9ded902c3a601866f888604f7d4 Mon Sep 17 00:00:00 2001 From: murtuza syed Date: Thu, 12 Jan 2023 13:28:54 -0600 Subject: [PATCH 2/5] Show Empty cart icon and message --- src/Components/Cart.jsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 917b7a1..65d1b51 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 }) { @@ -52,9 +52,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
+ {cart.length === 0 &&
Your Cart is Empty.
}
-
    +
      {cart.map((product) => (
    • From 27adf5f3257e02b1e7641a07abe7fbad6792706d Mon Sep 17 00:00:00 2001 From: murtuza syed Date: Thu, 12 Jan 2023 16:25:15 -0600 Subject: [PATCH 3/5] Update: Display cart count --- src/Components/NavBar.jsx | 4 ++-- src/Pages/Home.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx index b1d0db9..1f83db3 100644 --- a/src/Components/NavBar.jsx +++ b/src/Components/NavBar.jsx @@ -1,7 +1,7 @@ import { ShoppingBagIcon } from "@heroicons/react/outline"; import React from "react"; -export default function NavBar({ setOpen }) { +export default function NavBar({ setOpen, itemsInCart = 0 }) { return (
      @@ -41,7 +41,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 + {itemsInCart} items in cart, view bag
      diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx index 1a5d5d9..31b9507 100644 --- a/src/Pages/Home.jsx +++ b/src/Pages/Home.jsx @@ -9,7 +9,7 @@ function Home() { return (
      - +
      From cf74dc2133637d99c401207624bdf90780e7ec2d Mon Sep 17 00:00:00 2001 From: murtuza syed Date: Mon, 16 Jan 2023 22:37:15 -0600 Subject: [PATCH 4/5] Update: Use Filters options --- src/Components/Cart.jsx | 16 +++++++--- src/Components/ProductFilters.jsx | 53 +++++++++++++++++++++++++++---- src/Components/ProductTable.jsx | 36 ++++++++++++++++++++- src/Pages/Home.jsx | 9 ++++-- 4 files changed, 99 insertions(+), 15 deletions(-) diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx index 65d1b51..698790b 100644 --- a/src/Components/Cart.jsx +++ b/src/Components/Cart.jsx @@ -1,8 +1,16 @@ import { Dialog, Transition } from "@headlessui/react"; import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline"; -import React, { Fragment } from "react"; +import React, { Fragment, useState } from "react"; +import { useEffect } from "react"; export default function Cart({ open, setOpen, cart, updateCart }) { + const [total, setTotal] = useState(0); + useEffect(() => { + const totalAmount = cart.reduce((acc, current) => { + return acc + current.price + },0) + setTotal(totalAmount); + },[cart]) return ( { setOpen; }} - > + >
      - + setOpen(false)}/>
      @@ -106,7 +114,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {

      Subtotal

      -

      $262.00

      +

      ${total}

      Shipping and taxes calculated at checkout.

      diff --git a/src/Components/ProductFilters.jsx b/src/Components/ProductFilters.jsx index 0f3262a..dd72ab5 100644 --- a/src/Components/ProductFilters.jsx +++ b/src/Components/ProductFilters.jsx @@ -1,12 +1,14 @@ import { Disclosure, Menu, Transition } from "@headlessui/react"; import { ChevronDownIcon, FilterIcon } from "@heroicons/react/solid"; -import React, { Fragment } from "react"; +import React, { Fragment, useRef } from "react"; +import { useState } from "react"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } export default function ProductFilters({ filterOptions, setFilterOptions, sortOptions, setSortOptions }) { + return (
      -
      @@ -47,8 +59,17 @@ export default function ProductFilters({ filterOptions, setFilterOptions, sortOp name="price[]" defaultValue={option.minValue} type="checkbox" - className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black" - defaultChecked={option.checked} + className="flex-shrink-0 h-4 w-4 border-gray-300 rounded text-black focus:ring-black" + checked={option.checked} + onChange={() => { + const updatePrice = [...filterOptions.price]; + updatePrice[optionIdx].checked = !updatePrice[optionIdx].checked; + const updateFilters = { + color: [...filterOptions.color], + price: updatePrice + }; + setFilterOptions(updateFilters); + }} />