0cb862e4-0fa2-47c7-95e9-d93125127b5b

Build # 0cb862e4-0fa2-47c7-95e9-d93125127b5b

Build Type

push

circleci

Committed by GitHub

Commit Message

feature(navbar/sidebar):Dashboard sidebar/navbar and main navbar [Finishes #185032608] (#33)

Run Details

452 of 602 branches covered (75.08%)

Branch coverage included in aggregate %.

309 of 309 new or added lines in 56 files covered. (100.0%)

1056 of 1253 relevant lines covered (84.28%)

23.67 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

44.12

/src/components/Navbar.js

import React, { useState, useEffect } from "react";
import CartIcon from "./cart/CartIcon";
import logo from "../assets/images/logo-image.png";
import SearchInput from "./products/searchProduct/searchInput";
import { useNavigate } from "react-router";
import { useDispatch, useSelector } from "react-redux";
import { userProfileUpdate } from "../redux/features/slices/profileUpdate";
import { getUserProfile } from "../redux/features/actions/getProfile";
import whiteTrojan from "../assets/images/whiteTrojan.png";
import Logo from "./logo";
import jwtDecode from "jwt-decode";

const Navbar = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const { userProfile } = useSelector(userProfileUpdate);
  useEffect(() => {
    if (userProfile.length === 0) {
      dispatch(getUserProfile());
    }
  }, [dispatch]);
  const [open, setOpen] = useState(true);
  const toggleMenu = () => {
    setOpen(!open);
  };
  const handleDashboard = () => {
    const { data } = jwtDecode(localStorage.getItem("token"));
    if (data.role === "seller") navigate("/dashboard/seller");
    if (data.role === "buyer") navigate("/products/wishlist");
    if (data.role === "admin") navigate("/dashboard/admin/users");
  };
  return (
    <div className="navbar">
      <nav className="shadow-sm mb-8 px-10 pb-3 pt-4 bg-whiteColor hidden lg:flex lg:justify-between lg:items-center mt-[-6px]">
        <div onClick={() => navigate("/")}>
          <Logo />
        </div>
        <SearchInput />
        <div className="mt-[7px]">
          <CartIcon />
        </div>
        {/* <div className="w-[6vw] flex justify-between items-center"> */}
        <div onClick={handleDashboard} className="relative dashboard-icon">
          <span className="absolute p-1 bg-[#4C4349] text-white text-xs bottom-[-20px]">
            Dashboard
          </span>
          <span>
            <ion-icon name="albums-outline"></ion-icon>
          </span>
        </div>
        <ion-icon name="notifications-outline"></ion-icon>
        {/* </div> */}

        <div className="flex flex-col justify-around items-center">
          <div
            onClick={() => navigate("/user/profile")}
            className="rounded-full overflow-hidden w-10 h-10 flex justify-center items-center"
          >
            <img
              src={userProfile?.profilePic}
              alt="profile-image"
              className="w-10 h-10"
            />
          </div>
          <p className="max-w-[100px] text-center text-xs">
            {userProfile?.name}
          </p>
        </div>
      </nav>
      <nav className="lg:hidden my-3 nav-small max-h-[300px]">
        <div className="">
          <div className="mx-3 mt-3 w-[90vw] flex justify-between items-center">
            <div className="flex flex-col justify-around items-center">
              <div
                onClick={() => navigate("/user/profile")}
                className="rounded-full overflow-hidden w-10 h-10 flex justify-center items-center"
              >
                <img
                  src={userProfile?.profilePic}
                  alt="profile-image"
                  className="w-10 h-10"
                />
              </div>
              <p className="text-xs text-center max-w-[100px]">
                {userProfile?.name}
              </p>
            </div>
            <div
              className="z-20 fixed right-[3vw] top-[20px]"
              onClick={toggleMenu}
            >
              {open ? (
                <i
                  className="fa fa-bars fa-2xl text-primary transition-all duration-300 ease-in"
                  aria-hidden="true"
                ></i>
              ) : (
                <i
                  className="fa fa-times fa-2xl text-white transition-all duration-300 ease-in"
                  aria-hidden="true"
                ></i>
              )}
            </div>
          </div>
          <div className="flex justify-around items-center py-3 shadow-lg w-100vw mb-[5vw] mx-[3vw]">
            <div className="max-w-[70vw] ml-[3vw]">
              <SearchInput />
            </div>
            <div className="flex justify-between items-center w-[30vw]  sm:w-[15vw] mr-[3vw]">
              <CartIcon />
              <ion-icon name="notifications-outline"></ion-icon>
            </div>
          </div>
          <div
            className={`nav-pop text-white py-5 bg-dark flex flex-col items-start z-10 ${
              open
                ? "invisible translate-x-[100vw] z-0 animate"
                : "visible translate-x-[0vw]"
            }`}
          >
            <div className="top-bar absolute top-0 w-full h-[70px] shadow-sm shadow-black">
              <div className="absolute top-[15px] left-[5%] md:left-[10%] max-w-[75vw]">
                <div className="flex justify-around items-center">
                  <img
                    src={whiteTrojan}
                    alt="logo-icon"
                    className="inline w-9 ml-9"
                  />
                </div>
              </div>
            </div>
            <div className="absolute top-[60px] w-full">
              <div className="h-[200px] mt-10 nav-links">
                <ul className="h-full flex flex-col justify-around items-center">
                  <li onClick={() => navigate("/")}>
                    <a href="#" className="flex items-center justify-start">
                      <ion-icon name="home-outline"></ion-icon>
                      <span className="ml-3 text-lg">Home</span>
                    </a>
                  </li>
                  <li onClick={() => navigate("/products/wishlist")}>
                    <a href="#" className="flex items-center justify-start">
                      <ion-icon name="albums-outline"></ion-icon>
                      <span className="ml-3 text-lg">Dashboard</span>
                    </a>
                  </li>
                  <li onClick={() => navigate("/user/profile")}>
                    <a href="#" className="flex items-center justify-start">
                      <ion-icon name="person-outline"></ion-icon>
                      <span className="ml-3 text-lg">Profile</span>
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  );
};

