updates and cleanup

Author: JaisonBinns

client/src/components/App.js

@@ -10,6 +10,7 @@ import Footer from "./views/Footer/Footer";
 import UploadProductPage from "./views/UploadProductPage/UploadProductPage";
 import ProductPage from "./views/ProductPage/ProductPage";
 import CartPage from "./views/CartPage/CartPage";
+import HistoryPage from "./views/HistoryPage/HistoryPage";
 //null   Anyone Can go inside
 //true   only logged in user can go inside
 //false  logged in user can't go inside
@@ -34,6 +35,7 @@ function App() {
             component={Auth(ProductPage, null)}
           />
           <Route exact path="/user/cart" component={Auth(CartPage, true)} />
+          <Route exact path="/history" component={Auth(HistoryPage, true)} />
         </Switch>
       </div>
       <Footer />

client/src/components/views/HistoryPage/HistoryPage.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from "react";
+import Axios from "axios";
+
+function HistoryPage() {
+  const [History, setHistory] = useState([]);
+
+  useEffect(() => {
+    Axios.get("/api/users/getHistory").then((response) => {
+      if (response.data.success) {
+        setHistory(response.data.history);
+      } else {
+        alert("You have been 404'd. Failed to load page.");
+      }
+    });
+  }, []);
+  return (
+    <div style={{ width: "80%", margin: "3rem auto" }}>
+      <div style={{ textAlign: "center" }}>
+        <h1>History</h1>
+      </div>
+      <br />
+      <table>
+        <thead>
+          <tr>
+            <th>Payment ID</th>
+            <th>Price</th>
+            <th>Quantity</th>
+            <th>Date of Purchase</th>
+          </tr>
+        </thead>
+        <tbody>
+          {History.map((item) => (
+            <tr key={item._id}>
+              <td>{item.paymentId}</td>
+              <td>{item.price}</td>
+              <td>{item.quantity}</td>
+              <td>{item.dateOfPurchase}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+export default HistoryPage;

client/src/components/views/LandingPage/LandingPage.js

@@ -57,7 +57,7 @@ function LandingPage() {
 
         setPostSize(response.data.postSize);
       } else {
-        alert("Failed to delivered your product");
+        alert("You have been 404'd. Failed to load page.");
       }
     });
   };
@@ -136,7 +136,7 @@ function LandingPage() {
     <div style={{ width: "75%", margin: "3rem auto" }}>
       <div style={{ textAlign: "center" }}>
         <h2>
-          JayBee's Shop <Icon type="shop" />
+          JB's Headset Shop <Icon type="shop" />
         </h2>
       </div>
 

client/src/components/views/NavBar/NavBar.js

@@ -1,24 +1,69 @@
-import React, { useState } from 'react';
-import LeftMenu from './Sections/LeftMenu';
-import RightMenu from './Sections/RightMenu';
-import { Drawer, Button, Icon } from 'antd';
-import './Sections/Navbar.css';
+import React, { useState } from "react";
+import LeftMenu from "./Sections/LeftMenu";
+import RightMenu from "./Sections/RightMenu";
+import { Drawer, Button, Icon } from "antd";
+import "./Sections/Navbar.css";
 
 function NavBar() {
-  const [visible, setVisible] = useState(false)
+  const [visible, setVisible] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true)
+    setVisible(true);
   };
 
   const onClose = () => {
-    setVisible(false)
+    setVisible(false);
   };
 
   return (
-    <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}>
+    <nav
+      className="menu"
+      style={{ position: "fixed", zIndex: 5, width: "100%" }}
+    >
       <div className="menu__logo">
-        <a href="/">Logo</a>
+        <a href="/">
+          JB's
+          <svg height="35" viewBox="0 0 70 35">
+            <g>
+              <path
+                id="svg_1"
+                fill-rule="nonzero"
+                fill="rgb(41.176471%,44.705882%,85.490196%)"
+                d="m30.89453,25.57813l-20.23047,0c-0.46875,0 -0.875,-0.32422 -0.98047,-0.78516l-5.10156,-22.10156l-3.57422,0c-0.55468,0 -1.00781,-0.44922 -1.00781,-1.00782c0,-0.55859 0.45313,-1.01171 1.00781,-1.01171l4.375,0c0.47266,0 0.87891,0.32421 0.98438,0.78515l5.10156,22.10156l19.42578,0c0.5586,0 1.00781,0.44922 1.00781,1.00782c0,0.55859 -0.44921,1.01172 -1.00781,1.01172zm0,0"
+              />
+              <path
+                id="svg_2"
+                fill-rule="nonzero"
+                fill="rgb(8.627451%,57.254902%,100%)"
+                d="m34.77734,5.08984c-0.1914,-0.23828 -0.48046,-0.3789 -0.78515,-0.3789l-27.67578,0c-0.3086,0 -0.59766,0.14062 -0.78907,0.38281c-0.1914,0.23828 -0.26562,0.55469 -0.19531,0.85547l3.10547,13.46094c0.10938,0.45703 0.51563,0.78125 0.98438,0.78125l21.53906,0c0.47265,0 0.88281,-0.32813 0.98437,-0.78516l3.03125,-13.46484c0.06641,-0.29688 -0.00781,-0.61328 -0.19922,-0.85157zm0,0"
+              />
+              <path
+                id="svg_3"
+                fill-rule="nonzero"
+                fill="rgb(41.176471%,44.705882%,85.490196%)"
+                d="m14.80859,26.92188c-2.04296,0 -3.70312,1.66015 -3.70312,3.70312c0,2.04297 1.66016,3.70313 3.70312,3.70313c2.03907,0 3.69922,-1.66016 3.69922,-3.70313c0,-2.04297 -1.66015,-3.70312 -3.69922,-3.70312zm0,0"
+              />
+              <path
+                id="svg_4"
+                fill-rule="nonzero"
+                fill="rgb(30.980392%,36.862745%,77.647059%)"
+                d="m26.92188,26.92188c-2.03907,0 -3.69922,1.66015 -3.69922,3.70312c0,2.04297 1.66015,3.70313 3.69922,3.70313c2.04296,0 3.70312,-1.66016 3.70312,-3.70313c0,-2.04297 -1.66016,-3.70312 -3.70312,-3.70312zm0,0"
+              />
+              <path
+                id="svg_5"
+                fill-rule="nonzero"
+                fill="rgb(30.980392%,36.862745%,77.647059%)"
+                d="m30.89453,23.55859l-13.39453,0l0,2.01954l13.39453,0c0.5586,0 1.00781,-0.45313 1.00781,-1.01172c0,-0.5586 -0.44921,-1.00782 -1.00781,-1.00782zm0,0"
+              />
+              <path
+                id="svg_6"
+                fill-rule="nonzero"
+                fill="rgb(0%,49.803922%,86.666667%)"
+                d="m33.99219,4.71094l-16.49219,0l0,15.48047l13.46094,0c0.47265,0 0.88281,-0.32813 0.98437,-0.78516l3.03125,-13.46484c0.06641,-0.29688 -0.00781,-0.61328 -0.19922,-0.85157c-0.1914,-0.23828 -0.48046,-0.3789 -0.78515,-0.3789zm0,0"
+              />
+            </g>
+          </svg>
+        </a>
       </div>
       <div className="menu__container">
         <div className="menu_left">
@@ -47,7 +92,7 @@ function NavBar() {
         </Drawer>
       </div>
     </nav>
-  )
+  );
 }
 
-export default NavBar
+export default NavBar;

client/src/components/views/NavBar/Sections/LeftMenu.js

@@ -1,26 +1,14 @@
-import React from 'react';
-import { Menu } from 'antd';
-const SubMenu = Menu.SubMenu;
-const MenuItemGroup = Menu.ItemGroup;
+import React from "react";
+import { Menu } from "antd";
 
 function LeftMenu(props) {
   return (
     <Menu mode={props.mode}>
-    <Menu.Item key="mail">
-      <a href="/">Home</a>
-    </Menu.Item>
-    <SubMenu title={<span>Blogs</span>}>
-      <MenuItemGroup title="Item 1">
-        <Menu.Item key="setting:1">Option 1</Menu.Item>
-        <Menu.Item key="setting:2">Option 2</Menu.Item>
-      </MenuItemGroup>
-      <MenuItemGroup title="Item 2">
-        <Menu.Item key="setting:3">Option 3</Menu.Item>
-        <Menu.Item key="setting:4">Option 4</Menu.Item>
-      </MenuItemGroup>
-    </SubMenu>
-  </Menu>
-  )
+      <Menu.Item key="mail">
+        <a href="/">Home</a>
+      </Menu.Item>
+    </Menu>
+  );
 }
 
