90845812-c54d-4e09-9dd2-7930dd4bf5a0

Committed 17 Jul 2024 11:51PM UTC coverage: 92.467% (+0.2%) from 92.247%

Build # 90845812-c54d-4e09-9dd2-7930dd4bf5a0

Build Type

Pull #55

circleci

Committed by

mpanoathos

Commit Message

Fix(protectRoutes) Protect routes & Adding dashboard icon on navbar

Pull Request Pull Request #55: Fix: Protect routes & Adding dashboard icon on navbar

Run Details

675 of 812 branches covered (83.13%)

Branch coverage included in aggregate %.

21 of 26 new or added lines in 5 files covered. (80.77%)

3 existing lines in 2 files now uncovered.

2050 of 2135 relevant lines covered (96.02%)

12.13 hits per line

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

89.22

/src/components/Navbar.tsx

import React, { useState } from "react";
import Logo from "../assets/images/Bit.Shop.svg";
import { RxHamburgerMenu } from "react-icons/rx";
import { RxCross2 } from "react-icons/rx";
import { Link } from "react-router-dom";
import { CiSearch } from "react-icons/ci";
import { CiHeart } from "react-icons/ci";
import { IoCartOutline } from "react-icons/io5";
import { IoNotificationsOutline } from "react-icons/io5";
import { RxAvatar } from "react-icons/rx";
import { IoLocationOutline } from "react-icons/io5";
import { IoChatbubblesOutline } from "react-icons/io5";
import { IoMdHome } from "react-icons/io";
import { shallowEqual, useSelector } from "react-redux";
import { RootState } from "../redux/store";
import SearchComponent from "./SearchComponent";
import Badge from "@mui/material/Badge";
import "react-toastify/dist/ReactToastify.css";
import { useNotifications } from "./notificationtoast";
import NotificationPane from "../views/NotificationPane";
import { FaTimes } from "react-icons/fa";
import Chat from "../views/chat/Chat";
import { TbDashboard } from "react-icons/tb";
import Logout from "./Logout";
import { CiSettings } from "react-icons/ci";

interface NavbarProps {
  burgerShown?: boolean;
  showSearch?: boolean;
}

