From 5a92dfdb97d67c64d7d20b30f806d1a279614f55 Mon Sep 17 00:00:00 2001
From: Matt Pauls <mattpauls@gmail.com>
Date: Sun, 19 Feb 2023 13:52:13 -0800
Subject: [PATCH 1/4] 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 (
     <div className="bg-white">

From b5a8c4def2cb982461fadc0d431bfe6ae5ad7d64 Mon Sep 17 00:00:00 2001
From: Matt Pauls <mattpauls@gmail.com>
Date: Mon, 20 Feb 2023 09:20:43 -0800
Subject: [PATCH 2/4] 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 }) {
             >
               <div className="pointer-events-auto w-screen max-w-md">
                 <div className="flex h-full flex-col overflow-y-scroll bg-white shadow-xl">
-                  <div className="flex-1 overflow-y-auto py-6 px-4 sm:px-6">
+                  <div className="flex flex-col flex-1 overflow-y-auto py-6 px-4 sm:px-6">
                     <div className="flex items-start justify-between">
                       <Dialog.Title className="text-lg font-medium text-gray-900"> Shopping cart </Dialog.Title>
                       <div className="ml-3 flex h-7 items-center">
@@ -51,7 +51,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                         </button>
                       </div>
                     </div>
-
+                    <div className="flex flex-col justify-center items-center flex-1">
+                      <ShoppingCartIcon className="h-12 w-12" />
+                      <p className="pt-2">Your Cart is Empty.</p>
+                    </div>
                     <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">

From a048ef6202d2242fd4835c0599ab5d097b1a1182 Mon Sep 17 00:00:00 2001
From: Matt Pauls <mattpauls@gmail.com>
Date: Mon, 20 Feb 2023 09:35:29 -0800
Subject: [PATCH 3/4] 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 }) {
                         </button>
                       </div>
                     </div>
-                    <div className="flex flex-col justify-center items-center flex-1">
+                    {cart.length == 0 && 
+                      <div className="flex flex-col justify-center items-center flex-1">
                       <ShoppingCartIcon className="h-12 w-12" />
-                      <p className="pt-2">Your Cart is Empty.</p>
-                    </div>
+                      <span className="pt-2">Your Cart is Empty.</span>
+                    </div>}
                     <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">

From 17486e9007b7c11e9d7668407a6eaeeaf86d383c Mon Sep 17 00:00:00 2001
From: Matt Pauls <mattpauls@gmail.com>
Date: Mon, 20 Feb 2023 16:09:21 -0800
Subject: [PATCH 4/4] update cart quantity in nav

---
 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..6ed2165 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, cart }) {
   return (
     <div className="bg-white">
       <header className="relative">
@@ -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"
                           />
-                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
+                          <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">{cart.reduce(function (acc, obj) { return acc + obj.quantity}, 0)}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>
diff --git a/src/Pages/Home.jsx b/src/Pages/Home.jsx
index 1a5d5d9..a3f7cc6 100644
--- a/src/Pages/Home.jsx
+++ b/src/Pages/Home.jsx
@@ -9,7 +9,7 @@ function Home() {
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
+      <NavBar {...{ setOpen, cart }} />
       <Cart {...{ open, setOpen, cart, updateCart }} />
       <ProductTable {...{ cart, updateCart }} />
     </main>