From 0fc62d125b1a5467d5e3f4a9b1e723f3bb5470b1 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 16 Feb 2023 18:00:47 -0500
Subject: [PATCH 01/28] added carts

---
 client/src/views/Cart.jsx | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 client/src/views/Cart.jsx

diff --git a/client/src/views/Cart.jsx b/client/src/views/Cart.jsx
new file mode 100644
index 000000000..e69de29bb

From cca93e5107e24eb8c2ba0a7911cf68d51256e08f Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sun, 19 Feb 2023 12:43:01 -0500
Subject: [PATCH 02/28] new items can be added

---
 client/src/App.js                       |   2 +
 client/src/components/NavBar/NavBar.jsx |  14 +-
 client/src/components/NavBar/index.jsx  |   2 +
 client/src/index.js                     |  14 +-
 client/src/views/Aboutus.jsx            |   2 +
 client/src/views/BooksPageGenerator.jsx | 143 ++++++++-------
 client/src/views/Browse.jsx             |   7 +
 client/src/views/Cart.jsx               |   0
 client/src/views/Cart/Cart.jsx          |  43 +++++
 client/src/views/Cart/CartItems.jsx     |  28 +++
 client/src/views/Cart/CurrentCart.js    |   3 +
 package-lock.json                       | 226 +++++++++++++++++++++++-
 package.json                            |   4 +
 13 files changed, 409 insertions(+), 79 deletions(-)
 delete mode 100644 client/src/views/Cart.jsx
 create mode 100644 client/src/views/Cart/Cart.jsx
 create mode 100644 client/src/views/Cart/CartItems.jsx
 create mode 100644 client/src/views/Cart/CurrentCart.js

diff --git a/client/src/App.js b/client/src/App.js
index 12fc7874b..d5d83ff79 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,6 +1,8 @@
 import "./App.css";
 import CompleteNavbar from "./components/NavBar";
 import { BrowserRouter, Routes } from "react-router-dom";