const Navbar: React.FC<NavbarProps> = (props) => {
  const isLoggedIn = useSelector(
    (state: RootState) => state.auth.isLoggedIn,
    shallowEqual,
  );
   const authRole = useSelector(
    (state: RootState) => state.auth.authRole,
    shallowEqual,
  );
  const unreadMessagesCount = useSelector(
    (state: RootState) => state.chat.unreadMessagesCount,
  );
  const [isChatOpen, setIsChatOpen] = useState(false);
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);

  const toggleChat = () => {
    setIsChatOpen(!isChatOpen);
  };
  const { count } = useSelector((state: any) => state.cart);
  const wishListCount = useSelector((state: any) => state.wishList?.count ?? 0);
  const [burgerShown, setIsBurgerShown] = useState(props.burgerShown || false);
  const [showSearch, setShowSearch] = useState(props.showSearch || false);
  const { unreadCount } = useNotifications();
  const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);


  return (
    <div className=" w-full flex flex-col  ">
    <nav className="navbar-container  w-full border-b-1 p-8 flex-between space-x-2 border-b-[1px] border-gray_100">
      <div className="nav-logo w-[20%] ">
        <img src={Logo} alt="Logo" className="w-24 object-contain " />
      </div>
      <div className="nav-link flex-between  w-[30%] hidden tablet:flex">
        <ul className="flex-between space-x-4">
          <li data-testid="mobile-menu-home">
            <Link to="" className="text-sm">
              Home
            </Link>
          </li>
          <li>
            <Link to="/about" className="text-sm">
              About
            </Link>
          </li>
          <li>
            <Link to="" className="text-sm">
              Shop
            </Link>
          </li>
          <li>
            <Link to="" className="text-sm">
              Contact
            </Link>
          </li>
        </ul>
      </div>
      <div className="nav-icons flex-between hidden tablet:flex">
        <ul className="flex-between space-x-4">
          <li>
            <div className="search-container bg-gray rounded-sm flex-between space-x-2 p-2 cursor-pointer" onClick={()=>setShowSearch(!showSearch)}>
              <p className="text-xs">search here</p>
              <CiSearch />
            </div>
          </li>
          {isLoggedIn && (
              <>
                <li>
                  <Link to="/wishList" className="text-lg">
                    {" "}
                    <CiHeart size={24} aria-label="Heart" />
                  </Link>
                </li>
                <li>
                  <Link to="/cart" className="text-lg relative">
                    {" "}
                    <IoCartOutline size={24} aria-label="Cart"/>
                    {count >0 && <p className="bg-red-500 p-1 text-1 flex items-center justify-center text-white absolute rounded-full bottom-[-3px] right-[-3px] text-[8px] h-[13px] w-[13px]">{count}</p>}
                  </Link>
                </li>
                  <li>
                    <Link to="" className="text-lg" data-testid="notifications-link">
                      <Badge badgeContent={unreadCount} color="primary">
                        <IoNotificationsOutline
                          size={24}
                          onClick={() => {
                            setIsModalOpen(true);
                          }}
                        />
                      </Badge>
                    </Link>
                  </li>
                  <li>
                    <Link to="/orders" className="text-lg" data-testid="orders-link">
                      <IoLocationOutline size={24} />
                    </Link>
                  </li>
                
                  <li>
                      <button
                        data-testid="chat-button"
                        onClick={toggleChat}
                        className="text-black p-3 rounded-full"
                      >
                        <IoChatbubblesOutline size={24} />
                      </button>
                      {isChatOpen && (
                        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-end items-end z-40">
                          <div
                            data-testid="chat-container"
                            className="bg-white w-full max-w-sm md:max-w-lg h-5/6 rounded shadow-lg p-4 relative overflow-hidden mr-10 mb-10"
                          >
                            <button
                              data-testid="close-button"
                              onClick={toggleChat}
                              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
                            >
                              <FaTimes size={24} />
                            </button>
                            <Chat />
                          </div>
                        </div>
                      )}
                    </li>
              </>
            )}
          </ul>
        </div>
        <NotificationPane
        data-testid="notification-pane"
          open={isModalOpen}
          onClose={() => setIsModalOpen(false)}
        />
        <div className=" hidden tablet:flex">
          {!isLoggedIn ? (
            <Link to="/login" className="flex gap-2 rounded-full bg-black p-3 px-6">
                <p className="text-white text-sm">Log in</p>
            </Link>
          ) : (
            <button onClick={() => setIsProfileModalOpen(true)} className="text-sm w-[5%]" data-testid="profile-button">
              <RxAvatar className="text-2xl" />
            </button>
          )}
        </div>
        <div className="flex gap-10 items-center">
          <CiSearch
            className="text-xl flex tablet:hidden"
            onClick={() => setShowSearch(!showSearch)}
          />
          {!isLoggedIn ? (
            <Link to="/login" className="flex gap-2 rounded-full bg-black p-3 px-6 tablet:hidden">
                <p className="text-white text-sm">Log in</p>
            </Link>
          ) : (
            <button
              onClick={() => setIsBurgerShown(!burgerShown)}
              className="tablet:hidden"
              data-testid="burger-button"
            >
              {!burgerShown ? (
                <RxHamburgerMenu className="text-3xl" />
              ) : (
                <RxCross2 className="text-3xl" />
              )}
            </button>
          )}
        </div>

  {isLoggedIn && burgerShown && (
  <div className="bg-black flex tablet:hidden z-10 absolute w-[80%] tablet:w-[60%] top-[10%] right-[15%] border border-gray_100 rounded-sm" data-testid="mobile-menu">
    <ul className="w-full p-4 space-y-2">
      <li className="bg-gray rounded-sm">
        <Link to="" className="text-lg">
          <div className="flex-between justify-center space-x-1 p-2">
            <IoMdHome />
            <p className="text-xs">Home</p>
          </div>
        </Link>
      </li>
      <li className="rounded-sm hover:bg-white">
        <Link
          to=""
          className="text-lg"
          onClick={() => {
            setIsBurgerShown(false);
            setIsModalOpen(true);
          }}
        >
          <div className="flex-between justify-center space-x-1 p-2">
            <Badge badgeContent={unreadCount} color="primary">
              <IoNotificationsOutline
                size={24}
                className="text-gray_100"
              />
            </Badge>
            <p className="text-xs text-gray_100">Notifications</p>
            <NotificationPane
              data-testid="notification-pane"
              open={isModalOpen}
              onClose={() => setIsModalOpen(false)}
            />
          </div>
        </Link>
      </li>
      <li className="rounded-sm hover:bg-white transition-all">
        <Link to="/wishList" className="text-lg">
          <div className="flex-between justify-center space-x-1 p-2">
            <Badge badgeContent={wishListCount} color="primary">
              <CiHeart className="text-gray_100" />
            </Badge>
            <p className="text-xs text-gray_100">My wishlist</p>
          </div>
        </Link>
      </li>
      <li className="rounded-sm hover:bg-white transition-all">
        <Link to="/cart" className="text-lg">
          <div className="flex-between justify-center space-x-1 p-2 ">
            <div className="relative">
              <IoCartOutline className="text-gray_100" />
              {count > 0 && (
                <p className="bg-red-500 p-1 text-1 flex items-center justify-center text-white absolute rounded-full top-[-3px] right-[-3px] text-[8px] h-[13px] w-[13px]">
                  {count}
                </p>
              )}
            </div>
            <p className="text-xs text-gray_100">My cart</p>
          </div>
        </Link>
      </li>
      <li className="rounded-sm hover:bg-white transition-all">
        <Link to="/orders" className="text-lg">
          <div className="flex-between justify-center space-x-1 p-2">
            <IoLocationOutline className="text-gray_100" />
            <p className="text-xs text-gray_100">My Orders</p>
          </div>
        </Link>
      </li>
      <li className="flex items-center justify-center space-x-1 p-2 rounded-sm">
        <button
          data-testid="chat-button"
          onClick={toggleChat}
          className="text-gray flex items-center"
        >
          <Badge badgeContent={unreadMessagesCount} color="primary">
            <IoChatbubblesOutline size={17} />
          </Badge>
          <span className="text-xs text-gray_100 ml-1">Chat</span>
        </button>
        {isChatOpen && (
          <div className="fixed inset-0 text-white bg-opacity-50 flex justify-end items-end z-40">
            <div
              data-testid="chat-container"
              className="bg-white w-full max-w-sm md:max-w-lg h-5/6 rounded shadow-lg p-4 relative overflow-hidden mr-10 mb-10"
            >
              <button
                data-testid="close-button"
                onClick={toggleChat}
                className="absolute top-2 right-2 text-black hover:text-gray-700"
              >
                <FaTimes size={24} />
              </button>
              <Chat />
            </div>
          </div>
        )}
      </li>
      <li className="rounded-sm hover:bg-white transition-all">
        <Link
          to="/view-edit-profile"
          className="text-lg"
          onClick={() => setIsBurgerShown(false)}
        >
          <div className="flex-between justify-center space-x-1 p-2">
            <RxAvatar className="text-gray_100" />
            <p className="text-xs text-gray_100">Profile</p>
          </div>
        </Link>
      </li>
      {(authRole === 'seller' || authRole === 'admin') && (
        <li className="rounded-sm hover:bg-white transition-all">
          <Link to={authRole === 'seller' ? '/seller' : '/admin'} className="text-lg">
            <div className="flex-between justify-center space-x-1 p-2">
              <TbDashboard className="text-gray_100" />
              <p className="text-xs text-gray_100">Dashboard</p>
            </div>
          </Link>
        </li>
      )}
      <li className="rounded-sm hover:bg-white transition-all">
        <Link to="/logout" className="text-lg">
          <div className="flex-between justify-center space-x-1 p-2">
            <Logout />
          </div>
        </Link>
      </li>
    </ul>
  </div>
)}

      </nav>
      {showSearch && (
        <div className="transition-all duration-300">
          <SearchComponent />
        </div>
      )}
      {isProfileModalOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
          <div className="bg-white rounded shadow-lg p-4 relative w-64">
            <button data-testid="close-button" onClick={() => setIsProfileModalOpen(false)}
              className="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
              <FaTimes size={24} />
            </button>
            <div className="flex flex-col items-center space-y-4">
              {authRole === "admin" || authRole === "seller" ? (
                <Link to={getDashboardLink(authRole)} className="flex items-center space-x-2">
                  <TbDashboard size={24} />
                  <span>Dashboard</span>
                </Link>
              ) : (
                <Link to="/view-edit-profile" className="flex items-center space-x-2">
                  <CiSettings size={24} />
                  <span>User settings</span>
                </Link>
              )}
                <Logout/>
            </div>
          </div>
        </div>
      )}
    </div>
  );
};

 export const getDashboardLink = (authRole:string) => {
    if (authRole === "seller") {
      return "/seller";
    } else if (authRole === "admin") {
      return "/admin";
    } else {
      return "/profile";
    }
  };
