6edceb3a-90fd-4c8a-87b0-6caa7f98ad08

Committed 30 Jun 2024 12:42PM UTC coverage: 93.662% (-3.6%) from 97.248%

Build # 6edceb3a-90fd-4c8a-87b0-6caa7f98ad08

Build Type

Pull #24

circleci

Committed by

EricNiyo73

Commit Message

view all accounts

Pull Request Pull Request #24: [187364690]:admin should be to view all accounts and set permissions or roles

Run Details

218 of 258 branches covered (84.5%)

Branch coverage included in aggregate %.

234 of 241 new or added lines in 15 files covered. (97.1%)

4 existing lines in 1 file now uncovered.

580 of 594 relevant lines covered (97.64%)

7.08 hits per line

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

80.49

/src/components/SideNav.tsx

import profileImage from "../assets/images/profileImage.svg";

import React, { useEffect, useState } from "react";
import Logo from "../assets/images/Bit.Shop.svg";
import { CiSearch } from "react-icons/ci";
import {
  MdSpaceDashboard,
  MdOutlineSpaceDashboard,
  MdShoppingCart,
  MdOutlineShoppingCart,
  MdReviews,
  MdOutlineReviews,
} from "react-icons/md";
import { MdOutlineStorefront, MdStorefront } from "react-icons/md";
import { IoPersonOutline, IoPerson } from "react-icons/io5";

import { RiSettings3Fill, RiSettings3Line } from "react-icons/ri";
import {
  IoIosNotifications,
  IoIosNotificationsOutline,
  IoMdLogOut,
} from "react-icons/io";
import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";

import DashboardButton from "./DashBoardButton";
import axiosClient from "../hooks/AxiosInstance";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
interface User {
  id: number;
  username: string;
  email: string;
  userRole: string;
  status: string;
  profileImageUrl: string;
}
interface InputProps {
  heading?: string;
  subheading?: string;
  color?: string | any;
  icon?: any;
}

