Fix Issue developer-job-simulation#5

JunYuHuang · Apr 10, 2023 · 6eb8917 · 6eb8917
1 parent 0881c59
commit 6eb8917
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ This is a simple E-Commerce site made with React and TailwindCSS. Your job is to
 1. [Cart Persistence on Refresh](https://github.com/developer-job-simulation/react-ecommerce/issues/2)
 1. [Add Product Filters Functionality](https://github.com/developer-job-simulation/react-ecommerce/issues/3)
 1. ~~[Product Fetch is Causing Infinite Loop](https://github.com/developer-job-simulation/react-ecommerce/issues/4)~~
-1. [Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/5)
+1. ~~[Need to display 'Empty Cart' When Cart is Empty on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/5)~~
 1. ~~[Update Cart in Nav with Cart Size](https://github.com/developer-job-simulation/react-ecommerce/issues/6)~~
 1. ~~[Cart not closing when User Clicks Gray Region](https://github.com/developer-job-simulation/react-ecommerce/issues/7)~~
 1. [Subtotal Is not Implemented on Cart Page](https://github.com/developer-job-simulation/react-ecommerce/issues/8)

diff --git a/src/Components/Cart.jsx b/src/Components/Cart.jsx
@@ -1,6 +1,69 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { XIcon, ShoppingCartIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
+import { getCartSize } from "../Utilities";
+
+function CartItemList({ cart, updateCart }) {
+  return (
+    <div className="mt-8">
+      <div className="flow-root">
+        <ul role="list" className="-my-6 divide-y divide-gray-200">
+          {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">
+                <img
+                  src={product.imageSrc}
+                  alt={product.imageAlt}
+                  className="h-full w-full object-cover object-center"
+                />
+              </div>
+
+              <div className="ml-4 flex flex-1 flex-col">
+                <div>
+                  <div className="flex justify-between text-base font-medium text-gray-900">
+                    <h3>{product.name}</h3>
+                    <p className="ml-4">${product.price}</p>
+                  </div>
+                </div>
+                <div className="flex flex-1 items-end justify-between text-sm">
+                  <p className="text-gray-500">Qty {product.quantity}</p>
+
+                  <div className="flex">
+                    <button
+                      onClick={() => {
+                        let newCart = cart.filter((p) => {
+                          if (p.id === product.id) {
+                            p.quantity -= 1;
+                          }
+
+                          return p.quantity > 0;
+                        });
+                        updateCart(newCart);
+                      }}
+                      type="button"
+                      className="font-medium text-gray-500 hover:text-black"
+                    >
+                      Remove
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+function EmptyCartDisplay() {
+  return (
+    <div className="flex-1 flex flex-col justify-center items-center">
+      <ShoppingCartIcon className="w-12" />
+      <p className="pt-2">Your Cart is Empty.</p>
+    </div>
+  );
+}
 
 export default function Cart({ open, setOpen, cart, updateCart }) {
   return (
@@ -37,7 +100,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-1 overflow-y-auto py-6 px-4 sm:px-6 flex flex-col">
                     <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">
@@ -52,54 +115,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
-                    <div className="mt-8">
-                      <div className="flow-root">
-                        <ul role="list" className="-my-6 divide-y divide-gray-200">
-                          {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">
-                                <img
-                                  src={product.imageSrc}
-                                  alt={product.imageAlt}
-                                  className="h-full w-full object-cover object-center"
-                                />
-                              </div>
-
-                              <div className="ml-4 flex flex-1 flex-col">
-                                <div>
-                                  <div className="flex justify-between text-base font-medium text-gray-900">
-                                    <h3>{product.name}</h3>
-                                    <p className="ml-4">${product.price}</p>
-                                  </div>
-                                </div>
-                                <div className="flex flex-1 items-end justify-between text-sm">
-                                  <p className="text-gray-500">Qty {product.quantity}</p>
-
-                                  <div className="flex">
-                                    <button
-                                      onClick={() => {
-                                        let newCart = cart.filter((p) => {
-                                          if (p.id === product.id) {
-                                            p.quantity -= 1;
-                                          }
-
-                                          return p.quantity > 0;
-                                        });
-                                        updateCart(newCart);
-                                      }}
-                                      type="button"
-                                      className="font-medium text-gray-500 hover:text-black"
-                                    >
-                                      Remove
-                                    </button>
-                                  </div>
-                                </div>
-                              </div>
-                            </li>
-                          ))}
-                        </ul>
-                      </div>
-                    </div>
+                    { getCartSize(cart) > 0 ? 
+                      <CartItemList { ...{ cart, updateCart} } /> :
+                      <EmptyCartDisplay />
+                    }
                   </div>
 
                   <div className="border-t border-gray-200 py-6 px-4 sm:px-6">

diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx
@@ -1,9 +1,6 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
-
-function getCartSize(cart) {
-  return cart.reduce((prev, curr) => prev + curr.quantity, 0);
-}
+import { getCartSize } from "../Utilities";
 
 export default function NavBar({ setOpen, cart }) {
   return (

diff --git a/src/Utilities/index.js b/src/Utilities/index.js
@@ -0,0 +1,3 @@
+export function getCartSize(cart) {
+  return cart.reduce((prev, curr) => prev + curr.quantity, 0);
+}
diff --git a/todo.md b/todo.md
@@ -11,6 +11,9 @@
 - Issue #4 Todos
     - [x] Fix the effect hook to stop infinite loop
 
+- Issue #5 Todos
+    - [x] Implement mockup on cart page (when cart is empty) using flexbox
+
 - Issue #6 Todos
     - [x] Link the cart size to the nav