Books cart and checkout page

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 () {

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",
@@ -24,6 +24,8 @@
     "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",
     "web-vitals": "^2.1.4"

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 (

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();
@@ -10,13 +11,12 @@ const NavBar = ({ user }) => {
       localStorage.removeItem("userType");
       localStorage.removeItem("userID");
       window.location.reload();
+      navigate("/");
     } else {
       navigate("/login");
     }
   };
 
-
-
   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">
@@ -28,8 +28,21 @@ const NavBar = ({ user }) => {
               </span>
             </a>
           </span>
-          <div class="flex md:order-2">
-            <button class="flex items-center" onClick={loginOrLogout}>
+          <div class="flex md:order-2 grid grid-cols-5">
+          <IoMdCart
+              onClick={() => navigate("/cart")}
+              className=""
+              style={{
+                position: "",
+                top: "10px",
+                right: "70px",
+              }}
+              size="40px"
+              color="white"
+            />
+            <div />
+
+            <button class="" onClick={loginOrLogout}>
               <span className="text-white text-xl">
                 {user && user.length !== 0 ? "Logout" : "Login"}
               </span>

client/src/components/NavBar/index.jsx

@@ -14,6 +14,7 @@ import BooksPageGenerator from "../../views/BooksPageGenerator";
 import books from "../../views/Books";
 import ValidatedUsers from "../../views/ValidatedUsers";
 import CreateForum from "../../views/CreateForum";
+import MainCart from "../../views/Cart/Cart";
 import AddBook from "../../views/AddBook";
 import EmployeeHomepage from "../../views/EmployeeHomePage";
 import MyAccount from "../../views/MyAccount";
@@ -37,6 +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={localStorage.getItem("userID")}  />} />
 
             {/* Admin and Customer */}
             <Route path="/my_account" element={<MyAccount currentUser={localStorage.getItem("userID")} />} />

client/src/components/UserRow.jsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 const UserRow = ({ contact, handleEditClick, handleDelete }) => {
+  // console.log(contact)
 
   const handleChange = (e) => {
     const newUserType = e.target.value;

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 />

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">

client/src/views/Books.js

@@ -1,117 +1,60 @@
 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",
-  },
-
-  {
-    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;