const DashBoardSideBar: React.FC<InputProps> = () => {
  const [isSelected, setIsSelected] = useState<string>("");
  const [showMenu, setShowMenu] = useState<boolean>(false);
  const [user, setUser] = useState<User | null>(null);
  const [isLoading, setIsLoading] = useState<boolean>(false);

  const navigate = useNavigate();
  const notify = (message: string) => toast(message);

  const client = axiosClient();
  const fetchProfile = async () => {
    try {
      const response = await client.get("/users/profile");
      setUser(response.data);
    } catch (err: any) {
      notify(err.response ? err : "Fetching users failed");
    } finally {
      setIsLoading(false);
    }
  };
  useEffect(() => {
    fetchProfile();
  }, []);
  return (
    <div
      data-testid="side-nav"
      className={
        showMenu
          ? "flex p-3 tablet:p-7 pb-2 resize-x items-center justify-between  flex-col tablet:w-[20%] bg-white border border-gray_100 rounded h-full transition-all"
          : "flex p-4 w-24 pb-2 resize-x items-center justify-between  flex-col  bg-white border border-gray_100 rounded h-full transition-all"
      }
    >
      <div className=" w-full flex items-center justify-between   gap-3">
        {showMenu && (
          <img
            src={Logo}
            alt=""
            className="w-16 tablet:w-24  tablet:flex p-2 "
          />
        )}
        {showMenu ? (
          <IoIosArrowBack
            className="text-2xl tablet:text-4xl self-end mx-auto bg-black text-white rounded-full p-1"
            onClick={() => {
              setShowMenu(!showMenu);
            }}
            data-testid="menu-toggle-button"
          />
        ) : (
          <IoIosArrowForward
            className="text-xl tablet:text-3xl mx-auto  bg-black text-white rounded-full p-1  "
            onClick={() => {
              setShowMenu(!showMenu);
            }}
            data-testid="menu-toggle-button2"
          />
        )}
      </div>

      <div className="search flex items-center self-start gap-2 justify-start rounded-full p-2  border border-gray_100 my-3 w-full">
        <CiSearch className="text-xl self-center " />
        {showMenu && (
          <input
            type="text"
            placeholder="Search ..."
            className="rounded flex p-1 w-full outline-none tablet:w-full  text-black text-sm bg-transparent"
          />
        )}
      </div>

      <div className="dashboard-link-container w-full overflow-y-auto bg-red-70 h-[45%] pt-10 flex flex-col items-center justify-center transition-all">
        <div className="link w-full">
          <DashboardButton
            dataTestId="dashboard-button"
            icon={
              isSelected == "dashboard" ? (
                <MdSpaceDashboard className="text-white text-lg tablet:text-2xl" />
              ) : (
                <MdOutlineSpaceDashboard className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Dashboard" : ""}
            onClick={() => {
              setIsSelected("dashboard");
              navigate("/admin/dashboard");
            }}
            color={isSelected == "dashboard" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "dashboard" ? "white" : "rgb(38 38 38)"}
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>

        <div className="link w-full">
          <DashboardButton
            dataTestId="user-button"
            icon={
              isSelected == "users" ? (
                <IoPerson className="text-white text-lg tablet:text-2xl" />
              ) : (
                <IoPersonOutline className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Users" : ""}
            onClick={() => {
              setIsSelected("users");
              navigate("/admin/users");
            }}
            // rounded='8px'
            color={isSelected == "users" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "users" ? "white" : "rgb(38 38 38)"}
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>

        <div className="link w-full">
          <DashboardButton
            dataTestId="product-button"
            icon={
              isSelected == "products" ? (
                <MdStorefront className="text-white text-lg tablet:text-2xl" />
              ) : (
                <MdOutlineStorefront className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Products" : ""}
            onClick={() => {
              setIsSelected("products");
              navigate("/admin/products");
            }}
            color={isSelected == "products" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "products" ? "white" : "rgb(38 38 38)"}
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>
        <div className="link w-full">
          <DashboardButton
            dataTestId="notification-button"
            icon={
              isSelected == "notifications" ? (
                <IoIosNotifications className="text-white text-lg tablet:text-2xl" />
              ) : (
                <IoIosNotificationsOutline className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Notificarions" : ""}
            onClick={() => {
              setIsSelected("notifications");
              navigate("/admin/notifications");
            }}
            color={isSelected == "notifications" ? "rgb(38 38 38)" : "white"}
            textColor={
              isSelected == "notifications" ? "white" : "rgb(38 38 38)"
            }
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>
        <div className="link w-full">
          <DashboardButton
            dataTestId="orders-button"
            icon={
              isSelected == "order" ? (
                <MdShoppingCart className="text-white text-lg tablet:text-2xl" />
              ) : (
                <MdOutlineShoppingCart className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Orders" : ""}
            onClick={() => {
              setIsSelected("order");
              navigate("/admin/orders");
            }}
            color={isSelected == "order" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "order" ? "white" : "rgb(38 38 38)"}
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>
        <div className="link w-full">
          <DashboardButton
            dataTestId="review-button"
            icon={
              isSelected == "reviews" ? (
                <MdReviews className="text-white text-lg tablet:text-2xl" />
              ) : (
                <MdOutlineReviews className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "Reviews" : ""}
            onClick={() => {
              setIsSelected("reviews");
              navigate("/admin/reviews");
            }}
            color={isSelected == "reviews" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "reviews" ? "white" : "rgb(38 38 38)"}
            showFull={showMenu}
            borderColor={"1px solid rgb(240 238 237)"}
          />
        </div>
      </div>

      <div className="w-full  flex flex-col justify-end">
        <div className="link w-full">
          <DashboardButton
            dataTestId="setting-button"
            icon={
              isSelected == "settings" ? (
                <RiSettings3Fill className="text-white text-lg tablet:text-2xl" />
              ) : (
                <RiSettings3Line className="text-black text-lg tablet:text-2xl" />
              )
            }
            value={showMenu ? "settings" : ""}
            onClick={() => {
              setIsSelected("settings");
              navigate("/admin/settings");
            }}
            color={isSelected == "settings" ? "rgb(38 38 38)" : "white"}
            textColor={isSelected == "settings" ? "white" : "rgb(38 38 38)"}
          />
        </div>
        <div className="link w-full">
          <DashboardButton
            dataTestId="logout-button"
            icon={<IoMdLogOut className="text-black text-lg tablet:text-2xl" />}
            value={showMenu ? "Logout" : ""}
            reverse={true}
            onClick={() => {
              setIsSelected("logout");
            }}
            color={"white"}
            textColor={"rgb(38 38 38)"}
          />
        </div>

        <div className="flex gap-3 items-center justify-center my-5 border-t border-gray_100  align-bottom pt-2">
          {isLoading ? (
            "Loading..."
          ) : (
            <>
              <img
                src={profileImage || user?.profileImageUrl}
                alt=""
                className="w-12 h-12 rounded-full object-cover border border-gray_100"
              />
              {showMenu && (
                <div className="flex flex-col ">
                  <p className="name text-xs tablet:text-sm font-semibold">
                    {user?.username}
                  </p>
                  <p className="text-[9px] tablet:text-xs">{user?.email}</p>
                </div>
              )}
            </>
          )}
        </div>
      </div>
    </div>
  );
};

export default DashBoardSideBar;

1	import profileImage from "../assets/images/profileImage.svg";	2✔
2
3	import React, { useEffect, useState } from "react";	2✔
4	import Logo from "../assets/images/Bit.Shop.svg";	2✔
5	import { CiSearch } from "react-icons/ci";	2✔
6	import {	2✔
7	MdSpaceDashboard,
8	MdOutlineSpaceDashboard,
9	MdShoppingCart,
10	MdOutlineShoppingCart,
11	MdReviews,
12	MdOutlineReviews,
13	} from "react-icons/md";
14	import { MdOutlineStorefront, MdStorefront } from "react-icons/md";	2✔
15	import { IoPersonOutline, IoPerson } from "react-icons/io5";	2✔
16
17	import { RiSettings3Fill, RiSettings3Line } from "react-icons/ri";	2✔
18	import {	2✔
19	IoIosNotifications,
20	IoIosNotificationsOutline,
21	IoMdLogOut,
22	} from "react-icons/io";
23	import { IoIosArrowForward, IoIosArrowBack } from "react-icons/io";	2✔
24
25	import DashboardButton from "./DashBoardButton";	2✔
26	import axiosClient from "../hooks/AxiosInstance";	2✔
27	import { useNavigate } from "react-router-dom";	2✔
28	import { toast } from "react-toastify";	2✔
29	interface User {
30	id: number;
31	username: string;
32	email: string;
33	userRole: string;
34	status: string;
35	profileImageUrl: string;
36	}
37	interface InputProps {
38	heading?: string;
39	subheading?: string;
40	color?: string \| any;
41	icon?: any;
42	}
43
44	const DashBoardSideBar: React.FC<InputProps> = () => {	2✔
45	const [isSelected, setIsSelected] = useState<string>("");	19✔
46	const [showMenu, setShowMenu] = useState<boolean>(false);	18✔
47	const [user, setUser] = useState<User \| null>(null);	18✔
48	const [isLoading, setIsLoading] = useState<boolean>(false);	18✔
49
50	const navigate = useNavigate();	18✔
51	const notify = (message: string) => toast(message);	18✔
52
53	const client = axiosClient();	18✔
54	const fetchProfile = async () => {	18✔
55	try {	12✔
56	const response = await client.get("/users/profile");	12✔
NEW 57	setUser(response.data);	×
58	} catch (err: any) {
59	notify(err.response ? err : "Fetching users failed");	12!
60	} finally {
61	setIsLoading(false);	12✔
62	}
63	};
64	useEffect(() => {	18✔
65	fetchProfile();	12✔
66	}, []);
67	return (	18✔
68	<div
69	data-testid="side-nav"
70	className={
71	showMenu	18✔
72	? "flex p-3 tablet:p-7 pb-2 resize-x items-center justify-between flex-col tablet:w-[20%] bg-white border border-gray_100 rounded h-full transition-all"
73	: "flex p-4 w-24 pb-2 resize-x items-center justify-between flex-col bg-white border border-gray_100 rounded h-full transition-all"
74	}
75	>
76	<div className=" w-full flex items-center justify-between gap-3">
77	{showMenu && (	22✔
78	<img
79	src={Logo}
80	alt=""
81	className="w-16 tablet:w-24 tablet:flex p-2 "
82	/>
83	)}
84	{showMenu ? (	18✔
85	<IoIosArrowBack
86	className="text-2xl tablet:text-4xl self-end mx-auto bg-black text-white rounded-full p-1"
87	onClick={() => {
88	setShowMenu(!showMenu);	1✔
89	}}
90	data-testid="menu-toggle-button"
91	/>
92	) : (
93	<IoIosArrowForward
94	className="text-xl tablet:text-3xl mx-auto bg-black text-white rounded-full p-1 "
95	onClick={() => {
96	setShowMenu(!showMenu);	2✔
97	}}
98	data-testid="menu-toggle-button2"
99	/>
100	)}
101	</div>
102
103	<div className="search flex items-center self-start gap-2 justify-start rounded-full p-2 border border-gray_100 my-3 w-full">
104	<CiSearch className="text-xl self-center " />
105	{showMenu && (	22✔
106	<input
107	type="text"
108	placeholder="Search ..."
109	className="rounded flex p-1 w-full outline-none tablet:w-full text-black text-sm bg-transparent"
110	/>
111	)}
112	</div>
113
114	<div className="dashboard-link-container w-full overflow-y-auto bg-red-70 h-[45%] pt-10 flex flex-col items-center justify-center transition-all">
115	<div className="link w-full">
116	<DashboardButton
117	dataTestId="dashboard-button"
118	icon={
119	isSelected == "dashboard" ? (	18!
120	<MdSpaceDashboard className="text-white text-lg tablet:text-2xl" />
121	) : (
122	<MdOutlineSpaceDashboard className="text-black text-lg tablet:text-2xl" />
123	)
124	}
125	value={showMenu ? "Dashboard" : ""}	18✔
126	onClick={() => {
127	setIsSelected("dashboard");	1✔
128	navigate("/admin/dashboard");	1✔
129	}}
130	color={isSelected == "dashboard" ? "rgb(38 38 38)" : "white"}	18!
131	textColor={isSelected == "dashboard" ? "white" : "rgb(38 38 38)"}	18!
132	showFull={showMenu}
133	borderColor={"1px solid rgb(240 238 237)"}
134	/>
135	</div>
136
137	<div className="link w-full">
138	<DashboardButton
139	dataTestId="user-button"
140	icon={
141	isSelected == "users" ? (	18!
142	<IoPerson className="text-white text-lg tablet:text-2xl" />
143	) : (
144	<IoPersonOutline className="text-black text-lg tablet:text-2xl" />
145	)
146	}
147	value={showMenu ? "Users" : ""}	18✔
148	onClick={() => {
149	setIsSelected("users");	1✔
150	navigate("/admin/users");	1✔
151	}}
152	// rounded='8px'
153	color={isSelected == "users" ? "rgb(38 38 38)" : "white"}	18!
154	textColor={isSelected == "users" ? "white" : "rgb(38 38 38)"}	18!
155	showFull={showMenu}
156	borderColor={"1px solid rgb(240 238 237)"}
157	/>
158	</div>
159
160	<div className="link w-full">
161	<DashboardButton
162	dataTestId="product-button"
163	icon={
164	isSelected == "products" ? (	18!
165	<MdStorefront className="text-white text-lg tablet:text-2xl" />
166	) : (
167	<MdOutlineStorefront className="text-black text-lg tablet:text-2xl" />
168	)
169	}
170	value={showMenu ? "Products" : ""}	18✔
171	onClick={() => {
172	setIsSelected("products");	1✔
173	navigate("/admin/products");	1✔
174	}}
175	color={isSelected == "products" ? "rgb(38 38 38)" : "white"}	18!
176	textColor={isSelected == "products" ? "white" : "rgb(38 38 38)"}	18!
177	showFull={showMenu}
178	borderColor={"1px solid rgb(240 238 237)"}
179	/>
180	</div>
181	<div className="link w-full">
182	<DashboardButton
183	dataTestId="notification-button"
184	icon={
185	isSelected == "notifications" ? (	18!
186	<IoIosNotifications className="text-white text-lg tablet:text-2xl" />
187	) : (
188	<IoIosNotificationsOutline className="text-black text-lg tablet:text-2xl" />
189	)
190	}
191	value={showMenu ? "Notificarions" : ""}	18✔
192	onClick={() => {
193	setIsSelected("notifications");	1✔
194	navigate("/admin/notifications");	1✔
195	}}
196	color={isSelected == "notifications" ? "rgb(38 38 38)" : "white"}	18!
197	textColor={
198	isSelected == "notifications" ? "white" : "rgb(38 38 38)"	18!
199	}
200	showFull={showMenu}
201	borderColor={"1px solid rgb(240 238 237)"}
202	/>
203	</div>
204	<div className="link w-full">
205	<DashboardButton
206	dataTestId="orders-button"
207	icon={
208	isSelected == "order" ? (	18!
209	<MdShoppingCart className="text-white text-lg tablet:text-2xl" />
210	) : (
211	<MdOutlineShoppingCart className="text-black text-lg tablet:text-2xl" />
212	)
213	}
214	value={showMenu ? "Orders" : ""}	18✔
215	onClick={() => {
216	setIsSelected("order");	1✔
217	navigate("/admin/orders");	1✔
218	}}
219	color={isSelected == "order" ? "rgb(38 38 38)" : "white"}	18!
220	textColor={isSelected == "order" ? "white" : "rgb(38 38 38)"}	18!
221	showFull={showMenu}
222	borderColor={"1px solid rgb(240 238 237)"}
223	/>
224	</div>
225	<div className="link w-full">
226	<DashboardButton
227	dataTestId="review-button"
228	icon={
229	isSelected == "reviews" ? (	18!
230	<MdReviews className="text-white text-lg tablet:text-2xl" />
231	) : (
232	<MdOutlineReviews className="text-black text-lg tablet:text-2xl" />
233	)
234	}
235	value={showMenu ? "Reviews" : ""}	18✔
236	onClick={() => {
237	setIsSelected("reviews");	1✔
238	navigate("/admin/reviews");	1✔
239	}}
240	color={isSelected == "reviews" ? "rgb(38 38 38)" : "white"}	18!
241	textColor={isSelected == "reviews" ? "white" : "rgb(38 38 38)"}	18!
242	showFull={showMenu}
243	borderColor={"1px solid rgb(240 238 237)"}
244	/>
245	</div>
246	</div>
247
248	<div className="w-full flex flex-col justify-end">
249	<div className="link w-full">
250	<DashboardButton
251	dataTestId="setting-button"
252	icon={
253	isSelected == "settings" ? (	18!
254	<RiSettings3Fill className="text-white text-lg tablet:text-2xl" />
255	) : (
256	<RiSettings3Line className="text-black text-lg tablet:text-2xl" />
257	)
258	}
259	value={showMenu ? "settings" : ""}	18✔
260	onClick={() => {
261	setIsSelected("settings");	1✔
262	navigate("/admin/settings");	1✔
263	}}
264	color={isSelected == "settings" ? "rgb(38 38 38)" : "white"}	18!
265	textColor={isSelected == "settings" ? "white" : "rgb(38 38 38)"}	18!
266	/>
267	</div>
268	<div className="link w-full">
269	<DashboardButton
270	dataTestId="logout-button"
271	icon={<IoMdLogOut className="text-black text-lg tablet:text-2xl" />}
272	value={showMenu ? "Logout" : ""}	18✔
273	reverse={true}
274	onClick={() => {
275	setIsSelected("logout");	1✔
276	}}
277	color={"white"}
278	textColor={"rgb(38 38 38)"}
279	/>
280	</div>
281
282	<div className="flex gap-3 items-center justify-center my-5 border-t border-gray_100 align-bottom pt-2">
283	{isLoading ? (	18!
284	"Loading..."
285	) : (
286	<>
287	<img
288	src={profileImage \|\| user?.profileImageUrl}	36✔
289	alt=""
290	className="w-12 h-12 rounded-full object-cover border border-gray_100"
291	/>
292	{showMenu && (	22✔
293	<div className="flex flex-col ">
294	<p className="name text-xs tablet:text-sm font-semibold">
295	{user?.username}
296	</p>
297	<p className="text-[9px] tablet:text-xs">{user?.email}</p>
298	</div>
299	)}
300	</>
301	)}
302	</div>
303	</div>
304	</div>
305	);
306	};
307
308	export default DashBoardSideBar;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / 6edceb3a-90fd-4c8a-87b0-6caa7f98ad08

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