+import { CartProvider } from "react-use-cart";
+import Main_Cart from "./views/Cart/Cart";
 
 function App() {
   return (
diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index 9560b40fe..ae5639afd 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
+import { IoMdCart } from "react-icons/io";
 
 const NavBar = ({ user }) => {
   const navigate = useNavigate();
@@ -13,8 +14,6 @@ const NavBar = ({ user }) => {
     }
   };
 
-
-
   return (
     <div>
       <nav class="bg-persian_plum px-4 sm:px-6 py-2.5 dark:bg-gray-900 fixed w-full z-20 top-0 left-0 border-b-4 border-gray-200 dark:border-gray-600">
@@ -27,6 +26,17 @@ const NavBar = ({ user }) => {
             </a>
           </span>
           <div class="flex md:order-2">
+          <IoMdCart
+              onClick={() => navigate("/cart")}
+              className="icon"
+              style={{
+                position: "absolute",
+                top: "10px",
+                right: "20px",
+              }}
+              size="40px"
+              color="white"
+            ></IoMdCart>
             <button class="flex items-center" onClick={loginOrLogout}>
               <span className="text-white text-xl">
                 {user && user.length !== 0 ? "Logout" : "Login"}
diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx
index 56b343814..64beb3cad 100644
--- a/client/src/components/NavBar/index.jsx
+++ b/client/src/components/NavBar/index.jsx
@@ -12,6 +12,7 @@ import Signup from "../../views/Signup";
 import BooksPageGenerator from "../../views/BooksPageGenerator";
 import books from "../../views/Books";
 import ValidatedUsers from "../../views/ValidatedUsers";
+import Main_Cart from "../../views/Cart/Cart";
 
 const CompleteNavbar = () => {
   const user = localStorage.getItem("token");
@@ -32,6 +33,7 @@ const CompleteNavbar = () => {
             <Route path="/contact" element={<ContactUs />} />
             <Route path="/browse" element={<Browse />} />
             <Route path="/create_account" element={<Signup />} />
+            <Route path="/cart" element={<Main_Cart />} />
 
             {/* Admin */}
             <Route path="/users" element={<ValidatedUsers currentUser={user} />} />
diff --git a/client/src/index.js b/client/src/index.js
index d563c0fb1..414fc80cb 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,10 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
+import { CartProvider } from "react-use-cart";
+import Main_Cart from "./views/Cart/Cart";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />
diff --git a/client/src/views/Aboutus.jsx b/client/src/views/Aboutus.jsx
index c7d838aa5..cd234cd6d 100644
--- a/client/src/views/Aboutus.jsx
+++ b/client/src/views/Aboutus.jsx
@@ -3,6 +3,8 @@ import book_dispensary from "../assets/book_dispensary.jpg";
 import { styles } from "../styles";
 
 const Aboutus = () => {
+  var books_cart = JSON.parse(localStorage.getItem("books_cart"));
+  console.log(books_cart);
   return (
     <section>
       <div class="py-4">
diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index 0b5a6d73a..1c1556b27 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -2,11 +2,25 @@ import { React, useState } from "react";
 import ReactStars from "react-stars";
 import Heart from "react-heart";
 import { Grid, Chip, Avatar } from "@mui/material";
-import { Remove, Add } from "@mui/icons-material"
+import { Remove, Add } from "@mui/icons-material";
+import ls from "local-storage";
 
 const BooksPageGenerator = ({ book }) => {
   const [quantity, setQuantity] = useState(0);
 
+  function addItem(book) {
+    
+
+    var books_cart = JSON.parse(localStorage.getItem('books_cart'));
+    if(books_cart == null){
+      books_cart = []
+    }
+
+    books_cart.push(book);
+    localStorage.setItem("books_cart", JSON.stringify(books_cart));
+    console.log(books_cart);
+  }
+
   // Increase Quantity
   function add(quantity) {
     setQuantity(quantity + 1);
@@ -21,71 +35,74 @@ const BooksPageGenerator = ({ book }) => {
   const [active, setActive] = useState(false);
 
   return (
-<Grid container spacing={2}>
-  <Grid item xs={12}>
-    <span class="text-center text-3xl px-16">{book.name} by {book.author}</span>
-  </Grid>
-  <Grid item xs={4} className={`text-right`}>
-    <div class="min-w-[100px] max-w-[190px]">
-      <img src={book.image} alt="" className="row-span-2 border-2" />
-    </div>
-  </Grid>
-  <Grid item xs={8}>
-    <ul className="text-bold text-xl">{book.price}</ul>
-    <ReactStars
-      count={5}
-      value={book.stars}
-      size={24}
-      edit={false}
-      color1={"#000"}
-      color2={"#c2b542"}
-    />
-    <ul>Quantity Available: {book.qty}</ul>
-    <ul className="flex">
-      Add to Wishlist: &nbsp;
-      <span className="py-1">
-        <Heart
-          style={{ width: "20px" }}
-          isActive={active}
-          onClick={() => setActive(!active)}
-          activeColor={"#404252"}
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <span class="text-center text-3xl px-16">
+          {book.name} by {book.author}
+        </span>
+      </Grid>
+      <Grid item xs={4} className={`text-right`}>
+        <div class="min-w-[100px] max-w-[190px]">
+          <img src={book.image} alt="" className="row-span-2 border-2" />
+        </div>
+      </Grid>
+      <Grid item xs={8}>
+        <ul className="text-bold text-xl">{book.price}</ul>
+        <ReactStars
+          count={5}
+          value={book.stars}
+          size={24}
+          edit={false}
+          color1={"#000"}
+          color2={"#c2b542"}
         />
-      </span>
-    </ul>
-    <u>
-      <a href="/">Check availability in stores near you</a>
-    </u>
-    <div className="flex pb-2 pt-2">
-    <Chip 
-      avatar={
-        <Avatar onClick={() => subtract(quantity)}>
-          <Remove />
-        </Avatar>
-      }
-      label={
-        <p className="px-2 text-lg ">{quantity}</p>
-      }
-      clickable
-      onDelete={() => add(quantity)}
-      deleteIcon={<Add />}
-    />
-      <button className="pl-4" onClick={() => setQuantity(0)}>
-        {" "}
-        Clear{" "}
-      </button>
-    </div>
+        <ul>Quantity Available: {book.qty}</ul>
+        <ul className="flex">
+          Add to Wishlist: &nbsp;
+          <span className="py-1">
+            <Heart
+              style={{ width: "20px" }}
+              isActive={active}
+              onClick={() => setActive(!active)}
+              activeColor={"#404252"}
+            />
+          </span>
+        </ul>
+        <u>
+          <a href="/">Check availability in stores near you</a>
+        </u>
+        <div className="flex pb-2 pt-2">
+          <Chip
+            avatar={
+              <Avatar onClick={() => subtract(quantity)}>
+                <Remove />
+              </Avatar>
+            }
+            label={<p className="px-2 text-lg ">{quantity}</p>}
+            clickable
+            onDelete={() => add(quantity)}
+            deleteIcon={<Add />}
+          />
+          <button className="pl-4" onClick={() => setQuantity(0)}>
+            {" "}
+            Clear{" "}
+          </button>
+        </div>
 
-    <div class="flex mb-6">
-      <button class="text-slate-800 font-semibold hover:text-black focus:text-black bg-polished_pine rounded p-3 border-2 mr-3 min-w-[138px] max-w-[150px]">
-        Add to cart
-      </button>
+        <div class="flex mb-6">
+          <button
+            class="text-slate-800 font-semibold hover:text-black focus:text-black bg-polished_pine rounded p-3 border-2 mr-3 min-w-[138px] max-w-[150px]"
+            onClick={() => addItem(book)}
+          >
+            Add to cart
+          </button>
 
-      <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
-        Instant Purchase
-      </button>
-    </div>
-    <ul className="row-span-6" />
-  </Grid>
+          <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
+            Instant Purchase
+          </button>
+        </div>
+        <ul className="row-span-6" />
+      </Grid>
     </Grid>
   );
 };
diff --git a/client/src/views/Browse.jsx b/client/src/views/Browse.jsx
index f5afe7573..fcbadb7b5 100644
--- a/client/src/views/Browse.jsx
+++ b/client/src/views/Browse.jsx
@@ -82,6 +82,13 @@ const sort = (books, selection) => {
 
 const Browse = () => {
   const [value, setValue] = useState("1");
+  const book_instance = localStorage.getItem("Book");
+  console.log("book_instance" + book_instance);
+
+
+
+  console.log()
+
 
   return (
     <section className="sm:max-w-[600px] md:max-w-[900px] lg:max-w-[1150px] xl:max-w-[1200px] max-w-[200px]">
diff --git a/client/src/views/Cart.jsx b/client/src/views/Cart.jsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
new file mode 100644
index 000000000..21465e253
--- /dev/null
+++ b/client/src/views/Cart/Cart.jsx
@@ -0,0 +1,43 @@
+import { CartProvider, useCart } from "react-use-cart";
+import { Button } from "@mui/material";
+
+
+function clear_cart(){
+  localStorage.setItem("books_cart", JSON.stringify([]));
+  window.location.reload(false)
+}
+
+const Main_Cart = () => {
+  var books_cart = JSON.parse(localStorage.getItem("books_cart"));
+  console.log(books_cart);
+  
+
+  return (
+    <div>
+      <div>
+        <Button onClick={() => (clear_cart())}>Clear Cart</Button>
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
+        {books_cart.map((book) => (
+          <div
+            key={book}
+            className="border-2 border-gainsboro hover:border-black"
+          >
+            <a href={`${book.link}`}>
+              <img src={book.image} alt="" className="row-span-2" />
+              <div class="text-lg">{book.name}</div>
+              <div class="felx items-end">by: {book.author}</div>
+              {/*<div class="text-lg">
+              ${wholeNumber(book.price)}.
+              <span className="text-sm">{decimalNumber(book.price)}</span>
+      </div>*/}
+              <div>${book.price}</div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Main_Cart;
diff --git a/client/src/views/Cart/CartItems.jsx b/client/src/views/Cart/CartItems.jsx
new file mode 100644
index 000000000..6d7e5f82e
--- /dev/null
+++ b/client/src/views/Cart/CartItems.jsx
@@ -0,0 +1,28 @@
+import React, { useContext } from 'react'
+
+const CartItems = () => {
+    const { id, productName, price, productImage } = props.data;
+    const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
+  
+    return (
+      <div className="cartItem">
+        <img src={productImage} />
+        <div className="description">
+          <p>
+            <b>{productName}</b>
+          </p>
+          <p> Price: ${price}</p>
+          <div className="countHandler">
+            <button onClick={() => removeFromCart(id)}> - </button>
+            <input
+              value={cartItems[id]}
+              onChange={(e) => updateCartItemCount(Number(e.target.value), id)}
+            />
+            <button onClick={() => addToCart(id)}> + </button>
+          </div>
+        </div>
+      </div>
+    );
+}
+
+export default CartItems
\ No newline at end of file
diff --git a/client/src/views/Cart/CurrentCart.js b/client/src/views/Cart/CurrentCart.js
new file mode 100644
index 000000000..06d52aa4d
--- /dev/null
+++ b/client/src/views/Cart/CurrentCart.js
@@ -0,0 +1,3 @@
+const Items = ["Book1", "Book2"];
+
+export default Items;
diff --git a/package-lock.json b/package-lock.json
index 069bec042..99fe21a07 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,13 @@
       "dependencies": {
         "@emailjs/browser": "^3.9.1",
         "concurrently": "^4.1.2",
+        "local-storage": "^2.0.0",
         "nodemon": "^2.0.20",
         "react-icons": "^4.6.0",
         "react-native-svg": "^13.6.0",
+        "react-redux": "^8.0.5",
+        "react-use-cart": "^1.13.0",
+        "redux": "^4.2.1",
         "tailwind-scrollbar": "^2.1.0"
       },
       "devDependencies": {
@@ -1884,7 +1888,6 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
       "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
-      "peer": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -4675,6 +4678,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "dependencies": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -4707,12 +4719,37 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "node_modules/@types/react": {
+      "version": "18.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "node_modules/@types/yargs": {
       "version": "16.0.4",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
@@ -6036,6 +6073,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "node_modules/date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
@@ -7127,6 +7169,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -11661,6 +11716,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/local-storage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz",
+      "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw=="
+    },
     "node_modules/locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -14267,6 +14327,49 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-redux": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
+      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8 || ^17.0 || ^18.0",
+        "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0",
+        "react-native": ">=0.59",
+        "redux": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-redux/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@@ -14289,6 +14392,17 @@
         "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14379,6 +14493,14 @@
       "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
       "peer": true
     },
+    "node_modules/redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "dependencies": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -14400,8 +14522,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "peer": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -15955,7 +16076,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "peer": true,
       "peerDependencies": {
         "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
       }
@@ -17485,7 +17605,6 @@
       "version": "7.20.6",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
       "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
-      "peer": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -19629,6 +19748,15 @@
         "@types/node": "*"
       }
     },
+    "@types/hoist-non-react-statics": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+      "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+      "requires": {
+        "@types/react": "*",
+        "hoist-non-react-statics": "^3.3.0"
+      }
+    },
     "@types/istanbul-lib-coverage": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz",
@@ -19661,12 +19789,37 @@
       "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.5",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
+      "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
+    },
+    "@types/react": {
+      "version": "18.0.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.28.tgz",
+      "integrity": "sha512-RD0ivG1kEztNBdoAK7lekI9M+azSnitIn85h4iOiaLjaTrMjzslhaqCGaI4IyCJ1RljWiLCEu4jyrLLgqxBTew==",
+      "requires": {
+        "@types/prop-types": "*",
+        "@types/scheduler": "*",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@types/scheduler": {
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
+      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/use-sync-external-store": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
+      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
+    },
     "@types/yargs": {
       "version": "16.0.4",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-16.0.4.tgz",
@@ -20673,6 +20826,11 @@
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
+    "csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+    },
     "date-fns": {
       "version": "1.30.1",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-1.30.1.tgz",
@@ -21499,6 +21657,21 @@
         "source-map": "^0.7.3"
       }
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@@ -24867,6 +25040,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "local-storage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/local-storage/-/local-storage-2.0.0.tgz",
+      "integrity": "sha512-/0sRoeijw7yr/igbVVygDuq6dlYCmtsuTmmpnweVlVtl/s10pf5BCq8LWBxW/AMyFJ3MhMUuggMZiYlx6qr9tw=="
+    },
     "locate-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz",
@@ -26841,6 +27019,26 @@
         "css-tree": "^1.1.3"
       }
     },
+    "react-redux": {
+      "version": "8.0.5",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.5.tgz",
+      "integrity": "sha512-Q2f6fCKxPFpkXt1qNRZdEDLlScsDWyrgSj0mliK59qU6W5gvBiKkdMEG2lJzhd1rCctf0hb6EtePPLZ2e0m1uw==",
+      "requires": {
+        "@babel/runtime": "^7.12.1",
+        "@types/hoist-non-react-statics": "^3.3.1",
+        "@types/use-sync-external-store": "^0.0.3",
+        "hoist-non-react-statics": "^3.3.2",
+        "react-is": "^18.0.0",
+        "use-sync-external-store": "^1.0.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "18.2.0",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+          "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+        }
+      }
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@@ -26857,6 +27055,12 @@
         "react-is": "^16.12.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -26933,6 +27137,14 @@
         }
       }
     },
+    "redux": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
+      "requires": {
+        "@babel/runtime": "^7.9.2"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -26951,8 +27163,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "peer": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -28158,7 +28369,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
       "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
-      "peer": true,
       "requires": {}
     },
     "util-deprecate": {
diff --git a/package.json b/package.json
index 64f3efcc2..027ef7ee5 100644
--- a/package.json
+++ b/package.json
@@ -24,9 +24,13 @@
   "dependencies": {
     "@emailjs/browser": "^3.9.1",
     "concurrently": "^4.1.2",
+    "local-storage": "^2.0.0",
     "nodemon": "^2.0.20",
     "react-icons": "^4.6.0",
     "react-native-svg": "^13.6.0",
+    "react-redux": "^8.0.5",
+    "react-use-cart": "^1.13.0",
+    "redux": "^4.2.1",
     "tailwind-scrollbar": "^2.1.0"
   },
   "homepage": "https://github.com/SCCapstone/BufferOverload#readme",

From d1d986e13abff5c1a1f47c0073bdc79a05b328bf Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Tue, 21 Feb 2023 18:44:53 -0500
Subject: [PATCH 03/28] cart changed

---
 client/src/components/NavBar/NavBar.jsx |  2 +-
 client/src/views/BooksPageGenerator.jsx | 22 ++++++++++++++++++--
 client/src/views/Browse.jsx             |  8 ++++----
 client/src/views/Cart/Cart.jsx          | 27 +++++++++++++++++++++++--
 client/src/views/Login.jsx              |  8 ++++----
 5 files changed, 54 insertions(+), 13 deletions(-)

diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index ae5639afd..546f4fe07 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -36,7 +36,7 @@ const NavBar = ({ user }) => {
               }}
               size="40px"
               color="white"
-            ></IoMdCart>
+            />
             <button class="flex items-center" onClick={loginOrLogout}>
               <span className="text-white text-xl">
                 {user && user.length !== 0 ? "Logout" : "Login"}
diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index 1c1556b27..fb1b03ae6 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -8,7 +8,7 @@ import ls from "local-storage";
 const BooksPageGenerator = ({ book }) => {
   const [quantity, setQuantity] = useState(0);
 
-  function addItem(book) {
+  function addItem(book, quantity = 1) {
     
 
     var books_cart = JSON.parse(localStorage.getItem('books_cart'));
@@ -18,9 +18,27 @@ const BooksPageGenerator = ({ book }) => {
 
     books_cart.push(book);
     localStorage.setItem("books_cart", JSON.stringify(books_cart));
-    console.log(books_cart);
+    // console.log(books_cart);
+
+    var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
+    var bookNames = Object.keys(booksCartNames);
+
+    if(bookNames.includes(book.name) == false) {
+    booksCartNames[book.name] = 0;
+    // console.log(Object.keys(booksCartNames));
+    }
+
+
+    booksCartNames[book.name] = booksCartNames[book.name] + quantity;
+    console.log(booksCartNames);
+    localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+
+
   }
 
+
+
+
   // Increase Quantity
   function add(quantity) {
     setQuantity(quantity + 1);
diff --git a/client/src/views/Browse.jsx b/client/src/views/Browse.jsx
index fcbadb7b5..51fb8b0f6 100644
--- a/client/src/views/Browse.jsx
+++ b/client/src/views/Browse.jsx
@@ -117,14 +117,14 @@ const Browse = () => {
             </svg>
           </div>
           <input
-            className="w-[1100px] py-2 pl-10 border rounded"
+            className="rounded border bg-white py-2 grid max-w-[1158px] px-4 w-[500px] xl:w-[1100px] lg:w-[600px] md:w-[500px] pl-10"
             placeholder="Search Books"
           />
         </p>
       </div>
       <div class="flex pb-2">
         <select
-          className="rounded border bg-white py-2 grid max-w-[1158px] px-4 w-5/6"
+          className="rounded border bg-white py-2 grid max-w-[1158px] px-4 w-[500px] xl:w-[1100px] lg:w-[600px] md:w-[500px]"
           onChange={(e) => setValue(e.target.value)}
         >
           <option selected disabled hidden>
@@ -137,11 +137,11 @@ const Browse = () => {
           <option value="Price: high to low">Price: high to low</option>
         </select>
 
-        <select className="w-1/6 ... bg-white border ">
+        {/* <select className="w-1/6 ... bg-white border ">
           <option selected disabled hidden>
             Genre
           </option>
-        </select>
+        </select> */}
       </div>
 
       <div>
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 21465e253..8cf5c299d 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -4,13 +4,36 @@ import { Button } from "@mui/material";
 
 function clear_cart(){
   localStorage.setItem("books_cart", JSON.stringify([]));
+  localStorage.setItem("booksCartNames", JSON.stringify({}));
   window.location.reload(false)
 }
 
+function addItem(book) {
+  var books_cart = JSON.parse(localStorage.getItem("books_cart"));
+  if (books_cart == null) {
+    books_cart = [];
+  }
+
+  var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
+  if(booksCartNames == null) {
+    booksCartNames = [];
+  }
+  booksCartNames.push(book.name);
+
+  booksCartNames = booksCartNames.reduce(function (prev, cur) {
+    prev[cur] = (prev[cur] || 0) + 1;
+    return prev;
+  }, {});
+
+  books_cart.push(book);
+  localStorage.setItem("books_cart", JSON.stringify(books_cart));
+  localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+  console.log(booksCartNames);
+}
+
 const Main_Cart = () => {
   var books_cart = JSON.parse(localStorage.getItem("books_cart"));
-  console.log(books_cart);
-  
+
 
   return (
     <div>
diff --git a/client/src/views/Login.jsx b/client/src/views/Login.jsx
index e2c529b6f..3aea9271b 100644
--- a/client/src/views/Login.jsx
+++ b/client/src/views/Login.jsx
@@ -45,11 +45,11 @@ const Login = () => {
           </div>
           <form class="justify-center">
             <div class="mb-6">
-              <TextField
+              <input
                 name="email"
                 value={data.email}
-                class="form-control placeholder-black block w-full px-4 py-2 text-xl font-normal text-black bg-camel border border-solid rounded focus:bg-white"
-                label="Enter Email"
+                class="form-control placeholder-black block w-full px-4 py-2 text-xl font-normal text-black bg-camel border border-solid border-black rounded focus:bg-white"
+                placeholder="Enter Email Address"
                 onChange={handleChange}
               />
             </div>
@@ -78,7 +78,7 @@ const Login = () => {
 
             <div class="flex justify-between items-center mb-6 grid grid-cols-2 gap-2">
               <Button
-                href="/create-account"
+                href="/create_account"
                 class="text-slate-800 h-13 font-semibold hover:text-black bg-polished_pine rounded p-3 border-2"
               >
                 Register

From 0a0f9f7a66e560f61805e3afdc023032d92ccd4d Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Tue, 21 Feb 2023 19:20:03 -0500
Subject: [PATCH 04/28] cart tracks the quantity

---
 client/package-lock.json                | 242 ++++++++++++------------
 client/package.json                     |   7 +-
 client/src/views/BooksPageGenerator.jsx |  40 ++--
 client/src/views/Cart/Cart.jsx          |  19 +-
 4 files changed, 158 insertions(+), 150 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 24c91e659..65a52a05e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -8,10 +8,10 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
-        "@emotion/react": "^11.10.5",
-        "@emotion/styled": "^11.10.5",
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
         "@mui/icons-material": "^5.11.0",
-        "@mui/material": "^5.11.6",
+        "@mui/material": "^5.11.10",
         "@mui/styled-engine": "^5.11.0",
         "@mui/styled-engine-sc": "^5.11.0",
         "@testing-library/jest-dom": "^5.16.5",
@@ -28,6 +28,7 @@
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "react-stars": "^2.2.5",
+        "reactjs-popup": "^2.0.5",
         "styled-components": "^5.3.6",
         "sweetalert2": "^11.7.1",
         "web-vitals": "^2.1.4"
@@ -1813,9 +1814,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -2274,12 +2275,11 @@
       }
     },
     "node_modules/@emotion/babel-plugin": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
-      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
       "dependencies": {
         "@babel/helper-module-imports": "^7.16.7",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -2290,9 +2290,6 @@
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
         "stylis": "4.1.3"
-      },
-      "peerDependencies": {
-        "@babel/core": "^7.0.0"
       }
     },
     "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
@@ -2345,12 +2342,12 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "node_modules/@emotion/react": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
-      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/cache": "^11.10.5",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -2359,13 +2356,9 @@
         "hoist-non-react-statics": "^3.3.1"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0",
         "react": ">=16.8.0"
       },
       "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
         "@types/react": {
           "optional": true
         }
@@ -2394,26 +2387,22 @@
       "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
     "node_modules/@emotion/styled": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
-      "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz",
+      "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==",
       "dependencies": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/is-prop-valid": "^1.2.0",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
         "@emotion/utils": "^1.2.0"
       },
       "peerDependencies": {
-        "@babel/core": "^7.0.0",
         "@emotion/react": "^11.0.0-rc.0",
         "react": ">=16.8.0"
       },
       "peerDependenciesMeta": {
-        "@babel/core": {
-          "optional": true
-        },
         "@types/react": {
           "optional": true
         }
@@ -3336,14 +3325,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "node_modules/@mui/base": {
-      "version": "5.0.0-alpha.115",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.115.tgz",
-      "integrity": "sha512-OGQ84whT/yNYd6xKCGGS6MxqEfjVjk5esXM7HP6bB2Rim7QICUapxZt4nm8q39fpT08rNDkv3xPVqDDwRdRg1g==",
+      "version": "5.0.0-alpha.118",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
+      "integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@emotion/is-prop-valid": "^1.2.0",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "@popperjs/core": "^2.11.6",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -3373,9 +3362,9 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.11.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.6.tgz",
-      "integrity": "sha512-lbD3qdafBOf2dlqKhOcVRxaPAujX+9UlPC6v8iMugMeAXe0TCgU3QbGXY3zrJsu6ex64WYDpH4y1+WOOBmWMuA==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.9.tgz",
+      "integrity": "sha512-YGEtucQ/Nl91VZkzYaLad47Cdui51n/hW+OQm4210g4N3/nZzBxmGeKfubEalf+ShKH4aYDS86XTO6q/TpZnjQ==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui"
@@ -3407,16 +3396,16 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "5.11.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.6.tgz",
-      "integrity": "sha512-MzkkL5KC2PCkFiv8cLpkzgLUPXSrAtnvJBR0emV7mLVWbkwV3n5832vjBx154B6R032fHjFTziTh7YEb50nK6Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/base": "5.0.0-alpha.115",
-        "@mui/core-downloads-tracker": "^5.11.6",
-        "@mui/system": "^5.11.5",
+      "version": "5.11.10",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.10.tgz",
+      "integrity": "sha512-hs1WErbiedqlJIZsljgoil908x4NMp8Lfk8di+5c7o809roqKcFTg2+k3z5ucKvs29AXcsdXrDB/kn2K6dGYIw==",
+      "dependencies": {
+        "@babel/runtime": "^7.20.13",
+        "@mui/base": "5.0.0-alpha.118",
+        "@mui/core-downloads-tracker": "^5.11.9",
+        "@mui/system": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "@types/react-transition-group": "^4.4.5",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
@@ -3456,12 +3445,12 @@
       "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
     },
     "node_modules/@mui/private-theming": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.2.tgz",
-      "integrity": "sha512-qZwMaqRFPwlYmqwVKblKBGKtIjJRAj3nsvX93pOmatsXyorW7N/0IPE/swPgz1VwChXhHO75DwBEx8tB+aRMNg==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
+      "integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/utils": "^5.11.2",
+        "@babel/runtime": "^7.20.13",
+        "@mui/utils": "^5.11.9",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -3482,11 +3471,11 @@
       }
     },
     "node_modules/@mui/styled-engine": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
-      "integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
+      "integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
       "dependencies": {
-        "@babel/runtime": "^7.20.6",
+        "@babel/runtime": "^7.20.13",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -3538,15 +3527,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "5.11.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.5.tgz",
-      "integrity": "sha512-KNVsJ0sgRRp2XBqhh4wPS5aacteqjwxgiYTVwVnll2fgkgunZKo3DsDiGMrFlCg25ZHA3Ax58txWGE9w58zp0w==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
+      "integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/private-theming": "^5.11.2",
-        "@mui/styled-engine": "^5.11.0",
+        "@babel/runtime": "^7.20.13",
+        "@mui/private-theming": "^5.11.9",
+        "@mui/styled-engine": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -3590,11 +3579,11 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.2.tgz",
-      "integrity": "sha512-AyizuHHlGdAtH5hOOXBW3kriuIwUIKUIgg0P7LzMvzf6jPhoQbENYqY6zJqfoZ7fAWMNNYT8mgN5EftNGzwE2w==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
+      "integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
       "dependencies": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -26361,6 +26350,18 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/reactjs-popup": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
+      "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -32365,9 +32366,9 @@
       }
     },
     "@babel/runtime": {
-      "version": "7.20.7",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.7.tgz",
-      "integrity": "sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -32643,12 +32644,11 @@
       }
     },
     "@emotion/babel-plugin": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
-      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -32704,12 +32704,12 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "@emotion/react": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
-      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/cache": "^11.10.5",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -32743,12 +32743,12 @@
       "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
     "@emotion/styled": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
-      "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz",
+      "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/is-prop-valid": "^1.2.0",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -33446,14 +33446,14 @@
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
     "@mui/base": {
-      "version": "5.0.0-alpha.115",
-      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.115.tgz",
-      "integrity": "sha512-OGQ84whT/yNYd6xKCGGS6MxqEfjVjk5esXM7HP6bB2Rim7QICUapxZt4nm8q39fpT08rNDkv3xPVqDDwRdRg1g==",
+      "version": "5.0.0-alpha.118",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.118.tgz",
+      "integrity": "sha512-GAEpqhnuHjRaAZLdxFNuOf2GDTp9sUawM46oHZV4VnYPFjXJDkIYFWfIQLONb0nga92OiqS5DD/scGzVKCL0Mw==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@emotion/is-prop-valid": "^1.2.0",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "@popperjs/core": "^2.11.6",
         "clsx": "^1.2.1",
         "prop-types": "^15.8.1",
@@ -33468,9 +33468,9 @@
       }
     },
     "@mui/core-downloads-tracker": {
-      "version": "5.11.6",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.6.tgz",
-      "integrity": "sha512-lbD3qdafBOf2dlqKhOcVRxaPAujX+9UlPC6v8iMugMeAXe0TCgU3QbGXY3zrJsu6ex64WYDpH4y1+WOOBmWMuA=="
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.11.9.tgz",
+      "integrity": "sha512-YGEtucQ/Nl91VZkzYaLad47Cdui51n/hW+OQm4210g4N3/nZzBxmGeKfubEalf+ShKH4aYDS86XTO6q/TpZnjQ=="
     },
     "@mui/icons-material": {
       "version": "5.11.0",
@@ -33481,16 +33481,16 @@
       }
     },
     "@mui/material": {
-      "version": "5.11.6",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.6.tgz",
-      "integrity": "sha512-MzkkL5KC2PCkFiv8cLpkzgLUPXSrAtnvJBR0emV7mLVWbkwV3n5832vjBx154B6R032fHjFTziTh7YEb50nK6Q==",
-      "requires": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/base": "5.0.0-alpha.115",
-        "@mui/core-downloads-tracker": "^5.11.6",
-        "@mui/system": "^5.11.5",
+      "version": "5.11.10",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.11.10.tgz",
+      "integrity": "sha512-hs1WErbiedqlJIZsljgoil908x4NMp8Lfk8di+5c7o809roqKcFTg2+k3z5ucKvs29AXcsdXrDB/kn2K6dGYIw==",
+      "requires": {
+        "@babel/runtime": "^7.20.13",
+        "@mui/base": "5.0.0-alpha.118",
+        "@mui/core-downloads-tracker": "^5.11.9",
+        "@mui/system": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "@types/react-transition-group": "^4.4.5",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
@@ -33507,21 +33507,21 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.2.tgz",
-      "integrity": "sha512-qZwMaqRFPwlYmqwVKblKBGKtIjJRAj3nsvX93pOmatsXyorW7N/0IPE/swPgz1VwChXhHO75DwBEx8tB+aRMNg==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.11.9.tgz",
+      "integrity": "sha512-XMyVIFGomVCmCm92EvYlgq3zrC9K+J6r7IKl/rBJT2/xVYoRY6uM7jeB+Wxh7kXxnW9Dbqsr2yL3cx6wSD1sAg==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/utils": "^5.11.2",
+        "@babel/runtime": "^7.20.13",
+        "@mui/utils": "^5.11.9",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.11.0",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.0.tgz",
-      "integrity": "sha512-AF06K60Zc58qf0f7X+Y/QjaHaZq16znliLnGc9iVrV/+s8Ln/FCoeNuFvhlCbZZQ5WQcJvcy59zp0nXrklGGPQ==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.11.9.tgz",
+      "integrity": "sha512-bkh2CjHKOMy98HyOc8wQXEZvhOmDa/bhxMUekFX5IG0/w4f5HJ8R6+K6nakUUYNEgjOWPYzNPrvGB8EcGbhahQ==",
       "requires": {
-        "@babel/runtime": "^7.20.6",
+        "@babel/runtime": "^7.20.13",
         "@emotion/cache": "^11.10.5",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -33537,15 +33537,15 @@
       }
     },
     "@mui/system": {
-      "version": "5.11.5",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.5.tgz",
-      "integrity": "sha512-KNVsJ0sgRRp2XBqhh4wPS5aacteqjwxgiYTVwVnll2fgkgunZKo3DsDiGMrFlCg25ZHA3Ax58txWGE9w58zp0w==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.11.9.tgz",
+      "integrity": "sha512-h6uarf+l3FO6l75Nf7yO+qDGrIoa1DM9nAMCUFZQsNCDKOInRzcptnm8M1w/Z3gVetfeeGoIGAYuYKbft6KZZA==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
-        "@mui/private-theming": "^5.11.2",
-        "@mui/styled-engine": "^5.11.0",
+        "@babel/runtime": "^7.20.13",
+        "@mui/private-theming": "^5.11.9",
+        "@mui/styled-engine": "^5.11.9",
         "@mui/types": "^7.2.3",
-        "@mui/utils": "^5.11.2",
+        "@mui/utils": "^5.11.9",
         "clsx": "^1.2.1",
         "csstype": "^3.1.1",
         "prop-types": "^15.8.1"
@@ -33558,11 +33558,11 @@
       "requires": {}
     },
     "@mui/utils": {
-      "version": "5.11.2",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.2.tgz",
-      "integrity": "sha512-AyizuHHlGdAtH5hOOXBW3kriuIwUIKUIgg0P7LzMvzf6jPhoQbENYqY6zJqfoZ7fAWMNNYT8mgN5EftNGzwE2w==",
+      "version": "5.11.9",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.11.9.tgz",
+      "integrity": "sha512-eOJaqzcEs4qEwolcvFAmXGpln+uvouvOS9FUX6Wkrte+4I8rZbjODOBDVNlK+V6/ziTfD4iNKC0G+KfOTApbqg==",
       "requires": {
-        "@babel/runtime": "^7.20.7",
+        "@babel/runtime": "^7.20.13",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -50650,6 +50650,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "reactjs-popup": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
+      "integrity": "sha512-b5hv9a6aGsHEHXFAgPO5s1Jw1eSkopueyUVxQewGdLgqk2eW0IVXZrPRpHR629YcgIpC2oxtX8OOZ8a7bQJbxA==",
+      "requires": {}
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/client/package.json b/client/package.json
index 35b27b6e3..74bf01a95 100644
--- a/client/package.json
+++ b/client/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
     "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.6",
+    "@mui/material": "^5.11.10",
     "@mui/styled-engine": "^5.11.0",
     "@mui/styled-engine-sc": "^5.11.0",
     "@testing-library/jest-dom": "^5.16.5",
@@ -23,6 +23,7 @@
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-stars": "^2.2.5",
+    "reactjs-popup": "^2.0.5",
     "styled-components": "^5.3.6",
     "sweetalert2": "^11.7.1",
     "web-vitals": "^2.1.4"
diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index fb1b03ae6..24a890b1b 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -3,42 +3,36 @@ import ReactStars from "react-stars";
 import Heart from "react-heart";
 import { Grid, Chip, Avatar } from "@mui/material";
 import { Remove, Add } from "@mui/icons-material";
-import ls from "local-storage";
+import Popup from "reactjs-popup";
 
 const BooksPageGenerator = ({ book }) => {
-  const [quantity, setQuantity] = useState(0);
+  const [quantity, setQuantity] = useState(1);
 
-  function addItem(book, quantity = 1) {
-    
-
-    var books_cart = JSON.parse(localStorage.getItem('books_cart'));
-    if(books_cart == null){
-      books_cart = []
+  function addItem(book, quantity) {
+    var books_cart = JSON.parse(localStorage.getItem("books_cart"));
+    if (books_cart == null) {
+      books_cart = [];
+    }
+    for (let i = 0; i < quantity; i++) {
+      books_cart.push(book);
     }
 
-    books_cart.push(book);
     localStorage.setItem("books_cart", JSON.stringify(books_cart));
     // console.log(books_cart);
 
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
     var bookNames = Object.keys(booksCartNames);
 
-    if(bookNames.includes(book.name) == false) {
-    booksCartNames[book.name] = 0;
-    // console.log(Object.keys(booksCartNames));
+    if (bookNames.includes(book.name) == false) {
+      booksCartNames[book.name] = 0;
+      // console.log(Object.keys(booksCartNames));
     }
 
-
     booksCartNames[book.name] = booksCartNames[book.name] + quantity;
-    console.log(booksCartNames);
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
-
-
+    console.log(booksCartNames);
   }
 
-
-
-
   // Increase Quantity
   function add(quantity) {
     setQuantity(quantity + 1);
@@ -109,15 +103,15 @@ const BooksPageGenerator = ({ book }) => {
 
         <div class="flex mb-6">
           <button
-            class="text-slate-800 font-semibold hover:text-black focus:text-black bg-polished_pine rounded p-3 border-2 mr-3 min-w-[138px] max-w-[150px]"
-            onClick={() => addItem(book)}
+            class="text-slate-800 font-semibold hover:text-black focus:text-black active:bg-green focus:bg-green bg-polished_pine rounded p-3 border-2 mr-3 min-w-[138px] max-w-[150px]"
+            onClick={() => addItem(book, quantity)}
           >
             Add to cart
           </button>
 
-          <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
+          {/* <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
             Instant Purchase
-          </button>
+          </button> */}
         </div>
         <ul className="row-span-6" />
       </Grid>
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 8cf5c299d..c6de21f05 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -1,11 +1,10 @@
 import { CartProvider, useCart } from "react-use-cart";
 import { Button } from "@mui/material";
 
-
-function clear_cart(){
+function clear_cart() {
   localStorage.setItem("books_cart", JSON.stringify([]));
   localStorage.setItem("booksCartNames", JSON.stringify({}));
-  window.location.reload(false)
+  window.location.reload(false);
 }
 
 function addItem(book) {
@@ -15,7 +14,7 @@ function addItem(book) {
   }
 
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
-  if(booksCartNames == null) {
+  if (booksCartNames == null) {
     booksCartNames = [];
   }
   booksCartNames.push(book.name);
@@ -33,12 +32,14 @@ function addItem(book) {
 
 const Main_Cart = () => {
   var books_cart = JSON.parse(localStorage.getItem("books_cart"));
+  var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
+  var bookNames = Object.keys(booksCartNames);
 
-
+  console.log(booksCartNames);
   return (
     <div>
       <div>
-        <Button onClick={() => (clear_cart())}>Clear Cart</Button>
+        <Button onClick={() => clear_cart()}>Clear Cart</Button>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
         {books_cart.map((book) => (
@@ -59,6 +60,12 @@ const Main_Cart = () => {
           </div>
         ))}
       </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
+        {Object.keys(booksCartNames).map((bookName) => (
+          <div>{bookName}</div>
+        ))}
+      </div>
     </div>
   );
 };

From 8b65738a741cdd40e30d8d0de94a11cd734f313f Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Tue, 21 Feb 2023 19:36:46 -0500
Subject: [PATCH 05/28] cart contains items

---
 client/src/views/BooksPageGenerator.jsx |  2 +-
 client/src/views/Cart/Cart.jsx          | 58 +++++++++++++++----------
 2 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index 24a890b1b..dae4be659 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -33,7 +33,7 @@ const BooksPageGenerator = ({ book }) => {
     console.log(booksCartNames);
   }
 
-  // Increase Quantity
+
   function add(quantity) {
     setQuantity(quantity + 1);
   }
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index c6de21f05..86bf6d0e8 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -1,5 +1,7 @@
 import { CartProvider, useCart } from "react-use-cart";
+import { Grid, Chip, Avatar } from "@mui/material";
 import { Button } from "@mui/material";
+import books from "../Books";
 
 function clear_cart() {
   localStorage.setItem("books_cart", JSON.stringify([]));
@@ -30,40 +32,50 @@ function addItem(book) {
   console.log(booksCartNames);
 }
 
+function getBook(books, bookName) {
+  for (let i = 0; i < books.length; ++i) {
+    if (books[i].name == bookName) {
+      console.log(books[i]);
+      return books[i];
+    }
+  }
+}
+
 const Main_Cart = () => {
   var books_cart = JSON.parse(localStorage.getItem("books_cart"));
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
   var bookNames = Object.keys(booksCartNames);
 
-  console.log(booksCartNames);
+  console.log(books_cart);
   return (
     <div>
       <div>
         <Button onClick={() => clear_cart()}>Clear Cart</Button>
       </div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
-        {books_cart.map((book) => (
-          <div
-            key={book}
-            className="border-2 border-gainsboro hover:border-black"
-          >
-            <a href={`${book.link}`}>
-              <img src={book.image} alt="" className="row-span-2" />
-              <div class="text-lg">{book.name}</div>
-              <div class="felx items-end">by: {book.author}</div>
-              {/*<div class="text-lg">
-              ${wholeNumber(book.price)}.
-              <span className="text-sm">{decimalNumber(book.price)}</span>
-      </div>*/}
-              <div>${book.price}</div>
-            </a>
-          </div>
-        ))}
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
+      <div className="grid grid-cols-1 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
         {Object.keys(booksCartNames).map((bookName) => (
-          <div>{bookName}</div>
+          <div>
+
+            <Grid container spacing={2}>
+              <Grid item xs={12}>
+                <span class="text-center text-2xl px-16">
+                  {getBook(books, bookName).name} by{" "}
+                  {getBook(books, bookName).author}
+                </span>
+              </Grid>
+              <Grid item xs={4} className={`text-right`}>
+                <div class="min-w-[100px] max-w-[190px]">
+                  <img
+                    src={getBook(books, bookName).image}
+                    alt=""
+                    className="row-span-2 border-2"
+                  />
+                </div>
+              </Grid>
+
+              <ul className="row-span-6" />
+            </Grid>
+          </div>
         ))}
       </div>
     </div>

From dd27e17298c5308db07fff354fc959d402367110 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Tue, 21 Feb 2023 20:12:03 -0500
Subject: [PATCH 06/28] update

---
 client/src/views/Cart/Cart.jsx | 46 ++++++++++++++++++++--------------
 client/src/views/Home.jsx      |  2 +-
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 86bf6d0e8..2f375dd73 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -52,29 +52,37 @@ const Main_Cart = () => {
       <div>
         <Button onClick={() => clear_cart()}>Clear Cart</Button>
       </div>
-      <div className="grid grid-cols-1 grid-flow-row gap-2 sm:max-w-[700px] min-w-[1100px] max-w-[1150px]">
+      <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         {Object.keys(booksCartNames).map((bookName) => (
+          
+          // <div>
+          //   <div class="grid grid-cols-2 gap-2 p-5 bg-black">
+          //       <Grid item xs={4} className={`object-right w-2/4 bg-green`}>
+          //         <div class="min-w-[100px] max-w-[190px]">
+          //           <img
+          //             src={getBook(books, bookName).image}
+          //             alt=""
+          //             className="row-span-2 border-2 justify-right"
+          //           />
+          //         </div>
+          //       </Grid>
+          //     <div class="bg-red text-green-500 text-lg font-bold text-center rounded-lg w-fit mr-12">
+          //       <Grid item xs={12}>
+          //         <span class="text-center text-2xl px-16 ">
+          //           {getBook(books, bookName).name} by{" "}
+          //           {getBook(books, bookName).author}
+          //         </span>
+          //       </Grid>
+          //     </div>
+          //   </div>
+
+          //   <Grid container spacing={2}>
+          //     <ul className="row-span-6" />
+          //   </Grid>
+          // </div>
           <div>
 
-            <Grid container spacing={2}>
-              <Grid item xs={12}>
-                <span class="text-center text-2xl px-16">
-                  {getBook(books, bookName).name} by{" "}
-                  {getBook(books, bookName).author}
-                </span>
-              </Grid>
-              <Grid item xs={4} className={`text-right`}>
-                <div class="min-w-[100px] max-w-[190px]">
-                  <img
-                    src={getBook(books, bookName).image}
-                    alt=""
-                    className="row-span-2 border-2"
-                  />
-                </div>
-              </Grid>
 
-              <ul className="row-span-6" />
-            </Grid>
           </div>
         ))}
       </div>
diff --git a/client/src/views/Home.jsx b/client/src/views/Home.jsx
index 7c63006b5..e46449602 100644
--- a/client/src/views/Home.jsx
+++ b/client/src/views/Home.jsx
@@ -6,7 +6,7 @@ const Home = () => {
   return (
     <section class="">
       <div class="py-4">
-        <div class="grid bg-polished_pine text-center text-white border-black border-2 text-3xl rounded py-3 max-w-[1300px]">
+        <div class="grid bg-polished_pine text-center text-white border-black border-2 text-3xl rounded py-3 max-w-[1400px]">
           Welcome
         </div>
       </div>

From d7410845083b15980fea969d783b61a7d0b18fb6 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Tue, 21 Feb 2023 23:59:59 -0500
Subject: [PATCH 07/28] cart contains the items with their corresponding data

---
 client/src/views/Cart/Cart.jsx | 85 ++++++++++++++++++++++------------
 1 file changed, 55 insertions(+), 30 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 2f375dd73..71e877e19 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -53,38 +53,63 @@ const Main_Cart = () => {
         <Button onClick={() => clear_cart()}>Clear Cart</Button>
       </div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
-        {Object.keys(booksCartNames).map((bookName) => (
-          
-          // <div>
-          //   <div class="grid grid-cols-2 gap-2 p-5 bg-black">
-          //       <Grid item xs={4} className={`object-right w-2/4 bg-green`}>
-          //         <div class="min-w-[100px] max-w-[190px]">
-          //           <img
-          //             src={getBook(books, bookName).image}
-          //             alt=""
-          //             className="row-span-2 border-2 justify-right"
-          //           />
-          //         </div>
-          //       </Grid>
-          //     <div class="bg-red text-green-500 text-lg font-bold text-center rounded-lg w-fit mr-12">
-          //       <Grid item xs={12}>
-          //         <span class="text-center text-2xl px-16 ">
-          //           {getBook(books, bookName).name} by{" "}
-          //           {getBook(books, bookName).author}
-          //         </span>
-          //       </Grid>
-          //     </div>
-          //   </div>
-
-          //   <Grid container spacing={2}>
-          //     <ul className="row-span-6" />
-          //   </Grid>
-          // </div>
-          <div>
-
+        {/* {Object.keys(booksCartNames).map((bookName) => ( */}
+          {/* <div>
+            <div class="grid grid-cols-2 gap-2 p-5 bg-black">
+                <Grid item xs={4} className={`object-right w-2/4 bg-green`}>
+                  <div class="min-w-[100px] max-w-[190px]">
+                    <img
+                      src={getBook(books, bookName).image}
+                      alt=""
+                      className="row-span-2 border-2 justify-right"
+                    />
+                  </div>
+                </Grid>
+              <div class="bg-red text-green-500 text-lg font-bold text-center rounded-lg w-fit mr-12">
+                <Grid item xs={12}>
+                  <span class="text-center text-2xl px-16 ">
+                    {getBook(books, bookName).name} by{" "}
+                    {getBook(books, bookName).author}
+                  </span>
+                </Grid>
+              </div>
+            </div>
 
+            <Grid container spacing={2}>
+              <ul className="row-span-6" />
+            </Grid>
+          </div> */}
+          <div
+            className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
+          >
+            {Object.keys(booksCartNames).map((bookName) => (
+              <div
+                className={`flex-1 flex justify-start items-center flex-row m-3`}
+              >
+                <div class="min-w-[80px] max-w-[120px]">
+                  <img
+                    src={getBook(books, bookName).image}
+                    alt=""
+                    className="row-span-2 border-2 justify-right"
+                  />
+                </div>
+                <div>
+                  <h3 className="font-poppins font-bold xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
+                    {getBook(books, bookName).name} by{" "}
+                    {getBook(books, bookName).author}
+                  </h3>
+                  <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
+                    Price: ${getBook(books, bookName).price}
+                  </h3>
+                  <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
+                    Quantity: {booksCartNames[bookName]}
+                  </h3>
+                </div>
+              </div>
+            ))}
           </div>
-        ))}
+          
+        {/* ))} */}
       </div>
     </div>
   );

From 88eeac55f036c8e9a04b442552e7df4ac248e5ca Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 00:24:16 -0500
Subject: [PATCH 08/28] price for the cart added

---
 client/src/views/Cart/Cart.jsx | 125 ++++++++++++++++++++++++---------
 1 file changed, 92 insertions(+), 33 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 71e877e19..2f8d57d07 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -1,4 +1,6 @@
 import { CartProvider, useCart } from "react-use-cart";
+import { React, useState } from "react";
+import { Remove, Add } from "@mui/icons-material";
 import { Grid, Chip, Avatar } from "@mui/material";
 import { Button } from "@mui/material";
 import books from "../Books";
@@ -35,18 +37,49 @@ function addItem(book) {
 function getBook(books, bookName) {
   for (let i = 0; i < books.length; ++i) {
     if (books[i].name == bookName) {
-      console.log(books[i]);
       return books[i];
     }
   }
 }
 
+function round(value, decimals) {
+  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
+}
+
+function calculatePrice(books, booksCartNames) {
+  let finalPrice = 0;
+  var bookNames = Object.keys(booksCartNames);
+  console.log(bookNames.length)
+  for (let i = 0; i < bookNames.length; ++i) {
+    finalPrice = finalPrice + booksCartNames[bookNames[i]]*(getBook(books, bookNames[i]).price) ;
+    // console.log(booksCartNames[bookNames[i]]);
+  }
+  // console.log(finalPrice);
+
+  return round(finalPrice,2);
+}
+
+
+
+
 const Main_Cart = () => {
   var books_cart = JSON.parse(localStorage.getItem("books_cart"));
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
   var bookNames = Object.keys(booksCartNames);
+  const bookQuantities = Object.values(booksCartNames)
 
-  console.log(books_cart);
+  const [quantity, setQuantity] = useState(bookQuantities);
+  function add(quantity) {
+    setQuantity(quantity + 1);
+  }
+  
+  function subtract(quantity) {
+    if (quantity > 0) {
+      setQuantity(quantity - 1);
+    }
+  }
+
+  // console.log(books_cart);
   return (
     <div>
       <div>
@@ -54,7 +87,7 @@ const Main_Cart = () => {
       </div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         {/* {Object.keys(booksCartNames).map((bookName) => ( */}
-          {/* <div>
+        {/* <div>
             <div class="grid grid-cols-2 gap-2 p-5 bg-black">
                 <Grid item xs={4} className={`object-right w-2/4 bg-green`}>
                   <div class="min-w-[100px] max-w-[190px]">
@@ -79,37 +112,63 @@ const Main_Cart = () => {
               <ul className="row-span-6" />
             </Grid>
           </div> */}
-          <div
-            className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
-          >
-            {Object.keys(booksCartNames).map((bookName) => (
-              <div
-                className={`flex-1 flex justify-start items-center flex-row m-3`}
-              >
-                <div class="min-w-[80px] max-w-[120px]">
-                  <img
-                    src={getBook(books, bookName).image}
-                    alt=""
-                    className="row-span-2 border-2 justify-right"
-                  />
-                </div>
-                <div>
-                  <h3 className="font-poppins font-bold xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
-                    {getBook(books, bookName).name} by{" "}
-                    {getBook(books, bookName).author}
-                  </h3>
-                  <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
-                    Price: ${getBook(books, bookName).price}
-                  </h3>
-                  <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px]  ml-3">
-                    Quantity: {booksCartNames[bookName]}
-                  </h3>
-                </div>
+        <div
+          className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
+        >
+          {Object.keys(booksCartNames).map((bookName) => (
+            <div
+              className={`flex-1 flex justify-start items-center flex-row m-3`}
+            >
+              <div class="min-w-[80px] max-w-[120px]">
+                <img
+                  src={getBook(books, bookName).image}
+                  alt=""
+                  className="row-span-2 border-2 justify-right"
+                />
+              </div>
+              <div>
+                <h3 className="font-poppins font-bold xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
+                  {getBook(books, bookName).name} by{" "}
+                  {getBook(books, bookName).author}
+                </h3>
+                <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
+                  Price: ${getBook(books, bookName).price}
+                </h3>
+                <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
+                  Quantity: {booksCartNames[bookName]}
+                  <div className="flex pb-2 pt-2">
+          <Chip
+            avatar={
+              <Avatar onClick={() => subtract(quantity)}>
+                <Remove />
+              </Avatar>
+            }
+            label={<p className="px-2 text-lg ">{quantity}</p>}
+            clickable
+            onDelete={() => add(quantity)}
+            deleteIcon={<Add />}
+          />
+          <button className="pl-4" onClick={() => setQuantity(0)}>
+            {" "}
+            Clear{" "}
+          </button>
+        </div>
+                </h3>
               </div>
-            ))}
-          </div>
-          
-        {/* ))} */}
+            </div>
+          ))}
+        </div>
+
+        <div
+          className={`flex-1 flex justify-start items-center flex-row m-3 bg-camel py-4 px-4 rounded`}
+        >
+          <h4 className="font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
+            Total: ${calculatePrice(books, booksCartNames)}
+          </h4>
+          <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
+          </p>
+        </div>
+
       </div>
     </div>
   );

From 288cd6264978ec6ca12be50eceae00a4270350ee Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 00:56:59 -0500
Subject: [PATCH 09/28] price calculator for the cart page added

---
 client/src/views/Cart/Cart.jsx | 89 +++++++++++++++++++---------------
 1 file changed, 51 insertions(+), 38 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 2f8d57d07..39a930a1f 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -43,42 +43,50 @@ function getBook(books, bookName) {
 }
 
 function round(value, decimals) {
-  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
+  return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
 }
 
 function calculatePrice(books, booksCartNames) {
   let finalPrice = 0;
   var bookNames = Object.keys(booksCartNames);
-  console.log(bookNames.length)
   for (let i = 0; i < bookNames.length; ++i) {
-    finalPrice = finalPrice + booksCartNames[bookNames[i]]*(getBook(books, bookNames[i]).price) ;
-    // console.log(booksCartNames[bookNames[i]]);
+    finalPrice =
+      finalPrice +
+      booksCartNames[bookNames[i]] * getBook(books, bookNames[i]).price;
   }
-  // console.log(finalPrice);
 
-  return round(finalPrice,2);
+  return round(finalPrice, 2);
 }
 
-
-
-
 const Main_Cart = () => {
-  var books_cart = JSON.parse(localStorage.getItem("books_cart"));
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
-  var bookNames = Object.keys(booksCartNames);
-  const bookQuantities = Object.values(booksCartNames)
 
-  const [quantity, setQuantity] = useState(bookQuantities);
-  function add(quantity) {
-    setQuantity(quantity + 1);
+  const [quantity, setQuantity] = useState(booksCartNames);
+  function add(booksCartNames, bookName) {
+    console.log("adding");
+    booksCartNames[bookName] = booksCartNames[bookName] + 1;
+    setQuantity(booksCartNames);
+    localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+    // window.location.reload();
   }
-  
-  function subtract(quantity) {
-    if (quantity > 0) {
-      setQuantity(quantity - 1);
+
+  function subtract(booksCartNames, bookName) {
+    console.log("subing");
+    if (quantity[bookName] > 0) {
+      booksCartNames[bookName] = booksCartNames[bookName] - 1;
+      setQuantity(booksCartNames);
+      localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+      // window.location.reload();
     }
   }
 
+  function setZero(booksCartNames, bookName) {
+    booksCartNames[bookName] = 0;
+    setQuantity(booksCartNames);
+    localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+    window.location.reload();
+  }
+
   // console.log(books_cart);
   return (
     <div>
@@ -137,22 +145,29 @@ const Main_Cart = () => {
                 <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
                   Quantity: {booksCartNames[bookName]}
                   <div className="flex pb-2 pt-2">
-          <Chip
-            avatar={
-              <Avatar onClick={() => subtract(quantity)}>
-                <Remove />
-              </Avatar>
-            }
-            label={<p className="px-2 text-lg ">{quantity}</p>}
-            clickable
-            onDelete={() => add(quantity)}
-            deleteIcon={<Add />}
-          />
-          <button className="pl-4" onClick={() => setQuantity(0)}>
-            {" "}
-            Clear{" "}
-          </button>
-        </div>
+                    <Chip
+                      avatar={
+                        <Avatar
+                          onClick={() => subtract(booksCartNames, bookName)}
+                        >
+                          <Remove />
+                        </Avatar>
+                      }
+                      label={
+                        <p className="px-2 text-lg ">{quantity[bookName]}</p>
+                      }
+                      clickable
+                      onDelete={() => add(booksCartNames, bookName)}
+                      deleteIcon={<Add />}
+                    />
+                    <button
+                      className="pl-4"
+                      onClick={() => setZero(booksCartNames, bookName)}
+                    >
+                      {" "}
+                      Clear{" "}
+                    </button>
+                  </div>
                 </h3>
               </div>
             </div>
@@ -165,10 +180,8 @@ const Main_Cart = () => {
           <h4 className="font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
             Total: ${calculatePrice(books, booksCartNames)}
           </h4>
-          <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
-          </p>
+          <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3"></p>
         </div>
-
       </div>
     </div>
   );

From 81afcee02b08ffb0cac14cd680d9238108219787 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 17:53:56 -0500
Subject: [PATCH 10/28] checkout button added

---
 client/package-lock.json               | 18 ++++++++++++++++++
 client/package.json                    |  1 +
 client/src/components/NavBar/index.jsx |  4 ++--
 client/src/views/Cart/Cart.jsx         | 24 +++++++++++++++++++++---
 4 files changed, 42 insertions(+), 5 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 65a52a05e..ccf5c69e0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -28,6 +28,7 @@
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "react-stars": "^2.2.5",
+        "react-use-cart": "^1.13.0",
         "reactjs-popup": "^2.0.5",
         "styled-components": "^5.3.6",
         "sweetalert2": "^11.7.1",
@@ -26350,6 +26351,17 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
@@ -50650,6 +50662,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "requires": {}
+    },
     "reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
diff --git a/client/package.json b/client/package.json
index 74bf01a95..a52bf6285 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-stars": "^2.2.5",
+    "react-use-cart": "^1.13.0",
     "reactjs-popup": "^2.0.5",
     "styled-components": "^5.3.6",
     "sweetalert2": "^11.7.1",
diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx
index 64beb3cad..d4ecd7727 100644
--- a/client/src/components/NavBar/index.jsx
+++ b/client/src/components/NavBar/index.jsx
@@ -12,7 +12,7 @@ import Signup from "../../views/Signup";
 import BooksPageGenerator from "../../views/BooksPageGenerator";
 import books from "../../views/Books";
 import ValidatedUsers from "../../views/ValidatedUsers";
-import Main_Cart from "../../views/Cart/Cart";
+import MainCart from "../../views/Cart/Cart";
 
 const CompleteNavbar = () => {
   const user = localStorage.getItem("token");
@@ -33,7 +33,7 @@ const CompleteNavbar = () => {
             <Route path="/contact" element={<ContactUs />} />
             <Route path="/browse" element={<Browse />} />
             <Route path="/create_account" element={<Signup />} />
-            <Route path="/cart" element={<Main_Cart />} />
+            <Route path="/cart" element={<MainCart currentUser={user} />} />
 
             {/* Admin */}
             <Route path="/users" element={<ValidatedUsers currentUser={user} />} />
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 39a930a1f..8f84b5548 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -4,6 +4,7 @@ import { Remove, Add } from "@mui/icons-material";
 import { Grid, Chip, Avatar } from "@mui/material";
 import { Button } from "@mui/material";
 import books from "../Books";
+import { useNavigate } from "react-router-dom";
 
 function clear_cart() {
   localStorage.setItem("books_cart", JSON.stringify([]));
@@ -58,7 +59,20 @@ function calculatePrice(books, booksCartNames) {
   return round(finalPrice, 2);
 }
 
-const Main_Cart = () => {
+const MainCart = ({ currentUser }) => {
+  const navigate = useNavigate();
+
+  var puchaseBooks = (currentUser) => {
+    if (currentUser && currentUser.length !== 0) {
+      // localStorage.removeItem("token");
+      localStorage.setItem("books_cart", JSON.stringify([]));
+      localStorage.setItem("booksCartNames", JSON.stringify({}));
+      window.location.reload();
+    } else {
+      navigate("/login");
+    }
+  };
+
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
 
   const [quantity, setQuantity] = useState(booksCartNames);
@@ -175,16 +189,20 @@ const Main_Cart = () => {
         </div>
 
         <div
-          className={`flex-1 flex justify-start items-center flex-row m-3 bg-camel py-4 px-4 rounded`}
+          className={`flex-1 flex justify-start items-center flex-row m-3 bg-camel py-4 px-4 rounded min-w-[500px] max-w-[600px] gap-16`}
         >
           <h4 className="font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
             Total: ${calculatePrice(books, booksCartNames)}
           </h4>
           <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3"></p>
+          <button class="bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-16"
+          onClick={()=>{puchaseBooks(currentUser)}}>
+            Check out
+          </button>
         </div>
       </div>
     </div>
   );
 };
 
-export default Main_Cart;
+export default MainCart;

From 8d6f56923904be790f9102e138495fe3e8283d3c Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 18:29:24 -0500
Subject: [PATCH 11/28] changes to the cart for the backend integration

---
 client/src/views/BooksPageGenerator.jsx | 17 +++++++++++++++--
 client/src/views/Cart/Cart.jsx          | 23 ++++++++++++++++++-----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index dae4be659..d4a982120 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -5,6 +5,19 @@ import { Grid, Chip, Avatar } from "@mui/material";
 import { Remove, Add } from "@mui/icons-material";
 import Popup from "reactjs-popup";
 
+
+function getKeys(obj) {
+  var keys = [];
+  iterate(obj, function (oVal, oKey) { keys.push(oKey) });
+  return keys;
+}
+function iterate(iterable, callback) {
+  for (var key in iterable) {
+    if (key === 'length' || key === 'prototype' || !Object.prototype.hasOwnProperty.call(iterable, key)) continue;
+    callback(iterable[key], key, iterable);
+  }
+}
+
 const BooksPageGenerator = ({ book }) => {
   const [quantity, setQuantity] = useState(1);
 
@@ -21,7 +34,7 @@ const BooksPageGenerator = ({ book }) => {
     // console.log(books_cart);
 
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
-    var bookNames = Object.keys(booksCartNames);
+    var bookNames = getKeys(booksCartNames);
 
     if (bookNames.includes(book.name) == false) {
       booksCartNames[book.name] = 0;
@@ -107,7 +120,7 @@ const BooksPageGenerator = ({ book }) => {
             onClick={() => addItem(book, quantity)}
           >
             Add to cart
-          </button>
+          </button> 
 
           {/* <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
             Instant Purchase
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 8f84b5548..540b21b04 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -47,13 +47,25 @@ function round(value, decimals) {
   return Number(Math.round(value + "e" + decimals) + "e-" + decimals);
 }
 
+function getKeys(obj) {
+  var keys = [];
+  iterate(obj, function (oVal, oKey) { keys.push(oKey) });
+  return keys;
+}
+function iterate(iterable, callback) {
+  for (var key in iterable) {
+    if (key === 'length' || key === 'prototype' || !Object.prototype.hasOwnProperty.call(iterable, key)) continue;
+    callback(iterable[key], key, iterable);
+  }
+}
+
 function calculatePrice(books, booksCartNames) {
   let finalPrice = 0;
-  var bookNames = Object.keys(booksCartNames);
+  var bookNames = getKeys(booksCartNames);
   for (let i = 0; i < bookNames.length; ++i) {
     finalPrice =
-      finalPrice +
-      booksCartNames[bookNames[i]] * getBook(books, bookNames[i]).price;
+      finalPrice 
+      + booksCartNames[bookNames[i]] * getBook(books, bookNames[i]).price;
   }
 
   return round(finalPrice, 2);
@@ -106,6 +118,7 @@ const MainCart = ({ currentUser }) => {
     <div>
       <div>
         <Button onClick={() => clear_cart()}>Clear Cart</Button>
+
       </div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         {/* {Object.keys(booksCartNames).map((bookName) => ( */}
@@ -137,7 +150,7 @@ const MainCart = ({ currentUser }) => {
         <div
           className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
         >
-          {Object.keys(booksCartNames).map((bookName) => (
+          {getKeys(booksCartNames).map((bookName) => (
             <div
               className={`flex-1 flex justify-start items-center flex-row m-3`}
             >
@@ -195,7 +208,7 @@ const MainCart = ({ currentUser }) => {
             Total: ${calculatePrice(books, booksCartNames)}
           </h4>
           <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3"></p>
-          <button class="bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-16"
+          <button class="bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-1"
           onClick={()=>{puchaseBooks(currentUser)}}>
             Check out
           </button>

From ac44d20f9e94726269677649ffcddb309dfc3e09 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 19:09:49 -0500
Subject: [PATCH 12/28] default values in the cart

---
 client/src/views/BooksPageGenerator.jsx | 2 +-
 client/src/views/Cart/Cart.jsx          | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index d4a982120..0a1a27542 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -36,7 +36,7 @@ const BooksPageGenerator = ({ book }) => {
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
     var bookNames = getKeys(booksCartNames);
 
-    if (bookNames.includes(book.name) == false) {
+    if (bookNames.includes(book.name) === false) {
       booksCartNames[book.name] = 0;
       // console.log(Object.keys(booksCartNames));
     }
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 540b21b04..0c5605920 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -85,7 +85,10 @@ const MainCart = ({ currentUser }) => {
     }
   };
 
-  var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
+  var booksCartNames = {
+    "Steve Jobs": 22,
+    "Go-To-Dinners": 13
+};//JSON.parse(localStorage.getItem("booksCartNames"));
 
   const [quantity, setQuantity] = useState(booksCartNames);
   function add(booksCartNames, bookName) {

From a44c2c93a99ad928df7ed645fb6186b5b216bb2e Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Wed, 22 Feb 2023 22:57:38 -0500
Subject: [PATCH 13/28] cart has added checkout feature for the backend

---
 client/src/views/Cart/Cart.jsx | 42 +++++++++++++++++++++-------------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 0c5605920..ef3686fec 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -49,12 +49,19 @@ function round(value, decimals) {
 
 function getKeys(obj) {
   var keys = [];
-  iterate(obj, function (oVal, oKey) { keys.push(oKey) });
+  iterate(obj, function (oVal, oKey) {
+    keys.push(oKey);
+  });
   return keys;
 }
 function iterate(iterable, callback) {
   for (var key in iterable) {
-    if (key === 'length' || key === 'prototype' || !Object.prototype.hasOwnProperty.call(iterable, key)) continue;
+    if (
+      key === "length" ||
+      key === "prototype" ||
+      !Object.prototype.hasOwnProperty.call(iterable, key)
+    )
+      continue;
     callback(iterable[key], key, iterable);
   }
 }
@@ -64,8 +71,8 @@ function calculatePrice(books, booksCartNames) {
   var bookNames = getKeys(booksCartNames);
   for (let i = 0; i < bookNames.length; ++i) {
     finalPrice =
-      finalPrice 
-      + booksCartNames[bookNames[i]] * getBook(books, bookNames[i]).price;
+      finalPrice +
+      booksCartNames[bookNames[i]] * getBook(books, bookNames[i]).price;
   }
 
   return round(finalPrice, 2);
@@ -73,6 +80,7 @@ function calculatePrice(books, booksCartNames) {
 
 const MainCart = ({ currentUser }) => {
   const navigate = useNavigate();
+  var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
 
   var puchaseBooks = (currentUser) => {
     if (currentUser && currentUser.length !== 0) {
@@ -85,10 +93,10 @@ const MainCart = ({ currentUser }) => {
     }
   };
 
-  var booksCartNames = {
-    "Steve Jobs": 22,
-    "Go-To-Dinners": 13
-};//JSON.parse(localStorage.getItem("booksCartNames"));
+  //   {
+  //     "Steve Jobs": 22,
+  //     "Go-To-Dinners": 13
+  // };
 
   const [quantity, setQuantity] = useState(booksCartNames);
   function add(booksCartNames, bookName) {
@@ -96,7 +104,7 @@ const MainCart = ({ currentUser }) => {
     booksCartNames[bookName] = booksCartNames[bookName] + 1;
     setQuantity(booksCartNames);
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
-    // window.location.reload();
+    window.location.reload();
   }
 
   function subtract(booksCartNames, bookName) {
@@ -105,7 +113,7 @@ const MainCart = ({ currentUser }) => {
       booksCartNames[bookName] = booksCartNames[bookName] - 1;
       setQuantity(booksCartNames);
       localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
-      // window.location.reload();
+      window.location.reload();
     }
   }
 
@@ -121,7 +129,6 @@ const MainCart = ({ currentUser }) => {
     <div>
       <div>
         <Button onClick={() => clear_cart()}>Clear Cart</Button>
-
       </div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         {/* {Object.keys(booksCartNames).map((bookName) => ( */}
@@ -205,14 +212,17 @@ const MainCart = ({ currentUser }) => {
         </div>
 
         <div
-          className={`flex-1 flex justify-start items-center flex-row m-3 bg-camel py-4 px-4 rounded min-w-[500px] max-w-[600px] gap-16`}
+          className={`grid grid-cols-3 flex-1 flex justify-start items-center  m-3 bg-camel py-4 px-4 rounded min-w-[500px] max-w-[600px] gap-16`}
         >
-          <h4 className="font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
+          <h4 className="col-span-1 font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
             Total: ${calculatePrice(books, booksCartNames)}
           </h4>
-          <p className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3"></p>
-          <button class="bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-1"
-          onClick={()=>{puchaseBooks(currentUser)}}>
+          <button
+            class="col-span-2 bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-1"
+            onClick={() => {
+              puchaseBooks(currentUser);
+            }}
+          >
             Check out
           </button>
         </div>

From a6a1f792576e65346845128e852ccb050aea838a Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 00:04:41 -0500
Subject: [PATCH 14/28] checkpoint 1

---
 client/src/components/NavBar/NavBar.jsx | 12 ++++---
 client/src/components/UserRow.jsx       |  1 +
 client/src/views/Cart/Cart.jsx          | 46 +++++++++++++++++++++----
 3 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index 546f4fe07..3417802eb 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -25,19 +25,21 @@ const NavBar = ({ user }) => {
               </span>
             </a>
           </span>
-          <div class="flex md:order-2">
+          <div class="flex md:order-2 grid grid-cols-5">
           <IoMdCart
               onClick={() => navigate("/cart")}
-              className="icon"
+              className=""
               style={{
-                position: "absolute",
+                position: "",
                 top: "10px",
-                right: "20px",
+                right: "70px",
               }}
               size="40px"
               color="white"
             />
-            <button class="flex items-center" onClick={loginOrLogout}>
+            <div />
+            
+            <button class="" onClick={loginOrLogout}>
               <span className="text-white text-xl">
                 {user && user.length !== 0 ? "Logout" : "Login"}
               </span>
diff --git a/client/src/components/UserRow.jsx b/client/src/components/UserRow.jsx
index 0a2252dc7..30ddea754 100644
--- a/client/src/components/UserRow.jsx
+++ b/client/src/components/UserRow.jsx
@@ -1,6 +1,7 @@
 import React from "react";
 
 const UserRow = ({ contact, handleEditClick, handleDelete }) => {
+  // console.log(contact)
   return (
     <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
       <td class="px-6 py-4">
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index ef3686fec..e54d2c9c5 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -5,6 +5,7 @@ import { Grid, Chip, Avatar } from "@mui/material";
 import { Button } from "@mui/material";
 import books from "../Books";
 import { useNavigate } from "react-router-dom";
+import axios from "axios";
 
 function clear_cart() {
   localStorage.setItem("books_cart", JSON.stringify([]));
@@ -81,10 +82,14 @@ function calculatePrice(books, booksCartNames) {
 const MainCart = ({ currentUser }) => {
   const navigate = useNavigate();
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
+  var token = localStorage.getItem("token");
+  var user = localStorage.getItem("user");
+  console.log(user);
 
   var puchaseBooks = (currentUser) => {
     if (currentUser && currentUser.length !== 0) {
       // localStorage.removeItem("token");
+
       localStorage.setItem("books_cart", JSON.stringify([]));
       localStorage.setItem("booksCartNames", JSON.stringify({}));
       window.location.reload();
@@ -124,12 +129,34 @@ const MainCart = ({ currentUser }) => {
     window.location.reload();
   }
 
+  function deleteItem(booksCartNames, bookName){
+    delete booksCartNames[bookName];
+    setQuantity(booksCartNames);
+    localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+    window.location.reload();
+  }
+
+  // const login = async (e) => {
+  //   e.preventDefault();
+  //   try {
+  //     const url = "/api/auth";
+  //     const { data: res } = await axios.post(url, data);
+  //     localStorage.setItem("token", res.data);
+  //     window.location = "/";
+  //   } catch (error) {
+  //     console.log(error);
+  //     if (error.response?.status >= 400 && error.response.status <= 500) {
+  //       setError(error.response.data.message);
+  //     }
+  //   }
+  // };
+
   // console.log(books_cart);
   return (
     <div>
-      <div>
-        <Button onClick={() => clear_cart()}>Clear Cart</Button>
-      </div>
+      {/* {console.log(currentUser)}
+      {console.log(token)} */}
+
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         {/* {Object.keys(booksCartNames).map((bookName) => ( */}
         {/* <div>
@@ -201,8 +228,13 @@ const MainCart = ({ currentUser }) => {
                       className="pl-4"
                       onClick={() => setZero(booksCartNames, bookName)}
                     >
-                      {" "}
-                      Clear{" "}
+                      Clear
+                    </button>
+                    <button
+                      className="pl-4"
+                      onClick={() => deleteItem(booksCartNames, bookName)}
+                    >
+                      Delete
                     </button>
                   </div>
                 </h3>
@@ -210,7 +242,9 @@ const MainCart = ({ currentUser }) => {
             </div>
           ))}
         </div>
-
+        <div className="ml-2">
+          <Button onClick={() => clear_cart()}>Clear Cart</Button>
+        </div>
         <div
           className={`grid grid-cols-3 flex-1 flex justify-start items-center  m-3 bg-camel py-4 px-4 rounded min-w-[500px] max-w-[600px] gap-16`}
         >

From a287bf21c0f78bcf7685ebc3c8365f6072f1dabe Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 15:45:52 -0500
Subject: [PATCH 15/28] uninstall react-use-cart

---
 client/package-lock.json | 18 ------------------
 client/package.json      |  1 -
 2 files changed, 19 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index ccf5c69e0..65a52a05e 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -28,7 +28,6 @@
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "react-stars": "^2.2.5",
-        "react-use-cart": "^1.13.0",
         "reactjs-popup": "^2.0.5",
         "styled-components": "^5.3.6",
         "sweetalert2": "^11.7.1",
@@ -26351,17 +26350,6 @@
         "react-dom": ">=16.6.0"
       }
     },
-    "node_modules/react-use-cart": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
-      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
-      "engines": {
-        "node": ">=10"
-      },
-      "peerDependencies": {
-        "react": ">=16"
-      }
-    },
     "node_modules/reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
@@ -50662,12 +50650,6 @@
         "prop-types": "^15.6.2"
       }
     },
-    "react-use-cart": {
-      "version": "1.13.0",
-      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
-      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
-      "requires": {}
-    },
     "reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
diff --git a/client/package.json b/client/package.json
index a52bf6285..74bf01a95 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,7 +23,6 @@
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-stars": "^2.2.5",
-    "react-use-cart": "^1.13.0",
     "reactjs-popup": "^2.0.5",
     "styled-components": "^5.3.6",
     "sweetalert2": "^11.7.1",

From 040ea2f3724a63e1266a02481946b33e2366857b Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 15:52:52 -0500
Subject: [PATCH 16/28] update

---
 client/package-lock.json | 18 ++++++++++++++++++
 client/package.json      |  1 +
 2 files changed, 19 insertions(+)

diff --git a/client/package-lock.json b/client/package-lock.json
index 65a52a05e..ccf5c69e0 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -28,6 +28,7 @@
         "react-router-dom": "^6.6.1",
         "react-scripts": "5.0.1",
         "react-stars": "^2.2.5",
+        "react-use-cart": "^1.13.0",
         "reactjs-popup": "^2.0.5",
         "styled-components": "^5.3.6",
         "sweetalert2": "^11.7.1",
@@ -26350,6 +26351,17 @@
         "react-dom": ">=16.6.0"
       }
     },
+    "node_modules/react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
+    },
     "node_modules/reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
@@ -50650,6 +50662,12 @@
         "prop-types": "^15.6.2"
       }
     },
+    "react-use-cart": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/react-use-cart/-/react-use-cart-1.13.0.tgz",
+      "integrity": "sha512-V3jrNOgBXxTn/RWh1HCEdrQk/jx2xCixdkX1c7Vyl4zxEf9jOuniUnjZSTALO7rQ5226onqmvXxKz1eu0Yz6Iw==",
+      "requires": {}
+    },
     "reactjs-popup": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.5.tgz",
diff --git a/client/package.json b/client/package.json
index 74bf01a95..a52bf6285 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-stars": "^2.2.5",
+    "react-use-cart": "^1.13.0",
     "reactjs-popup": "^2.0.5",
     "styled-components": "^5.3.6",
     "sweetalert2": "^11.7.1",

From d97419fdaaabcd75d9170f45e825300a994aaae5 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 16:00:52 -0500
Subject: [PATCH 17/28] update


From e32cf6047a4b256a577144818606d2f0693bda8b Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 16:23:42 -0500
Subject: [PATCH 18/28] update

---
 backend/models/user.js                  | 1 +
 client/src/views/BooksPageGenerator.jsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/backend/models/user.js b/backend/models/user.js
index 5f9c41a9f..6745aaed6 100644
--- a/backend/models/user.js
+++ b/backend/models/user.js
@@ -10,6 +10,7 @@ const userSchema = new mongoose.Schema({
   password: { type: String, required: true },
   role: { type: String, required: true, enum: ["admin", "customer"]},
   balance: { type: mongoose.Schema.Types.Decimal128, required: false },
+  
 });
 
 userSchema.methods.generateAuthToken = function () {
diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index 0a1a27542..f6d1d3a9a 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -36,7 +36,7 @@ const BooksPageGenerator = ({ book }) => {
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
     var bookNames = getKeys(booksCartNames);
 
-    if (bookNames.includes(book.name) === false) {
+    if (bookNames.includes(book.name) !== null && !bookNames.includes(book.name)) {
       booksCartNames[book.name] = 0;
       // console.log(Object.keys(booksCartNames));
     }

From fedec6ffdc569dcd4316150cb7362da4c500a0ef Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Thu, 23 Feb 2023 17:48:15 -0500
Subject: [PATCH 19/28] update

---
 client/src/views/Browse.jsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/client/src/views/Browse.jsx b/client/src/views/Browse.jsx
index 51fb8b0f6..d3a59ddf7 100644
--- a/client/src/views/Browse.jsx
+++ b/client/src/views/Browse.jsx
@@ -81,13 +81,21 @@ const sort = (books, selection) => {
 };
 
 const Browse = () => {
-  const [value, setValue] = useState("1");
-  const book_instance = localStorage.getItem("Book");
-  console.log("book_instance" + book_instance);
+  const [value, setValue] = useState("");
 
+  const book_instance = localStorage.getItem("Book");
 
+  function changeOption(option) {
+    setValue(option);
+    localStorage.setItem("option", option);
+  }
 
-  console.log()
+  let prevOption = localStorage.getItem("option");
+  // if (prevOption) {
+  //   setValue(prevOption);
+  // }
+  // console.log(prevOption);
+  // console.log(prevOption);
 
 
   return (
@@ -97,6 +105,9 @@ const Browse = () => {
           Browse
         </div>
       </div>
+      <button onClick={() => {localStorage.removeItem("option")}}>
+        clear
+      </button>
       <div class=" xl:w-8/12 lg:w-8/12 md:w-4/12 w-4/12 py-2 grid">
         <p className={`${styles.paragraph} max-w-[1158px] relative grid gap-2`}>
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -125,7 +136,7 @@ const Browse = () => {
       <div class="flex pb-2">
         <select
           className="rounded border bg-white py-2 grid max-w-[1158px] px-4 w-[500px] xl:w-[1100px] lg:w-[600px] md:w-[500px]"
-          onChange={(e) => setValue(e.target.value)}
+          onChange={(e) => changeOption(e.target.value)}
         >
           <option selected disabled hidden>
             Sort by:

From c15782a53fec047d222c38306691e04786a8eb7f Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Fri, 24 Feb 2023 16:14:55 -0500
Subject: [PATCH 20/28] update

---
 client/src/views/Books.js | 69 ++++-----------------------------------
 1 file changed, 6 insertions(+), 63 deletions(-)

diff --git a/client/src/views/Books.js b/client/src/views/Books.js
index 0fe806442..7c7ca586e 100644
--- a/client/src/views/Books.js
+++ b/client/src/views/Books.js
@@ -8,7 +8,7 @@ const books = [
     link: "/Walter Issacson/Steve Jobs",
     stars: 3,
     price: 12.5,
-    qty: "40+",
+    qty: 40,
     genre: "",
     sold: "6",
     date: "2006-08-25",
@@ -22,7 +22,7 @@ const books = [
     link: "/Ina Garten/Go-To-Dinners",
     stars: 3,
     price: 120.99,
-    qty: "40+",
+    qty: 40,
     genre: "",
     sold: "3",
     date: "2020-03-23",
@@ -36,7 +36,7 @@ const books = [
     link: "/Ina Garten/How Easy is That",
     stars: 3,
     price: 15.99,
-    qty: "40+",
+    qty: 40,
     genre: "",
     sold: "23",
     date: "2022-04-11",
@@ -50,68 +50,11 @@ const books = [
     link: "/Charlotte Bronte/Jane Eyre",
     stars: 3,
     price: 16.99,
-    qty: "40+",
+    qty: 40,
     genre: "",
     sold: "43",
     date: "2016-06-01",
-  },
-
-  {
-    name: "Steve Jobs",
-    author: "Walter Issacson",
-    image: require("./Books/stevejobs.png"),
-    review:
-      "SJ A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
-    link: "/Walter Issacson/Steve Jobs2",
-    stars: 3.5,
-    price: 12.99,
-    qty: "40+",
-    genre: "",
-    sold: "12",
-    date: "2014-11-05",
-  },
-  {
-    name: "Go-To-Dinners",
-    author: "Ina Garten",
-    image: require("./Books/gotodinners.png"),
-    review:
-      "GTD A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
-    link: "/Ina Garten/Go-To-Dinners2",
-    stars: 3,
-    price: 12.99,
-    qty: "40+",
-    genre: "",
-    sold: "12",
-    date: "2006-08-25",
-  },
-  {
-    name: "How Easy is That?",
-    author: "Ina Garten",
-    image: require("./Books/howeasyisthat.png"),
-    review:
-      "HET A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
-    link: "/Ina Garten/How Easy is That2",
-    stars: 3,
-    price: 12.99,
-    qty: "40+",
-    genre: "",
-    sold: "56",
-    date: "2016-01-19",
-  },
-  {
-    name: "Jane Eyre",
-    author: "Charlotte Bronte",
-    image: require("./Books/janeeyre.png"),
-    review:
-      "JE A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
-    link: "/Charlotte Bronte/Jane Eyre2",
-    stars: 3,
-    price: 1.99,
-    qty: "40+",
-    genre: "",
-    sold: "0",
-    date: "2010-10-26",
-  },
+  }
 ];
 
-export default books;
+export default books;
\ No newline at end of file

From f5e5665777c3a9b89780013f5d8c80aa44a4f7fc Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sat, 25 Feb 2023 18:25:28 -0500
Subject: [PATCH 21/28] update

---
 client/src/components/NavBar/NavBar.jsx |  1 +
 client/src/views/Books.js               | 40 +++++++++---------
 client/src/views/BooksPageGenerator.jsx | 33 +++++++++------
 client/src/views/Browse.jsx             |  6 +--
 client/src/views/Cart/Cart.jsx          | 55 +++----------------------
 5 files changed, 49 insertions(+), 86 deletions(-)

diff --git a/client/src/components/NavBar/NavBar.jsx b/client/src/components/NavBar/NavBar.jsx
index 40975ea52..f08551d9d 100644
--- a/client/src/components/NavBar/NavBar.jsx
+++ b/client/src/components/NavBar/NavBar.jsx
@@ -11,6 +11,7 @@ const NavBar = ({ user }) => {
       localStorage.removeItem("userType");
       localStorage.removeItem("userID");
       window.location.reload();
+      navigate("/");
     } else {
       navigate("/login");
     }
diff --git a/client/src/views/Books.js b/client/src/views/Books.js
index 7c7ca586e..e6942fcae 100644
--- a/client/src/views/Books.js
+++ b/client/src/views/Books.js
@@ -1,58 +1,58 @@
 const books = [
   {
-    name: "Steve Jobs",
+    title: "Steve Jobs",
     author: "Walter Issacson",
-    image: require("./Books/stevejobs.png"),
-    review:
+    imageId: require("./Books/stevejobs.png"),
+    summary:
       "SJ A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
     link: "/Walter Issacson/Steve Jobs",
     stars: 3,
     price: 12.5,
-    qty: 40,
+    stock: 40,
     genre: "",
-    sold: "6",
+    quantitySold: "6",
     date: "2006-08-25",
   },
   {
-    name: "Go-To-Dinners",
+    title: "Go-To-Dinners",
     author: "Ina Garten",
-    image: require("./Books/gotodinners.png"),
-    review:
+    imageId: require("./Books/gotodinners.png"),
+    summary:
       "GTD A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
     link: "/Ina Garten/Go-To-Dinners",
     stars: 3,
     price: 120.99,
-    qty: 40,
+    stock: 40,
     genre: "",
-    sold: "3",
+    quantitySold: "3",
     date: "2020-03-23",
   },
   {
-    name: "How Easy is That?",
+    title: "How Easy is That?",
     author: "Ina Garten",
-    image: require("./Books/howeasyisthat.png"),
-    review:
+    imageId: require("./Books/howeasyisthat.png"),
+    summary:
       "HET A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
     link: "/Ina Garten/How Easy is That",
     stars: 3,
     price: 15.99,
-    qty: 40,
+    stock: 40,
     genre: "",
-    sold: "23",
+    quantitySold: "23",
     date: "2022-04-11",
   },
   {
-    name: "Jane Eyre",
+    title: "Jane Eyre",
     author: "Charlotte Bronte",
-    image: require("./Books/janeeyre.png"),
-    review:
+    imageId: require("./Books/janeeyre.png"),
+    summary:
       "JE A genius book about an incredible mind, yadda yadda blah blah blah lots of gushing and awing because I like books.",
     link: "/Charlotte Bronte/Jane Eyre",
     stars: 3,
     price: 16.99,
-    qty: 40,
+    stock: 40,
     genre: "",
-    sold: "43",
+    quantitySold: "43",
     date: "2016-06-01",
   }
 ];
diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index f6d1d3a9a..e3677dee0 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -5,15 +5,21 @@ import { Grid, Chip, Avatar } from "@mui/material";
 import { Remove, Add } from "@mui/icons-material";
 import Popup from "reactjs-popup";
 
-
 function getKeys(obj) {
   var keys = [];
-  iterate(obj, function (oVal, oKey) { keys.push(oKey) });
+  iterate(obj, function (oVal, oKey) {
+    keys.push(oKey);
+  });
   return keys;
 }
 function iterate(iterable, callback) {
   for (var key in iterable) {
-    if (key === 'length' || key === 'prototype' || !Object.prototype.hasOwnProperty.call(iterable, key)) continue;
+    if (
+      key === "length" ||
+      key === "prototype" ||
+      !Object.prototype.hasOwnProperty.call(iterable, key)
+    )
+      continue;
     callback(iterable[key], key, iterable);
   }
 }
@@ -29,24 +35,25 @@ const BooksPageGenerator = ({ book }) => {
     for (let i = 0; i < quantity; i++) {
       books_cart.push(book);
     }
+    // console.log(books_cart);
 
     localStorage.setItem("books_cart", JSON.stringify(books_cart));
-    // console.log(books_cart);
 
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
     var bookNames = getKeys(booksCartNames);
 
-    if (bookNames.includes(book.name) !== null && !bookNames.includes(book.name)) {
-      booksCartNames[book.name] = 0;
-      // console.log(Object.keys(booksCartNames));
+    if (
+      bookNames.includes(book.title) !== null &&
+      !bookNames.includes(book.title)
+    ) {
+      booksCartNames[book.title] = 0;
     }
 
-    booksCartNames[book.name] = booksCartNames[book.name] + quantity;
+    booksCartNames[book.title] = booksCartNames[book.title] + quantity;
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
     console.log(booksCartNames);
   }
 
-
   function add(quantity) {
     setQuantity(quantity + 1);
   }
@@ -63,12 +70,12 @@ const BooksPageGenerator = ({ book }) => {
     <Grid container spacing={2}>
       <Grid item xs={12}>
         <span class="text-center text-3xl px-16">
-          {book.name} by {book.author}
+          {book.title} by {book.author}
         </span>
       </Grid>
       <Grid item xs={4} className={`text-right`}>
         <div class="min-w-[100px] max-w-[190px]">
-          <img src={book.image} alt="" className="row-span-2 border-2" />
+          <img src={book.imageId} alt="" className="row-span-2 border-2" />
         </div>
       </Grid>
       <Grid item xs={8}>
@@ -81,7 +88,7 @@ const BooksPageGenerator = ({ book }) => {
           color1={"#000"}
           color2={"#c2b542"}
         />
-        <ul>Quantity Available: {book.qty}</ul>
+        <ul>Quantity Available: {book.stock}+</ul>
         <ul className="flex">
           Add to Wishlist: &nbsp;
           <span className="py-1">
@@ -120,7 +127,7 @@ const BooksPageGenerator = ({ book }) => {
             onClick={() => addItem(book, quantity)}
           >
             Add to cart
-          </button> 
+          </button>
 
           {/* <button class="text-slate-800 font-semibold focus:text-black focus:bg-persian_plum rounded p-3 border-2 max-w-[150px]">
             Instant Purchase
diff --git a/client/src/views/Browse.jsx b/client/src/views/Browse.jsx
index d3a59ddf7..a1c930f42 100644
--- a/client/src/views/Browse.jsx
+++ b/client/src/views/Browse.jsx
@@ -34,7 +34,7 @@ const sort = (books, selection) => {
       break;
     case "Best Selling":
       books_changed = books.sort(function (a, b) {
-        return b.sold - a.sold;
+        return b.quantitySold - a.quantitySold;
       });
       break;
     case "New Arrivals":
@@ -65,8 +65,8 @@ const sort = (books, selection) => {
           className="border-2 border-gainsboro hover:border-black"
         >
           <a href={`${book.link}`}>
-            <img src={book.image} alt="" className="row-span-2" />
-            <div class="text-lg">{book.name}</div>
+            <img src={book.imageId} alt="" className="row-span-2" />
+            <div class="text-lg">{book.title}</div>
             <div class="felx items-end">by: {book.author}</div>
             {/*<div class="text-lg">
               ${wholeNumber(book.price)}.
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index e54d2c9c5..640db50ce 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -23,7 +23,7 @@ function addItem(book) {
   if (booksCartNames == null) {
     booksCartNames = [];
   }
-  booksCartNames.push(book.name);
+  booksCartNames.push(book.title);
 
   booksCartNames = booksCartNames.reduce(function (prev, cur) {
     prev[cur] = (prev[cur] || 0) + 1;
@@ -38,7 +38,7 @@ function addItem(book) {
 
 function getBook(books, bookName) {
   for (let i = 0; i < books.length; ++i) {
-    if (books[i].name == bookName) {
+    if (books[i].title == bookName) {
       return books[i];
     }
   }
@@ -129,61 +129,16 @@ const MainCart = ({ currentUser }) => {
     window.location.reload();
   }
 
-  function deleteItem(booksCartNames, bookName){
+  function deleteItem(booksCartNames, bookName) {
     delete booksCartNames[bookName];
     setQuantity(booksCartNames);
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
     window.location.reload();
   }
 
-  // const login = async (e) => {
-  //   e.preventDefault();
-  //   try {
-  //     const url = "/api/auth";
-  //     const { data: res } = await axios.post(url, data);
-  //     localStorage.setItem("token", res.data);
-  //     window.location = "/";
-  //   } catch (error) {
-  //     console.log(error);
-  //     if (error.response?.status >= 400 && error.response.status <= 500) {
-  //       setError(error.response.data.message);
-  //     }
-  //   }
-  // };
-
-  // console.log(books_cart);
   return (
     <div>
-      {/* {console.log(currentUser)}
-      {console.log(token)} */}
-
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
-        {/* {Object.keys(booksCartNames).map((bookName) => ( */}
-        {/* <div>
-            <div class="grid grid-cols-2 gap-2 p-5 bg-black">
-                <Grid item xs={4} className={`object-right w-2/4 bg-green`}>
-                  <div class="min-w-[100px] max-w-[190px]">
-                    <img
-                      src={getBook(books, bookName).image}
-                      alt=""
-                      className="row-span-2 border-2 justify-right"
-                    />
-                  </div>
-                </Grid>
-              <div class="bg-red text-green-500 text-lg font-bold text-center rounded-lg w-fit mr-12">
-                <Grid item xs={12}>
-                  <span class="text-center text-2xl px-16 ">
-                    {getBook(books, bookName).name} by{" "}
-                    {getBook(books, bookName).author}
-                  </span>
-                </Grid>
-              </div>
-            </div>
-
-            <Grid container spacing={2}>
-              <ul className="row-span-6" />
-            </Grid>
-          </div> */}
         <div
           className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
         >
@@ -193,14 +148,14 @@ const MainCart = ({ currentUser }) => {
             >
               <div class="min-w-[80px] max-w-[120px]">
                 <img
-                  src={getBook(books, bookName).image}
+                  src={getBook(books, bookName).imageId}
                   alt=""
                   className="row-span-2 border-2 justify-right"
                 />
               </div>
               <div>
                 <h3 className="font-poppins font-bold xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">
-                  {getBook(books, bookName).name} by{" "}
+                  {getBook(books, bookName).title} by{" "}
                   {getBook(books, bookName).author}
                 </h3>
                 <h3 className="font-poppins font-normal xs:text-[20.45px] text-[15.45px] xs:leading-[26.58px] leading-[21.58px] ml-3">

From 8326a65489956aa85b51bfb7893559949fe90efd Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sat, 25 Feb 2023 19:15:26 -0500
Subject: [PATCH 22/28] update

---
 client/src/components/NavBar/index.jsx |  2 +-
 client/src/views/Cart/Cart.jsx         | 44 +++++++++++++++++++++++---
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/client/src/components/NavBar/index.jsx b/client/src/components/NavBar/index.jsx
index d6839249b..745df59ad 100644
--- a/client/src/components/NavBar/index.jsx
+++ b/client/src/components/NavBar/index.jsx
@@ -38,7 +38,7 @@ const CompleteNavbar = () => {
             <Route path="/contact" element={<ContactUs />} />
             <Route path="/browse" element={<Browse />} />
             <Route path="/create_account" element={<Signup />} />
-            <Route path="/cart" element={<MainCart currentUser={user} />} />
+            <Route path="/cart" element={<MainCart currentUser={localStorage.getItem("userID")}  />} />
 
             {/* Admin and Customer */}
             <Route path="/my_account" element={<MyAccount currentUser={localStorage.getItem("userID")} />} />
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index 640db50ce..d4086c28f 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -98,11 +98,6 @@ const MainCart = ({ currentUser }) => {
     }
   };
 
-  //   {
-  //     "Steve Jobs": 22,
-  //     "Go-To-Dinners": 13
-  // };
-
   const [quantity, setQuantity] = useState(booksCartNames);
   function add(booksCartNames, bookName) {
     console.log("adding");
@@ -136,6 +131,45 @@ const MainCart = ({ currentUser }) => {
     window.location.reload();
   }
 
+  const getUserData = async () => {
+    const url = "/api/users/" + currentUser;
+    const res = await axios.get(url, data);
+    return res.data;
+  };
+
+  const [data, setData] = useState(getUserData);
+  const [error, setError] = useState("");
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setData({
+      ...data,
+      [name]: value,
+    });
+  };
+  console.log(currentUser);
+
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      console.log(data.balance);
+      // temporary for right now but later redo this to use put commands instead of post
+      const url = "/api/users/" + currentUser;
+      // hash the new password here
+      if (data.password === "") {
+        delete data.password;
+      }
+      console.log(data);
+      const res = await axios.put(url, data);
+      window.location.reload();
+    } catch (error) {
+      console.log(error);
+      if (error.response?.status >= 400 && error.response.status <= 500) {
+        setError(error.response.data.message);
+      }
+    }
+  };
+
   return (
     <div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">

From 4f82751229900f9f9f5c5f8bfed0a56b2ae71b7e Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sat, 25 Feb 2023 19:32:27 -0500
Subject: [PATCH 23/28] able to retrieve user data

---
 client/src/views/Cart/Cart.jsx | 34 +++++++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index d4086c28f..eae41a4b6 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -1,5 +1,5 @@
 import { CartProvider, useCart } from "react-use-cart";
-import { React, useState } from "react";
+import { React, useState, useEffect } from "react";
 import { Remove, Add } from "@mui/icons-material";
 import { Grid, Chip, Avatar } from "@mui/material";
 import { Button } from "@mui/material";
@@ -84,7 +84,6 @@ const MainCart = ({ currentUser }) => {
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
   var token = localStorage.getItem("token");
   var user = localStorage.getItem("user");
-  console.log(user);
 
   var puchaseBooks = (currentUser) => {
     if (currentUser && currentUser.length !== 0) {
@@ -146,13 +145,10 @@ const MainCart = ({ currentUser }) => {
       [name]: value,
     });
   };
-  console.log(currentUser);
-
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      console.log(data.balance);
       // temporary for right now but later redo this to use put commands instead of post
       const url = "/api/users/" + currentUser;
       // hash the new password here
@@ -170,6 +166,34 @@ const MainCart = ({ currentUser }) => {
     }
   };
 
+  function ValidatedUsers(props) {
+    const [currentUser, setCurrentUser] = useState("");
+    const [users, setUsers] = useState([]);
+
+    useEffect(() => {
+      async function getValidatedUsers() {
+        const url = "/api/users";
+        const res = await axios.get(url);
+        const users = res.data;
+        setCurrentUser(props.currentUser);
+        setUsers(users);
+      }
+      getValidatedUsers();
+    }, [props.currentUser]);
+    return users;
+  }
+  var allUsers = ValidatedUsers(currentUser);
+
+  function userData(users, currentUser){
+    for(let i = 0; i < users.length; ++i){
+      if(users[i]._id == currentUser){
+        console.log(users[i]);
+      }
+    }
+
+  }
+  userData(allUsers, currentUser);
+
   return (
     <div>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">

From 77667a5e40f2a645c34b5f49a288494ce21f7a13 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sat, 25 Feb 2023 22:05:58 -0500
Subject: [PATCH 24/28] balance deducted

---
 client/src/views/BooksPageGenerator.jsx |  2 +-
 client/src/views/Cart/Cart.jsx          | 57 ++++++++++++++-----------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index e3677dee0..a0644d9dd 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -69,7 +69,7 @@ const BooksPageGenerator = ({ book }) => {
   return (
     <Grid container spacing={2}>
       <Grid item xs={12}>
-        <span class="text-center text-3xl px-16">
+        <span class="text-center text-3xl px-16 py-3">
           {book.title} by {book.author}
         </span>
       </Grid>
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index eae41a4b6..d17014669 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -82,20 +82,6 @@ function calculatePrice(books, booksCartNames) {
 const MainCart = ({ currentUser }) => {
   const navigate = useNavigate();
   var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
-  var token = localStorage.getItem("token");
-  var user = localStorage.getItem("user");
-
-  var puchaseBooks = (currentUser) => {
-    if (currentUser && currentUser.length !== 0) {
-      // localStorage.removeItem("token");
-
-      localStorage.setItem("books_cart", JSON.stringify([]));
-      localStorage.setItem("booksCartNames", JSON.stringify({}));
-      window.location.reload();
-    } else {
-      navigate("/login");
-    }
-  };
 
   const [quantity, setQuantity] = useState(booksCartNames);
   function add(booksCartNames, bookName) {
@@ -149,9 +135,7 @@ const MainCart = ({ currentUser }) => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      // temporary for right now but later redo this to use put commands instead of post
       const url = "/api/users/" + currentUser;
-      // hash the new password here
       if (data.password === "") {
         delete data.password;
       }
@@ -182,20 +166,39 @@ const MainCart = ({ currentUser }) => {
     }, [props.currentUser]);
     return users;
   }
-  var allUsers = ValidatedUsers(currentUser);
 
-  function userData(users, currentUser){
-    for(let i = 0; i < users.length; ++i){
-      if(users[i]._id == currentUser){
-        console.log(users[i]);
+  function userData(users, currentUser) {
+    for (let i = 0; i < users.length; ++i) {
+      if (users[i]._id === currentUser) {
+        console.log(users[i].balance.$numberDecimal);
+        return users[i].balance.$numberDecimal;
       }
     }
-
   }
-  userData(allUsers, currentUser);
+
+
+  var allUsers = ValidatedUsers(currentUser);
+  const availbleBalance = userData(allUsers, currentUser);
+
+  var puchaseBooks = (currentUser, availbleBalance) => {
+    if (currentUser && currentUser.length !== 0) {
+      data.balance = availbleBalance - calculatePrice(books, booksCartNames);
+      localStorage.setItem("books_cart", JSON.stringify([]));
+      localStorage.setItem("booksCartNames", JSON.stringify({}));
+      handleChange()
+      window.location.reload();
+    } else {
+      navigate("/login");
+    }
+  };
 
   return (
     <div>
+      <Grid item xs={12}>
+        <span class="text-center text-3xl px-16 py-3">
+          Available balance: ${availbleBalance}
+        </span>
+      </Grid>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
         <div
           className={`flex justify-center items-center grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 flex-row flex-wrap sm:mb-20 mb-6`}
@@ -258,8 +261,9 @@ const MainCart = ({ currentUser }) => {
         <div className="ml-2">
           <Button onClick={() => clear_cart()}>Clear Cart</Button>
         </div>
-        <div
+        <form
           className={`grid grid-cols-3 flex-1 flex justify-start items-center  m-3 bg-camel py-4 px-4 rounded min-w-[500px] max-w-[600px] gap-16`}
+          onSubmit={handleSubmit}
         >
           <h4 className="col-span-1 font-poppins font-semibold xs:text-[30.89px] text-[25.89px] xs:leading-[43.16px] leading-[30.16px]">
             Total: ${calculatePrice(books, booksCartNames)}
@@ -267,12 +271,13 @@ const MainCart = ({ currentUser }) => {
           <button
             class="col-span-2 bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-1"
             onClick={() => {
-              puchaseBooks(currentUser);
+              puchaseBooks(currentUser, availbleBalance);
             }}
+            type="submit"
           >
             Check out
           </button>
-        </div>
+        </form>
       </div>
     </div>
   );

From eac6d837965ec495b0e7702e997a299f57217e08 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sat, 25 Feb 2023 23:52:29 -0500
Subject: [PATCH 25/28] it works

---
 client/src/views/BooksPageGenerator.jsx |  6 +++
 client/src/views/Browse.jsx             |  4 +-
 client/src/views/Cart/Cart.jsx          | 37 +++++++++++-----
 client/src/views/Forums.jsx             | 57 ++++++++++++++-----------
 4 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index a0644d9dd..9a7458f97 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -4,6 +4,7 @@ import Heart from "react-heart";
 import { Grid, Chip, Avatar } from "@mui/material";
 import { Remove, Add } from "@mui/icons-material";
 import Popup from "reactjs-popup";
+import swal from "sweetalert2";
 
 function getKeys(obj) {
   var keys = [];
@@ -51,6 +52,10 @@ const BooksPageGenerator = ({ book }) => {
 
     booksCartNames[book.title] = booksCartNames[book.title] + quantity;
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
+    swal.fire({
+      icon: 'success',
+      title: 'Book added to cart'
+    })
     console.log(booksCartNames);
   }
 
@@ -64,6 +69,7 @@ const BooksPageGenerator = ({ book }) => {
     }
   }
 
+
   const [active, setActive] = useState(false);
 
   return (
diff --git a/client/src/views/Browse.jsx b/client/src/views/Browse.jsx
index a1c930f42..f468e84ab 100644
--- a/client/src/views/Browse.jsx
+++ b/client/src/views/Browse.jsx
@@ -105,9 +105,7 @@ const Browse = () => {
           Browse
         </div>
       </div>
-      <button onClick={() => {localStorage.removeItem("option")}}>
-        clear
-      </button>
+
       <div class=" xl:w-8/12 lg:w-8/12 md:w-4/12 w-4/12 py-2 grid">
         <p className={`${styles.paragraph} max-w-[1158px] relative grid gap-2`}>
           <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index d17014669..df525c14b 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -175,18 +175,33 @@ const MainCart = ({ currentUser }) => {
       }
     }
   }
+  var allUsers;
+  var currentBalance;
+  if (currentUser && currentUser.length !== 0) {
+    allUsers = ValidatedUsers(currentUser);
+    currentBalance = userData(allUsers, currentUser);
+  }
 
+  const availableBalance = () => {
+    if (currentUser && currentUser.length !== 0) {
+      var allUsers = ValidatedUsers(currentUser);
+      return userData(allUsers, currentUser);
+    }
+    return 0;
+  };
 
-  var allUsers = ValidatedUsers(currentUser);
-  const availbleBalance = userData(allUsers, currentUser);
-
-  var puchaseBooks = (currentUser, availbleBalance) => {
+  var puchaseBooks = (currentUser) => {
     if (currentUser && currentUser.length !== 0) {
-      data.balance = availbleBalance - calculatePrice(books, booksCartNames);
-      localStorage.setItem("books_cart", JSON.stringify([]));
-      localStorage.setItem("booksCartNames", JSON.stringify({}));
-      handleChange()
-      window.location.reload();
+      console.log(currentBalance);
+      if (currentBalance - calculatePrice(books, booksCartNames) >= 0) {
+        data.balance = currentBalance - calculatePrice(books, booksCartNames);
+        localStorage.setItem("books_cart", JSON.stringify([]));
+        localStorage.setItem("booksCartNames", JSON.stringify({}));
+        handleChange();
+      } else {
+        handleChange();
+        window.location.reload();
+      }
     } else {
       navigate("/login");
     }
@@ -196,7 +211,7 @@ const MainCart = ({ currentUser }) => {
     <div>
       <Grid item xs={12}>
         <span class="text-center text-3xl px-16 py-3">
-          Available balance: ${availbleBalance}
+          Available balance: ${availableBalance()}
         </span>
       </Grid>
       <div className="grid grid-cols-1 grid-flow-row min-w-[1100px] max-w-screen">
@@ -271,7 +286,7 @@ const MainCart = ({ currentUser }) => {
           <button
             class="col-span-2 bg-persian_plum hover:bg-green text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded float-right ml-1"
             onClick={() => {
-              puchaseBooks(currentUser, availbleBalance);
+              puchaseBooks(currentUser);
             }}
             type="submit"
           >
diff --git a/client/src/views/Forums.jsx b/client/src/views/Forums.jsx
index acb9ba907..a0545a9ee 100644
--- a/client/src/views/Forums.jsx
+++ b/client/src/views/Forums.jsx
@@ -8,47 +8,52 @@ export default class Forums extends React.Component {
   };
 
   // this may be supposed to be async
-  getForumPosts = async() => {
+  getForumPosts = async () => {
     const url = "/api/forums";
     axios.get(url).then((res) => {
       // console.log("The data:", res.data);
       // const forums = res.data;
-      this.setState({forums: res.data});
+      this.setState({ forums: res.data });
     });
   };
 
   componentDidMount = () => {
     this.getForumPosts();
-  }
+  };
 
   // Form Change Method
   isLoggedIn = () => {
     const currentUser = this.props.currentUser;
     return currentUser && currentUser.length !== 0;
-  }
-
+  };
 
   // Update this to vary based on user log in
-  render() { return(
-    <section className="">
-    <div className="py-4">
-      <div className="grid bg-polished_pine text-center text-white border-black border-2 text-3xl rounded py-3 ">
-        Viewing Forums
-      </div>
-    </div>
-      <div class="flex xl:justify-center lg:justify-between justify-center items-center grid grid-cols-1 h-full g-6">
-        <div class="w-full gap-2 ">
-        <div className="grid grid-rows-4 grid-flow-col gap-2">
-          {this.state.forums.map((forum) => (
-            <div key={forum} className="border-2 border-gainsboro hover:border-black bg-camel">
-                <div class=" ">{forum.post}</div>
-                <div class="felx items-end">by: {(forum.uuid)} on date: {forum.date}</div>
-            </div>
-          ))}
+  render() {
+    return (
+      <section className="">
+        <div className="py-4">
+          <div className="grid bg-polished_pine text-center text-white border-black border-2 text-3xl rounded py-3 ">
+            Viewing Forums
+          </div>
         </div>
+        <div class="flex xl:justify-center lg:justify-between justify-center items-center grid grid-cols-1 h-full g-6">
+          <div class="w-full gap-2 ">
+            <div className="grid grid-rows-4 grid-flow-col gap-2">
+              {this.state.forums.map((forum) => (
+                <div
+                  key={forum}
+                  className="border-2 border-gainsboro hover:border-black bg-camel"
+                >
+                  <div class=" ">{forum.post}</div>
+                  <div class="felx items-end">
+                    by: {forum.uuid} on date: {forum.date}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
-    )
-          }
-        }
+      </section>
+    );
+  }
+}

From f757414b3d4ba4caa9520933280d910769963f28 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sun, 26 Feb 2023 00:00:58 -0500
Subject: [PATCH 26/28] fixed a bug in the books page generator

---
 client/src/views/BooksPageGenerator.jsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/views/BooksPageGenerator.jsx b/client/src/views/BooksPageGenerator.jsx
index 9a7458f97..7d424f77c 100644
--- a/client/src/views/BooksPageGenerator.jsx
+++ b/client/src/views/BooksPageGenerator.jsx
@@ -43,6 +43,10 @@ const BooksPageGenerator = ({ book }) => {
     var booksCartNames = JSON.parse(localStorage.getItem("booksCartNames"));
     var bookNames = getKeys(booksCartNames);
 
+    if (booksCartNames == null) {
+      booksCartNames = [];
+    }
+
     if (
       bookNames.includes(book.title) !== null &&
       !bookNames.includes(book.title)
@@ -53,9 +57,9 @@ const BooksPageGenerator = ({ book }) => {
     booksCartNames[book.title] = booksCartNames[book.title] + quantity;
     localStorage.setItem("booksCartNames", JSON.stringify(booksCartNames));
     swal.fire({
-      icon: 'success',
-      title: 'Book added to cart'
-    })
+      icon: "success",
+      title: "Book added to cart",
+    });
     console.log(booksCartNames);
   }
 
@@ -69,7 +73,6 @@ const BooksPageGenerator = ({ book }) => {
     }
   }
 
-
   const [active, setActive] = useState(false);
 
   return (

From 5fa0b0c1079e2625ed2fff852dc6a646c142e2a3 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sun, 26 Feb 2023 00:12:52 -0500
Subject: [PATCH 27/28] update

---
 client/src/views/Cart/CartItems.jsx | 28 ----------------------------
 1 file changed, 28 deletions(-)
 delete mode 100644 client/src/views/Cart/CartItems.jsx

diff --git a/client/src/views/Cart/CartItems.jsx b/client/src/views/Cart/CartItems.jsx
deleted file mode 100644
index 6d7e5f82e..000000000
--- a/client/src/views/Cart/CartItems.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React, { useContext } from 'react'
-
-const CartItems = () => {
-    const { id, productName, price, productImage } = props.data;
-    const { cartItems, addToCart, removeFromCart, updateCartItemCount } =
-  
-    return (
-      <div className="cartItem">
-        <img src={productImage} />
-        <div className="description">
-          <p>
-            <b>{productName}</b>
-          </p>
-          <p> Price: ${price}</p>
-          <div className="countHandler">
-            <button onClick={() => removeFromCart(id)}> - </button>
-            <input
-              value={cartItems[id]}
-              onChange={(e) => updateCartItemCount(Number(e.target.value), id)}
-            />
-            <button onClick={() => addToCart(id)}> + </button>
-          </div>
-        </div>
-      </div>
-    );
-}
-
-export default CartItems
\ No newline at end of file

From 6fd0f491bc1d888757f1a6453bb6ef4c74a56ed1 Mon Sep 17 00:00:00 2001
From: s-orug <orugants@email.sc.edu>
Date: Sun, 26 Feb 2023 00:36:32 -0500
Subject: [PATCH 28/28] MongoDB's zero storing problem FIXED

---
 client/src/views/Cart/Cart.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/views/Cart/Cart.jsx b/client/src/views/Cart/Cart.jsx
index df525c14b..b72c28191 100644
--- a/client/src/views/Cart/Cart.jsx
+++ b/client/src/views/Cart/Cart.jsx
@@ -194,7 +194,12 @@ const MainCart = ({ currentUser }) => {
     if (currentUser && currentUser.length !== 0) {
       console.log(currentBalance);
       if (currentBalance - calculatePrice(books, booksCartNames) >= 0) {
-        data.balance = currentBalance - calculatePrice(books, booksCartNames);
+        if (currentBalance - calculatePrice(books, booksCartNames) === 0) {
+          data.balance = "0";
+        } else {
+          data.balance = currentBalance - calculatePrice(books, booksCartNames);
+        }
+        console.log(data.balance);
         localStorage.setItem("books_cart", JSON.stringify([]));
         localStorage.setItem("booksCartNames", JSON.stringify({}));
         handleChange();