-export default LeftMenu
+export default LeftMenu;

client/src/components/views/NavBar/Sections/Navbar.css

@@ -1,4 +1,4 @@
-@import '~antd/dist/antd.css';
+@import "~antd/dist/antd.css";
 
 .menu {
   padding: 0 20px;
@@ -84,4 +84,4 @@
   .menu__logo a {
     padding: 10px 20px;
   }
-}
+}

client/src/components/views/NavBar/Sections/RightMenu.js

@@ -37,8 +37,12 @@ function RightMenu(props) {
           <a href="/product/upload">Upload</a>
         </Menu.Item>
 
+        <Menu.Item key="history">
+          <a href="/history">History</a>
+        </Menu.Item>
+
         <Menu.Item key="cart">
-          <Badge count={1}>
+          <Badge count={user.userData && user.userData.cart.length}>
             <a href="/user/cart" style={{ marginRight: -22, color: "#667777" }}>
               <Icon
                 type="shopping-cart"

client/src/components/views/UploadProductPage/UploadProductPage.js

@@ -66,7 +66,7 @@ function UploadProductPage(props) {
         alert("Product posted!");
         props.history.push("/");
       } else {
-        alert("Failed to Upload Product :(");
+        alert("You have been 404'd. Failed to load page.");
       }
     });
   };

server/routes/users.js

@@ -204,4 +204,12 @@ router.post("/successBuy", auth, (req, res) => {
   );
 });
 
+router.get("/getHistory", auth, (req, res) => {
+  User.findOne({ _id: req.user._id }, (err, doc) => {
+    let history = doc.history;
+    if (err) return res.status(400).send(err);
+    return res.status(200).json({ success: true, history });
+  });
+});
+
 module.exports = router;