Persist cart on refresh

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,11 @@ export default function Cart({ open, setOpen, cart, updateCart }) {
                         </button>
                       </div>
                     </div>
-
+                    {cart.length == 0 && 
+                      <div className="flex flex-col justify-center items-center flex-1">
+                      <ShoppingCartIcon className="h-12 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">

src/Components/ProductTable.jsx

@@ -41,7 +41,7 @@ export default function ProductTable({ cart, updateCart }) {
       setProducts(body);
     };
     fetchProducts();
-  });
+  }, []);
 
   return (
     <div className="bg-white">

src/Pages/Home.jsx

@@ -1,11 +1,30 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import Cart from "../Components/Cart";
 import NavBar from "../Components/NavBar";
 import ProductTable from "../Components/ProductTable";
 
 function Home() {
   const [open, setOpen] = useState(false);
-  const [cart, updateCart] = useState([]);
+  const [cart, setCartState] = useState(() => {
+    const localCart = JSON.parse(localStorage.getItem('cart'))
+    return localCart ? localCart : []
+  });
+
+  // Trying to have one location to update the local storage when the cart state changes, but only when items are added or removed.
+  // It doesn't make sense to overwrite the localstorage every time the page is loaded with the logic I have with state, above.
+  // But this implementation isn't much better, since I'm reading from disk twice on first load, and then again every time the cart is updated.
+  // The alternative that I'm aware of is to put it in the onClick actions for adding and removing from the cart, which probably makes more sense at this point in time.
+  // That way, we're only reading/writing to disk as actually necessary, but it does spread the code to do the same thing across multiple components.
+  function updateCart(newCart) {
+    localStorage.setItem('cart', JSON.stringify(newCart))
+    setCartState(newCart)
+  }
+
+  useEffect(() => {
+    if (cart != JSON.parse(localStorage.getItem('cart'))){
+      localStorage.setItem('cart', JSON.stringify(cart))
+    }
+  }, [cart])
 
   return (
     <main>