Changeset 16237c4 for frontend/src/components/Header.js

Timestamp:

09/08/22 12:38:24 (22 months ago)

Author:

Nace Gjorgjievski <nace.gorgievski123@…>

Branches:

master

Children:

ee05663

Parents:

717ceae

Message:

Added Order Functionality

File:

• frontend/src/components/Header.js (modified) (7 diffs)

frontend/src/components/Header.js

@@ -16 +16 @@
 import ShoppingBasketIcon from "@mui/icons-material/ShoppingCart";
 import MenuIcon from "@mui/icons-material/Menu";
-import { Link } from "react-router-dom";
+import { Link, NavLink, useNavigate } from "react-router-dom";
 import logo2 from "../Images/logo2.png";
 import Badge from "react-bootstrap/Badge";
@@ -22 +22 @@
 import { Store } from "../Store";
 import { useContext } from "react";
+import NavDropdown from "react-bootstrap/NavDropdown";
 
 const toggleMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".mobile-menu-container");
   menu.classList.remove("hidden");
@@ -30 +32 @@
 
 const toggleSubMenu = (event) => {
+  event.stopPropagation();
   let menu = document.querySelector(".subDropdown");
   menu.classList.remove("hidden");
@@ -68 +71 @@
 
 function Header() {
-  const { state } = useContext(Store);
-  const { cart } = state;
+  const { state, dispatch: ctxDispatch } = useContext(Store);
+  const { cart, userInfo } = state;
+  const navigate = useNavigate();
+
+  const signoutHandler = () => {
+    ctxDispatch({ type: "USER_SIGNOUT" });
+    localStorage.removeItem("userInfo");
+    localStorage.removeItem("shippingAddress");
+    localStorage.removeItem("paymentMethod");
+  };
+
   return (
     <div className="header">
@@ -78 +90 @@
           onClick={toggleMenu}
         />
-        <img className="header__icon" src={logo2} alt="logo"></img>
+        <img
+          className="header__icon"
+          src={logo2}
+          alt="logo"
+          onClick={() => {
+            navigate("/");
+          }}
+        ></img>
       </div>
       <div className="mobile-menu-container hidden">
@@ -85 +104 @@
         </div>
         <ul className="mobile-menu">
-          <li>Почетна</li>
+          <Link
+            to="/"
+            style={{ textDecoration: "none", color: "black" }}
+            onClick={closeMenu}
+          >
+            <li>Почетна</li>
+          </Link>
           <li onClick={toggleSubMenu} className="subMenu">
             Производи <ArrowDropDownIcon />
@@ -492 +517 @@
       <div className="header__right">
         <div className="header__buttons">
-          <span>
-            <AccountCircleIcon className="header__login" fontSize="large" />
-            <p>Најави се</p>
-          </span>
+          {userInfo ? (
+            <NavDropdown
+              title={
+                <span>
+                  <AccountCircleIcon
+                    className="header__login"
+                    fontSize="large"
+                  />
+                  <p>{userInfo.name}</p>
+                </span>
+              }
+              id="basic-nav-dropdown"
+            >
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/profile");
+                }}
+              >
+                Профил
+              </NavDropdown.Item>
+
+              <NavDropdown.Item
+                onClick={() => {
+                  navigate("/orderhistory");
+                }}
+              >
+                Нарачки
+              </NavDropdown.Item>
+
+              <NavDropdown.Divider />
+              <Link
+                className="drowdown-item"
+                to="#signout"
+                onClick={signoutHandler}
+              >
+                Одјави се
+              </Link>
+            </NavDropdown>
+          ) : (
+            <Link
+              to={"/signin"}
+              className="link"
+              onClick={() => {
+                navigate("/orderhistory");
+              }}
+            >
+              <span>
+                <AccountCircleIcon className="header__login" fontSize="large" />
+                <p>Најави се</p>
+              </span>
+            </Link>
+          )}
+
           <Link to="/cart" className="badgee">
             <span>