export default Navbar;

1	import React, { useState, useEffect } from "react";
2	import CartIcon from "./cart/CartIcon";
3	import logo from "../assets/images/logo-image.png";
4	import SearchInput from "./products/searchProduct/searchInput";
5	import { useNavigate } from "react-router";
6	import { useDispatch, useSelector } from "react-redux";
7	import { userProfileUpdate } from "../redux/features/slices/profileUpdate";
8	import { getUserProfile } from "../redux/features/actions/getProfile";
9	import whiteTrojan from "../assets/images/whiteTrojan.png";
10	import Logo from "./logo";
11	import jwtDecode from "jwt-decode";
12
13	const Navbar = () => {	12✔
14	const navigate = useNavigate();	80✔
15	const dispatch = useDispatch();	72✔
16	const { userProfile } = useSelector(userProfileUpdate);	72✔
17	useEffect(() => {	72✔
18	if (userProfile.length === 0) {	26✔
19	dispatch(getUserProfile());	18✔
20	}
21	}, [dispatch]);
22	const [open, setOpen] = useState(true);	72✔
23	const toggleMenu = () => {	72✔
24	setOpen(!open);	×
25	};
26	const handleDashboard = () => {	72✔
27	const { data } = jwtDecode(localStorage.getItem("token"));	×
28	if (data.role === "seller") navigate("/dashboard/seller");	×
29	if (data.role === "buyer") navigate("/products/wishlist");	×
30	if (data.role === "admin") navigate("/dashboard/admin/users");	×
31	};
32	return (	72✔
33	<div className="navbar">
34	<nav className="shadow-sm mb-8 px-10 pb-3 pt-4 bg-whiteColor hidden lg:flex lg:justify-between lg:items-center mt-[-6px]">
35	<div onClick={() => navigate("/")}>	×
36	<Logo />
37	</div>
38	<SearchInput />
39	<div className="mt-[7px]">
40	<CartIcon />
41	</div>
42	{/* <div className="w-[6vw] flex justify-between items-center"> */}
43	<div onClick={handleDashboard} className="relative dashboard-icon">
44	<span className="absolute p-1 bg-[#4C4349] text-white text-xs bottom-[-20px]">
45	Dashboard
46	</span>
47	<span>
48	<ion-icon name="albums-outline"></ion-icon>
49	</span>
50	</div>
51	<ion-icon name="notifications-outline"></ion-icon>
52	{/* </div> */}
53
54	<div className="flex flex-col justify-around items-center">
55	<div
56	onClick={() => navigate("/user/profile")}	×
57	className="rounded-full overflow-hidden w-10 h-10 flex justify-center items-center"
58	>
59	<img
60	src={userProfile?.profilePic}
61	alt="profile-image"
62	className="w-10 h-10"
63	/>
64	</div>
65	<p className="max-w-[100px] text-center text-xs">
66	{userProfile?.name}
67	</p>
68	</div>
69	</nav>
70	<nav className="lg:hidden my-3 nav-small max-h-[300px]">
71	<div className="">
72	<div className="mx-3 mt-3 w-[90vw] flex justify-between items-center">
73	<div className="flex flex-col justify-around items-center">
74	<div
75	onClick={() => navigate("/user/profile")}	×
76	className="rounded-full overflow-hidden w-10 h-10 flex justify-center items-center"
77	>
78	<img
79	src={userProfile?.profilePic}
80	alt="profile-image"
81	className="w-10 h-10"
82	/>
83	</div>
84	<p className="text-xs text-center max-w-[100px]">
85	{userProfile?.name}
86	</p>
87	</div>
88	<div
89	className="z-20 fixed right-[3vw] top-[20px]"
90	onClick={toggleMenu}
91	>
92	{open ? (	72!
93	<i
94	className="fa fa-bars fa-2xl text-primary transition-all duration-300 ease-in"
95	aria-hidden="true"
96	></i>
97	) : (
98	<i
99	className="fa fa-times fa-2xl text-white transition-all duration-300 ease-in"
100	aria-hidden="true"
101	></i>
102	)}
103	</div>
104	</div>
105	<div className="flex justify-around items-center py-3 shadow-lg w-100vw mb-[5vw] mx-[3vw]">
106	<div className="max-w-[70vw] ml-[3vw]">
107	<SearchInput />
108	</div>
109	<div className="flex justify-between items-center w-[30vw] sm:w-[15vw] mr-[3vw]">
110	<CartIcon />
111	<ion-icon name="notifications-outline"></ion-icon>
112	</div>
113	</div>
114	<div
115	className={`nav-pop text-white py-5 bg-dark flex flex-col items-start z-10 ${
116	open	72!
117	? "invisible translate-x-[100vw] z-0 animate"
118	: "visible translate-x-[0vw]"
119	}`}
120	>
121	<div className="top-bar absolute top-0 w-full h-[70px] shadow-sm shadow-black">
122	<div className="absolute top-[15px] left-[5%] md:left-[10%] max-w-[75vw]">
123	<div className="flex justify-around items-center">
124	<img
125	src={whiteTrojan}
126	alt="logo-icon"
127	className="inline w-9 ml-9"
128	/>
129	</div>
130	</div>
131	</div>
132	<div className="absolute top-[60px] w-full">
133	<div className="h-[200px] mt-10 nav-links">
134	<ul className="h-full flex flex-col justify-around items-center">
135	<li onClick={() => navigate("/")}>	×
136	<a href="#" className="flex items-center justify-start">
137	<ion-icon name="home-outline"></ion-icon>
138	<span className="ml-3 text-lg">Home</span>
139	</a>
140	</li>
141	<li onClick={() => navigate("/products/wishlist")}>	×
142	<a href="#" className="flex items-center justify-start">
143	<ion-icon name="albums-outline"></ion-icon>
144	<span className="ml-3 text-lg">Dashboard</span>
145	</a>
146	</li>
147	<li onClick={() => navigate("/user/profile")}>	×
148	<a href="#" className="flex items-center justify-start">
149	<ion-icon name="person-outline"></ion-icon>
150	<span className="ml-3 text-lg">Profile</span>
151	</a>
152	</li>
153	</ul>
154	</div>
155	</div>
156	</div>
157	</div>
158	</nav>
159	</div>
160	);
161	};
162
163	export default Navbar;

atlp-rwanda / trojans-ec-fe / 0cb862e4-0fa2-47c7-95e9-d93125127b5b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous