solved tokens conflict

relates #28

client/src/App.css

@@ -115,7 +115,7 @@ button.btn.buy-btn {
 
 /* Start Styling Products Section */
 section.products-list {
-    padding: 7% 4%;
+    padding:11% 4%;
     display: flex;
     align-items: center;
     flex-wrap: wrap;
@@ -388,4 +388,13 @@ button:hover{
 }
 .filters input:first-child{
     padding: 5px;
+}
+
+h1.allowed {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
+    height: 100vh;
+    color: orange;
 }

client/src/App.jsx

@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Routes, Route } from "react-router-dom";
+import axios from "axios";
 import Navbar from "./components/Navbar/Navbar";
 import Landing from "./components/Navbar/Landing";
 import FilterBar from "./components/Products/Sidebar";
@@ -10,15 +11,32 @@ import Products from "./components/Products/Products";
 import Footer from "./components/Products/Footer";
 import "./App.css";
 import FilterBarByProduct from "./components/Products/SidebarByProducts";
+import SignIn from "./components/Navbar/Signin";
 
 function App() {
   const [products, setProducts] = useState([]);
   const [pageNum, setPageNum] = useState(0);
   const [offset, setOffset] = useState(0);
+  const [isLogged, setIsLogged] = useState({});
+  const [showForm, setShowForm] = useState(false);
+
+  console.log(isLogged);
+
+  useEffect(() => {
+    axios
+      .get("/isLogged")
+      .then((data) => setIsLogged(data.data))
+      .catch((err) => console.log(err));
+  }, []);
 
   return (
     <>
-      <Navbar setOffset={setOffset} setPageNum={setPageNum} />
+      <Navbar
+        setOffset={setOffset}
+        isLogged={isLogged}
+        showForm={showForm}
+        setShowForm={setShowForm}
+      />
       <Routes>
         <Route
           element={
@@ -32,7 +50,7 @@ function App() {
                 setPageNum={setPageNum}
               />
               <ProductsList products={products} />
-              <Pagination pageNum={pageNum}  setOffset={setOffset} />
+              <Pagination pageNum={pageNum} setOffset={setOffset} />
               <Footer />
             </>
           }
@@ -42,19 +60,27 @@ function App() {
         <Route
           element={
             <>
-
-              <FilterBarByProduct   setProducts={setProducts}
+              <FilterBarByProduct
+                setProducts={setProducts}
                 offset={offset}
                 setOffset={setOffset}
                 pageNum={pageNum}
-                setPageNum={setPageNum}/>
+                setPageNum={setPageNum}
+              />
               <ProductsList products={products} />
-              <Pagination pageNum={pageNum} products={products} setOffset={setOffset} />
+              <Pagination
+                pageNum={pageNum}
+                products={products}
+                setOffset={setOffset}
+              />
             </>
           }
           path="/products"
         />
-        <Route element={<Cart />} path="/cart" />
+        <Route
+          element={<Cart isLogged={isLogged} setShowForm={setShowForm} />}
+          path="/cart"
+        />
       </Routes>
     </>
   );

client/src/components/Cart/Cart.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import axios from "axios";
 import CartProduct from "./CartProduct";
 
-function Cart() {
+function Cart({ isLogged, setShowForm }) {
   const [cartProducts, setCartProducts] = useState([]);
   const [totalPrice, setTotalPrice] = useState(0);
 
@@ -12,16 +12,11 @@ function Cart() {
     });
 
     axios("/api/v1/cart/get-totalPrice").then(({ data }) => {
-      console.log(data);
       setTotalPrice(data);
     });
-
   }, []);
 
-
-
-
-  return (
+  return !isLogged.msg ? (
     <div>
       {cartProducts.map((product) => (
         <CartProduct
@@ -32,9 +27,12 @@ function Cart() {
         />
       ))}
       <p>Total Price {totalPrice}</p>
-      <p>Total Count {cartProducts.reduce((acc, cur) => acc += cur.count, 0)}</p>
-
+      <p>
+        Total Count {cartProducts.reduce((acc, cur) => (acc += cur.count), 0)}
+      </p>
     </div>
+  ) : (
+    <h1 className="allowed">Not Allowed</h1>
   );
 }
 

client/src/components/Cart/CartProduct.jsx

@@ -12,7 +12,7 @@ function CartProduct({ product, cartProducts, setCartProducts }) {
   };
 
   const handleUpdateCount = () => {
-    console.log('from handleUpdateCount on save');
+    console.log("from handleUpdateCount on save");
     axios.post("/api/v1/cart/update-product", { newCount, id });
   };
 

client/src/components/Navbar/Navbar.jsx

@@ -1,26 +1,35 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import SignIn from "./Signin";
+import Signout from "./Signout";
 import SignUp from "./Signup";
 
-function Navbar({setOffset}) {
+function Navbar({ setOffset, isLogged, showForm, setShowForm }) {
   return (
     <header>
       <nav>
         <img src="./assets/middle.png" alt="" className="middle" />
         <h1>BIKA</h1>
         <ul className="nav-list">
           <li className="nav-list-item">
-            <NavLink onClick={()=>{
-              setOffset(0)
-            }} to="/" className="nav-item">
+            <NavLink
+              onClick={() => {
+                setOffset(0);
+              }}
+              to="/"
+              className="nav-item"
+            >
               Home
             </NavLink>
           </li>
           <li className="nav-list-item">
-            <NavLink onClick={()=>{
-              setOffset(0)
-            }} to="/products" className="nav-item">
+            <NavLink
+              onClick={() => {
+                setOffset(0);
+              }}
+              to="/products"
+              className="nav-item"
+            >
               Products
             </NavLink>
           </li>
@@ -29,8 +38,14 @@ function Navbar({setOffset}) {
               Cart
             </NavLink>
           </li>
-          <SignUp />
-          <SignIn />
+          {isLogged.msg ? (
+            <>
+              <SignUp />
+              <SignIn showForm={showForm} setShowForm={setShowForm} />
+            </>
+          ) : (
+            <Signout />
+          )}
         </ul>
       </nav>
     </header>

client/src/components/Navbar/Signin.jsx

@@ -2,8 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import Axios from "axios";
 import SignInForm from "./SignInForm";
 
-function SignIn() {
-  const [showForm, setShowForm] = useState(false);
+function SignIn({ showForm, setShowForm }) {
   const [userData, setUserData] = useState({
     email: "",
     password: "",

client/src/components/Navbar/Signout.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+import axios from "axios";
+
+function Signout() {
+  const signout = () => {
+    axios
+      .get("/signout")
+      .then((data) => (window.location.href = "/"))
+      .catch((err) => console.log(err));
+  };
+  return (
+    <button onClick={signout} type="submit" className="nav-item btn">
+      Sign out
+    </button>
+  );
+}
+
+export default Signout;

client/src/components/Products/Pagination.jsx

@@ -1,12 +1,16 @@
 import React from "react";
 
-function Pagination({ setOffset, pageNum,products }) {
+function Pagination({ setOffset, pageNum, products }) {
   return (
     <div className="pagenation">
       {new Array(pageNum).fill(0).map((ele, i) => (
-        <button key={i} onClick={() => {
-          console.log(products);
-          setOffset(i * 6)}}>
+        <button
+          key={i}
+          onClick={() => {
+            console.log(products);
+            setOffset(i * 6);
+          }}
+        >
           {i + 1}
         </button>
       ))}

client/src/components/Products/SidebarByProducts.jsx

@@ -1,15 +1,19 @@
 import React, { useState, useEffect } from "react";
 import Axios from "axios";
 
-function FilterBarByProduct({ setProducts, offset, setOffset, pageNum, setPageNum }) {
-
-
+function FilterBarByProduct({
+  setProducts,
+  offset,
+  setOffset,
+  pageNum,
+  setPageNum,
+}) {
   useEffect(() => {
     const filterData = {
-      search:'',
-      category:'',
-      minPrice:0,
-      maxPrice:100,
+      search: "",
+      category: "",
+      minPrice: 0,
+      maxPrice: 100,
       offset,
     };
     Axios.post("/product", filterData)
@@ -18,11 +22,9 @@ function FilterBarByProduct({ setProducts, offset, setOffset, pageNum, setPageNu
         setPageNum(Math.floor(+res.data.rows[0].count / 6) + 1);
       })
       .catch(console.log);
-  }, [pageNum,offset]);
+  }, [pageNum, offset]);
 
-  return (
-    <div  />
-  );
+  return <div />;
 }
 
 export default FilterBarByProduct;

src/app.js

@@ -27,6 +27,8 @@ if (process.env.NODE_ENV === "production") {
 app.use((err, req, res, next) => {
   console.log("Error: ", err);
   if (err.status) {
+    // return res.status(err.status).json({ msg: err.msg, status: err.status });
+
     return res.json({ msg: err.msg, status: err.status });
   }
   return res.status(500).send("Server Error: ", err);

src/controllers/user/index.js

@@ -1,7 +1,9 @@
 const signup = require("./signup");
 const signin = require("./signin");
+const signout = require("./signout");
 
 module.exports = {
   signin,
   signup,
+  signout,
 };

src/controllers/user/signout.js

@@ -0,0 +1,5 @@
+const signout = (req, res, next) => {
+  res.clearCookie("jwt").send("Signed Out");
+};
+
+module.exports = signout;

src/database/config/build.sql

@@ -85,7 +85,4 @@ INSERT INTO cart(user_id, product_id, count) VALUES
 (1,2, 1),(2,2,2),(1,3, 7),(1,6,4),(1,5, 9),(1,2,4),(4,6,55),(4,5, 9),(4,2,4);
 
 
-COMMIT;
-
-INSERT INTO cart(user_id, product_id, count) VALUES
-(4,6,55),(4,5, 9),(4,2,4);
+COMMIT;

src/database/quiries/index.js

@@ -3,7 +3,7 @@ const {
   getProdcutsFromCart,
   deleteSingleProduct,
   updateCount,
-  totalPriceQuery
+  totalPriceQuery,
 } = require("./cart");
 
 const { getFilteredProducts, addToCart } = require("./products");
@@ -16,5 +16,5 @@ module.exports = {
   getProdcutsFromCart,
   deleteSingleProduct,
   updateCount,
-  totalPriceQuery
+  totalPriceQuery,
 };

src/routes/userRouter.js

@@ -1,8 +1,11 @@
 const userRouter = require("express").Router();
 const { signup } = require("../controllers/user");
 const { signin } = require("../controllers/user");
+const { signout } = require("../controllers/user");
+const authUser = require("../utils/authUser");
 
 userRouter.post("/api/v1/users/signup", signup);
 userRouter.post("/api/v1/users/signin", signin);
-
+userRouter.get("/isLogged", authUser);
+userRouter.get("/signout", signout);
 module.exports = userRouter;

src/utils/authUser.js

@@ -0,0 +1,20 @@
+/* eslint-disable no-multi-assign */
+const { verify } = require("jsonwebtoken");
+const CustomError = require("./CustomError");
+require("env2")(".env");
+
+module.exports = authUser = (req, res, next) => {
+  try {
+    const existedToken = req.cookies.jwt;
+    if (!existedToken) throw new CustomError("You are not authorized!", 400);
+    verify(existedToken, process.env.SECRET_KEY, (err, decoded) => {
+      if (err) {
+        throw new CustomError("Token is being manipulated!", 400);
+      } else {
+        res.send(decoded);
+      }
+    });
+  } catch (err) {
+    next(err);
+  }
+};