Merge pull request #1 from snigdhasankhe/easy-features+bugs

Adding easy fixes and enhancements.
snigdhasankhe · May 8, 2022 · 7031345 · 7031345
2 parents 986136d + 0e293b6
commit 7031345
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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 }) {
@@ -55,6 +55,13 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                     <div className="mt-8">
                       <div className="flow-root">
                         <ul role="list" className="-my-6 divide-y divide-gray-200">
+                          {cart.length == 0 &&
+                            <div className="flex flex-column justify-center items-center h-[20rem]">
+                              <div className="items-center">
+                                <ShoppingCartIcon className="flex flex-row w-12 mx-10" />
+                                <div className="pt-2">Your Cart is Empty</div>
+                              </div>
+                            </div>}
                           {cart.map((product) => (
                             <li key={product.id} className="flex py-6">
                               <div className="h-24 w-24 flex-shrink-0 overflow-hidden rounded-md border border-gray-200">

diff --git 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.length}</span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>

diff --git a/src/Components/ProductTable.jsx b/src/Components/ProductTable.jsx
@@ -38,7 +38,8 @@ export default function ProductTable({ cart, updateCart }) {
     let res = await fetch("http://localhost:3001/products");
     let body = await res.json();
     setProducts(body);
-  });
+    console.log(products);
+  },[]);
 
   return (
     <div className="bg-white">

diff --git 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>