Cart is persisted when user does refresh

src/Components/Cart.jsx

@@ -1,8 +1,20 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { ShoppingCartIcon, XIcon } from "@heroicons/react/outline";
 import React, { Fragment } from "react";
 
-export default function Cart({ open, setOpen, cart, updateCart }) {
+const currencyFormatter = Intl.NumberFormat("en-US", {
+  style: "currency",
+  currency: "USD",
+});
+
+function calculateSubtotal(cart) {
+  let subtotal = 0;
+  cart.map((item) => (subtotal += item.price * item.quantity));
+  return currencyFormatter.format(subtotal);
+}
+
+export default function Cart({ open, setOpen, cart, updateCartAndLocalStorage }) {
+  let subtotal = calculateSubtotal(cart);
   return (
     <Transition.Root show={open} as={Fragment}>
       <Dialog
@@ -22,7 +34,10 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
+            <Dialog.Overlay
+              onClick={() => setOpen(false)}
+              className="absolute inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
+            />
           </Transition.Child>
 
           <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
@@ -52,6 +67,13 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                       </div>
                     </div>
 
+                    {cart.length === 0 && (
+                      <div className="h-full flex flex-col items-center justify-center">
+                        <ShoppingCartIcon className="w-12" />
+                        <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">
@@ -85,7 +107,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
 
                                           return p.quantity > 0;
                                         });
-                                        updateCart(newCart);
+                                        updateCartAndLocalStorage(newCart);
                                       }}
                                       type="button"
                                       className="font-medium text-gray-500 hover:text-black"
@@ -105,7 +127,7 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                   <div className="border-t border-gray-200 py-6 px-4 sm:px-6">
                     <div className="flex justify-between text-base font-medium text-gray-900">
                       <p>Subtotal</p>
-                      <p>$262.00</p>
+                      <p>{subtotal}</p>
                     </div>
                     <p className="mt-0.5 text-sm text-gray-500">Shipping and taxes calculated at checkout.</p>
                     <div className="mt-6">

src/Components/NavBar.jsx

@@ -1,7 +1,14 @@
 import { ShoppingBagIcon } from "@heroicons/react/outline";
 import React from "react";
 
-export default function NavBar({ setOpen }) {
+function countItemsInCart(cart) {
+  let count = 0;
+  cart.map((item) => (count += item.quantity));
+  return count;
+}
+
+export default function NavBar({ setOpen, cart }) {
+  let itemsInCart = countItemsInCart(cart);
   return (
     <div className="bg-white">
       <header className="relative">
@@ -41,7 +48,9 @@ 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">
+                            {itemsInCart}
+                          </span>
                           <span className="sr-only">items in cart, view bag</span>
                         </button>
                       </div>

src/Components/ProductTable.jsx

@@ -27,7 +27,7 @@ const getDefaultSortOptions = () => {
   ];
 };
 
-export default function ProductTable({ cart, updateCart }) {
+export default function ProductTable({ cart, updateCartAndLocalStorage }) {
   let [products, setProducts] = useState([]);
 
   const [filterOptions, setFilterOptions] = useState(getDefaultFilterOptions());
@@ -38,7 +38,7 @@ export default function ProductTable({ cart, updateCart }) {
     let res = await fetch("http://localhost:3001/products");
     let body = await res.json();
     setProducts(body);
-  });
+  }, []);
 
   return (
     <div className="bg-white">
@@ -72,7 +72,7 @@ export default function ProductTable({ cart, updateCart }) {
                       });
                     }
 
-                    updateCart(newCart);
+                    updateCartAndLocalStorage(newCart);
                   }}
                 >
                   Add To Cart

src/Pages/Home.jsx

@@ -3,15 +3,26 @@ import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
 
+const cartKey = "cart";
+
+function getCart() {
+  return JSON.parse(window.localStorage.getItem(cartKey)) || [];
+}
+
 function Home() {
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [cart, updateCart] = useState(getCart());
+
+  const updateCartAndLocalStorage = (c) => {
+    updateCart(c);
+    window.localStorage.setItem(cartKey, JSON.stringify(c));
+  };
 
   return (
     <main>
-      <NavBar {...{ setOpen }} />
-      <Cart {...{ open, setOpen, cart, updateCart }} />
-      <ProductTable {...{ cart, updateCart }} />
+      <NavBar {...{ setOpen, cart }} />
+      <Cart {...{ open, setOpen, cart, updateCartAndLocalStorage }} />
+      <ProductTable {...{ cart, updateCartAndLocalStorage }} />
     </main>
   );
 }