export default Navbar;

1	import React, { useState } from "react";	3✔
2	import Logo from "../assets/images/Bit.Shop.svg";	3✔
3	import { RxHamburgerMenu } from "react-icons/rx";	3✔
4	import { RxCross2 } from "react-icons/rx";	3✔
5	import { Link } from "react-router-dom";	3✔
6	import { CiSearch } from "react-icons/ci";	3✔
7	import { CiHeart } from "react-icons/ci";	3✔
8	import { IoCartOutline } from "react-icons/io5";	3✔
9	import { IoNotificationsOutline } from "react-icons/io5";	3✔
10	import { RxAvatar } from "react-icons/rx";	3✔
11	import { IoLocationOutline } from "react-icons/io5";	3✔
12	import { IoChatbubblesOutline } from "react-icons/io5";	3✔
13	import { IoMdHome } from "react-icons/io";	3✔
14	import { shallowEqual, useSelector } from "react-redux";	3✔
15	import { RootState } from "../redux/store";
16	import SearchComponent from "./SearchComponent";	3✔
17	import Badge from "@mui/material/Badge";	3✔
18	import "react-toastify/dist/ReactToastify.css";	3✔
19	import { useNotifications } from "./notificationtoast";	3✔
20	import NotificationPane from "../views/NotificationPane";	3✔
21	import { FaTimes } from "react-icons/fa";	3✔
22	import Chat from "../views/chat/Chat";	3✔
23	import { TbDashboard } from "react-icons/tb";	3✔
24	import Logout from "./Logout";	3✔
25	import { CiSettings } from "react-icons/ci";	3✔
26
27	interface NavbarProps {
28	burgerShown?: boolean;
29	showSearch?: boolean;
30	}
31
32	const Navbar: React.FC<NavbarProps> = (props) => {	3✔
33	const isLoggedIn = useSelector(	45✔
34	(state: RootState) => state.auth.isLoggedIn,	70✔
35	shallowEqual,
36	);
37	const authRole = useSelector(	44✔
38	(state: RootState) => state.auth.authRole,	70✔
39	shallowEqual,
40	);
41	const unreadMessagesCount = useSelector(	44✔
42	(state: RootState) => state.chat.unreadMessagesCount,	70✔
43	);
44	const [isChatOpen, setIsChatOpen] = useState(false);	44✔
45	const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);	44✔
46
47	const toggleChat = () => {	44✔
48	setIsChatOpen(!isChatOpen);	1✔
49	};
50	const { count } = useSelector((state: any) => state.cart);	70✔
51	const wishListCount = useSelector((state: any) => state.wishList?.count ?? 0);	70!
52	const [burgerShown, setIsBurgerShown] = useState(props.burgerShown \|\| false);	44✔
53	const [showSearch, setShowSearch] = useState(props.showSearch \|\| false);	44✔
54	const { unreadCount } = useNotifications();	44✔
55	const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);	44✔
56
57
58	return (	44✔
59	<div className=" w-full flex flex-col ">
60	<nav className="navbar-container w-full border-b-1 p-8 flex-between space-x-2 border-b-[1px] border-gray_100">
61	<div className="nav-logo w-[20%] ">
62	<img src={Logo} alt="Logo" className="w-24 object-contain " />
63	</div>
64	<div className="nav-link flex-between w-[30%] hidden tablet:flex">
65	<ul className="flex-between space-x-4">
66	<li data-testid="mobile-menu-home">
67	<Link to="" className="text-sm">
68	Home
69	</Link>
70	</li>
71	<li>
72	<Link to="/about" className="text-sm">
73	About
74	</Link>
75	</li>
76	<li>
77	<Link to="" className="text-sm">
78	Shop
79	</Link>
80	</li>
81	<li>
82	<Link to="" className="text-sm">
83	Contact
84	</Link>
85	</li>
86	</ul>
87	</div>
88	<div className="nav-icons flex-between hidden tablet:flex">
89	<ul className="flex-between space-x-4">
90	<li>
91	<div className="search-container bg-gray rounded-sm flex-between space-x-2 p-2 cursor-pointer" onClick={()=>setShowSearch(!showSearch)}>	×
92	<p className="text-xs">search here</p>
93	<CiSearch />
94	</div>
95	</li>
96	{isLoggedIn && (	64✔
97	<>
98	<li>
99	<Link to="/wishList" className="text-lg">
100	{" "}
101	<CiHeart size={24} aria-label="Heart" />
102	</Link>
103	</li>
104	<li>
105	<Link to="/cart" className="text-lg relative">
106	{" "}
107	<IoCartOutline size={24} aria-label="Cart"/>
108	{count >0 && <p className="bg-red-500 p-1 text-1 flex items-center justify-center text-white absolute rounded-full bottom-[-3px] right-[-3px] text-[8px] h-[13px] w-[13px]">{count}</p>}	34✔
109	</Link>
110	</li>
111	<li>
112	<Link to="" className="text-lg" data-testid="notifications-link">
113	<Badge badgeContent={unreadCount} color="primary">
114	<IoNotificationsOutline
115	size={24}
116	onClick={() => {
117	setIsModalOpen(true);	×
118	}}
119	/>
120	</Badge>
121	</Link>
122	</li>
123	<li>
124	<Link to="/orders" className="text-lg" data-testid="orders-link">
125	<IoLocationOutline size={24} />
126	</Link>
127	</li>
128
129	<li>
130	<button
131	data-testid="chat-button"
132	onClick={toggleChat}
133	className="text-black p-3 rounded-full"
134	>
135	<IoChatbubblesOutline size={24} />
136	</button>
137	{isChatOpen && (	21✔
138	<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-end items-end z-40">
139	<div
140	data-testid="chat-container"
141	className="bg-white w-full max-w-sm md:max-w-lg h-5/6 rounded shadow-lg p-4 relative overflow-hidden mr-10 mb-10"
142	>
143	<button
144	data-testid="close-button"
145	onClick={toggleChat}
146	className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
147	>
148	<FaTimes size={24} />
149	</button>
150	<Chat />
151	</div>
152	</div>
153	)}
154	</li>
155	</>
156	)}
157	</ul>
158	</div>
159	<NotificationPane
160	data-testid="notification-pane"
161	open={isModalOpen}
162	onClose={() => setIsModalOpen(false)}	×
163	/>
164	<div className=" hidden tablet:flex">
165	{!isLoggedIn ? (	44✔
166	<Link to="/login" className="flex gap-2 rounded-full bg-black p-3 px-6">
167	<p className="text-white text-sm">Log in</p>
168	</Link>
169	) : (
170	<button onClick={() => setIsProfileModalOpen(true)} className="text-sm w-[5%]" data-testid="profile-button">	1✔
171	<RxAvatar className="text-2xl" />
172	</button>
173	)}
174	</div>
175	<div className="flex gap-10 items-center">
176	<CiSearch
177	className="text-xl flex tablet:hidden"
178	onClick={() => setShowSearch(!showSearch)}	×
179	/>
180	{!isLoggedIn ? (	44✔
181	<Link to="/login" className="flex gap-2 rounded-full bg-black p-3 px-6 tablet:hidden">
182	<p className="text-white text-sm">Log in</p>
183	</Link>
184	) : (
185	<button
186	onClick={() => setIsBurgerShown(!burgerShown)}	5✔
187	className="tablet:hidden"
188	data-testid="burger-button"
189	>
190	{!burgerShown ? (	20✔
191	<RxHamburgerMenu className="text-3xl" />
192	) : (
193	<RxCross2 className="text-3xl" />
194	)}
195	</button>
196	)}
197	</div>
198
199	{isLoggedIn && burgerShown && (	69✔
200	<div className="bg-black flex tablet:hidden z-10 absolute w-[80%] tablet:w-[60%] top-[10%] right-[15%] border border-gray_100 rounded-sm" data-testid="mobile-menu">
201	<ul className="w-full p-4 space-y-2">
202	<li className="bg-gray rounded-sm">
203	<Link to="" className="text-lg">
204	<div className="flex-between justify-center space-x-1 p-2">
205	<IoMdHome />
206	<p className="text-xs">Home</p>
207	</div>
208	</Link>
209	</li>
210	<li className="rounded-sm hover:bg-white">
211	<Link
212	to=""
213	className="text-lg"
214	onClick={() => {
NEW 215	setIsBurgerShown(false);	×
NEW 216	setIsModalOpen(true);	×
217	}}
218	>
219	<div className="flex-between justify-center space-x-1 p-2">
220	<Badge badgeContent={unreadCount} color="primary">
221	<IoNotificationsOutline
222	size={24}
223	className="text-gray_100"
224	/>
225	</Badge>
226	<p className="text-xs text-gray_100">Notifications</p>
227	<NotificationPane
228	data-testid="notification-pane"
229	open={isModalOpen}
NEW 230	onClose={() => setIsModalOpen(false)}	×
231	/>
232	</div>
233	</Link>
234	</li>
235	<li className="rounded-sm hover:bg-white transition-all">
236	<Link to="/wishList" className="text-lg">
237	<div className="flex-between justify-center space-x-1 p-2">
238	<Badge badgeContent={wishListCount} color="primary">
239	<CiHeart className="text-gray_100" />
240	</Badge>
241	<p className="text-xs text-gray_100">My wishlist</p>
242	</div>
243	</Link>
244	</li>
245	<li className="rounded-sm hover:bg-white transition-all">
246	<Link to="/cart" className="text-lg">
247	<div className="flex-between justify-center space-x-1 p-2 ">
248	<div className="relative">
249	<IoCartOutline className="text-gray_100" />
250	{count > 0 && (	8✔
251	<p className="bg-red-500 p-1 text-1 flex items-center justify-center text-white absolute rounded-full top-[-3px] right-[-3px] text-[8px] h-[13px] w-[13px]">
252	{count}
253	</p>
254	)}
255	</div>
256	<p className="text-xs text-gray_100">My cart</p>
257	</div>
258	</Link>
259	</li>
260	<li className="rounded-sm hover:bg-white transition-all">
261	<Link to="/orders" className="text-lg">
262	<div className="flex-between justify-center space-x-1 p-2">
263	<IoLocationOutline className="text-gray_100" />
264	<p className="text-xs text-gray_100">My Orders</p>
265	</div>
266	</Link>
267	</li>
268	<li className="flex items-center justify-center space-x-1 p-2 rounded-sm">
269	<button
270	data-testid="chat-button"
271	onClick={toggleChat}
272	className="text-gray flex items-center"
273	>
274	<Badge badgeContent={unreadMessagesCount} color="primary">
275	<IoChatbubblesOutline size={17} />
276	</Badge>
277	<span className="text-xs text-gray_100 ml-1">Chat</span>
278	</button>
279	{isChatOpen && (	5!
280	<div className="fixed inset-0 text-white bg-opacity-50 flex justify-end items-end z-40">
281	<div
282	data-testid="chat-container"
283	className="bg-white w-full max-w-sm md:max-w-lg h-5/6 rounded shadow-lg p-4 relative overflow-hidden mr-10 mb-10"
284	>
285	<button
286	data-testid="close-button"
287	onClick={toggleChat}
288	className="absolute top-2 right-2 text-black hover:text-gray-700"
289	>
290	<FaTimes size={24} />
291	</button>
292	<Chat />
293	</div>
294	</div>
295	)}
296	</li>
297	<li className="rounded-sm hover:bg-white transition-all">
298	<Link
299	to="/view-edit-profile"
300	className="text-lg"
301	onClick={() => setIsBurgerShown(false)}	1✔
302	>
303	<div className="flex-between justify-center space-x-1 p-2">
304	<RxAvatar className="text-gray_100" />
305	<p className="text-xs text-gray_100">Profile</p>
306	</div>
307	</Link>
308	</li>
309	{(authRole === 'seller' \|\| authRole === 'admin') && (	11✔
310	<li className="rounded-sm hover:bg-white transition-all">
311	<Link to={authRole === 'seller' ? '/seller' : '/admin'} className="text-lg">	2✔
312	<div className="flex-between justify-center space-x-1 p-2">
313	<TbDashboard className="text-gray_100" />
314	<p className="text-xs text-gray_100">Dashboard</p>
315	</div>
316	</Link>
317	</li>
318	)}
319	<li className="rounded-sm hover:bg-white transition-all">
320	<Link to="/logout" className="text-lg">
321	<div className="flex-between justify-center space-x-1 p-2">
322	<Logout />
323	</div>
324	</Link>
325	</li>
326	</ul>
327	</div>
328	)}
329
330	</nav>
331	{showSearch && (	44!
332	<div className="transition-all duration-300">
333	<SearchComponent />
334	</div>
335	)}
336	{isProfileModalOpen && (	45✔
337	<div className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50">
338	<div className="bg-white rounded shadow-lg p-4 relative w-64">
339	<button data-testid="close-button" onClick={() => setIsProfileModalOpen(false)}	1✔
340	className="absolute top-2 right-2 text-gray-500 hover:text-gray-700">
341	<FaTimes size={24} />
342	</button>
343	<div className="flex flex-col items-center space-y-4">
344	{authRole === "admin" \|\| authRole === "seller" ? (	3!
345	<Link to={getDashboardLink(authRole)} className="flex items-center space-x-2">
346	<TbDashboard size={24} />
347	<span>Dashboard</span>
348	</Link>
349	) : (
350	<Link to="/view-edit-profile" className="flex items-center space-x-2">
351	<CiSettings size={24} />
352	<span>User settings</span>
353	</Link>
354	)}
355	<Logout/>
356	</div>
357	</div>
358	</div>
359	)}
360	</div>
361	);
362	};
363
364	export const getDashboardLink = (authRole:string) => {	3✔
365	if (authRole === "seller") {	4✔
366	return "/seller";	1✔
367	} else if (authRole === "admin") {	3✔
368	return "/admin";	1✔
369	} else {
370	return "/profile";	2✔
371	}
372	};
373	export default Navbar;	3✔

atlp-rwanda / e-commerce-bitcrafters-fn / 90845812-c54d-4e09-9dd2-7930dd4bf5a0

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