8727f50c-f416-4b74-b3fa-135ecd0c75bd

Committed 09 Jul 2024 09:19AM UTC coverage: 93.179% (+0.1%) from 93.062%

Build # 8727f50c-f416-4b74-b3fa-135ecd0c75bd

Build Type

Pull #36

circleci

Committed by

AngeloChristian1

Commit Message

Feature(User Cart):  A buyer should be able to view their cart

[Delivers #187364699]

Pull Request Pull Request #36: [187364699] - Feature(User Cart): A buyer should be able to view their cart

Run Details

395 of 465 branches covered (84.95%)

Branch coverage included in aggregate %.

61 of 62 new or added lines in 7 files covered. (98.39%)

7 existing lines in 1 file now uncovered.

1135 of 1177 relevant lines covered (96.43%)

9.87 hits per line

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

79.03

/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 { IoMdLogIn, IoMdLogOut } from "react-icons/io";
import { IoSettingsSharp } from "react-icons/io5";
import { IoLocationOutline } 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";


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

const Navbar: React.FC<NavbarProps> = (props) => {

  const isLoggedIn = useSelector(
    (state: RootState) => state.auth.isLoggedIn,
    shallowEqual,
  );
  const { count } = useSelector((state: any) => state.cart);

  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>
            <Link to="" className="text-sm">
              Home
            </Link>
          </li>
          <li>
            <Link to="" 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>
          <li>
            <Link to="" className="text-lg">
              {" "}
              <CiHeart size={24}/>
            </Link>
          </li>
          <li>
            <Link to="/cart" className="text-lg relative">
              {" "}
              <IoCartOutline size={24} />
    {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>}
              <IoCartOutline />
            </Link>
          </li>
          <li>
            <Link to="" className="text-lg">
              {" "}
              <Badge badgeContent={unreadCount} color="primary">
                <IoNotificationsOutline size={24} onClick={() => {
              setIsModalOpen(true)}}/>
              </Badge>
            </Link>
          </li>
          <li>
            <Link to="" className="text-lg">
              {" "}
              
              <IoLocationOutline size={24} />
            </Link>
          </li>
        </ul>
      </div>
      <NotificationPane 
            open={isModalOpen}
            onClose={() => setIsModalOpen(false)}
          />
      <div className=" w-[5%] hidden tablet:flex">
        {!isLoggedIn ? (
          <Link to="/login" className="text-lg">
            <RxAvatar className="text-2xl" />
          </Link>
        ) : (
          <Link to="/view-edit-profile" className="text-sm">
            <RxAvatar className="text-2xl" />
          </Link>
        )}
      </div>
      <div className="flex gap-10 items-center">
      <CiSearch className="text-xl flex tablet:hidden" onClick={()=>setShowSearch(!showSearch)} />
              <button
        onClick={() => setIsBurgerShown(!burgerShown)}
        className="tablet:hidden"
      >
        {!burgerShown ? (
          <RxHamburgerMenu className="text-3xl " />
        ) : (
          <RxCross2 className="text-3xl " />
        )}
      </button>
      </div>


      {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">
          <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 
                    open={isModalOpen}
                    onClose={() => setIsModalOpen(false)}
                  />
                </div>
              </Link>
            </li>

            <li className=" rounded-sm hover:bg-white transition-all">
              <Link to="" className="text-lg">
                <div className="flex-between justify-center space-x-1 p-2 ">
                  <CiHeart className="text-gray_100" />
                  <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 bottom-[-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="" 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=" rounded-sm hover:bg-white transition-all">
              {isLoggedIn ? (
                <Link
                  to="/view-edit-profile"
                  className="text-lg"
                  onClick={() => setIsBurgerShown(false)}
                >
                  <div className="flex-between justify-center space-x-1 p-2">
                    <IoSettingsSharp className="text-gray_100" />
                    <p className="text-xs text-gray_100">User Settings</p>
                  </div>
                </Link>
              ) : (
                <Link
                  to="/login"
                  className="text-lg"
                  onClick={() => setIsBurgerShown(false)}
                >
                  <div className="flex-between justify-center space-x-1 p-2">
                    <IoSettingsSharp className="text-gray_100" />
                    <p className="text-xs text-gray_100">User Settings</p>
                  </div>
                </Link>
              )}
            </li>

            {isLoggedIn ? (
              <li className=" rounded-sm hover:bg-white transition-all">
                <Link to="" className="text-lg">
                  <div className="flex-between justify-center space-x-1 p-2 ">
                    <IoMdLogOut className="text-gray_100" />
                    <p className="text-xs text-gray_100">Logout</p>
                  </div>
                </Link>
              </li>
            ) : (
              <li className=" rounded-sm hover:bg-white transition-all">
                <Link
                  to="/login"
                  className="text-lg"
                  onClick={() => {
                    setIsBurgerShown(!burgerShown);
                  }}
                >
                  <div className="flex-between justify-center space-x-1 p-2 ">
                    <IoMdLogIn className="text-gray_100" />
                    <p className="text-xs text-gray_100">Login</p>
                  </div>
                </Link>
              </li>
            )}
          </ul>
        </div>
      )}

    </nav>
 {showSearch &&   <div className="fixed z-20 bg-[rgba(0,0,0,0.5)] w-full h-full mx-auto ">
      <SearchComponent
      hideSearch={()=>{setShowSearch(false)}}
      />
    
    </div>}
    </div>
  );
};

export default Navbar;

1	import React, { useState } from "react";	2✔
2	import Logo from "../assets/images/Bit.Shop.svg";	2✔
3	import { RxHamburgerMenu } from "react-icons/rx";	2✔
4	import { RxCross2 } from "react-icons/rx";	2✔
5	import { Link } from "react-router-dom";	2✔
6	import { CiSearch } from "react-icons/ci";	2✔
7	import { CiHeart } from "react-icons/ci";	2✔
8	import { IoCartOutline } from "react-icons/io5";	2✔
9	import { IoNotificationsOutline } from "react-icons/io5";	2✔
10	import { RxAvatar } from "react-icons/rx";	2✔
11	import { IoMdLogIn, IoMdLogOut } from "react-icons/io";	2✔
12	import { IoSettingsSharp } from "react-icons/io5";	2✔
13	import { IoLocationOutline } from "react-icons/io5";	2✔
14	import { IoMdHome } from "react-icons/io";	2✔
15	import { shallowEqual, useSelector } from "react-redux";	2✔
16	import { RootState } from "../redux/store";
17	import SearchComponent from "./SearchComponent";	2✔
18	import Badge from "@mui/material/Badge";	2✔
19	import 'react-toastify/dist/ReactToastify.css';	2✔
20	import { useNotifications } from "./notificationtoast";	2✔
21	import NotificationPane from "../views/NotificationPane";	2✔
22
23
24	interface NavbarProps {
25	burgerShown?: boolean;
26	showSearch?:boolean;
27	}
28
29	const Navbar: React.FC<NavbarProps> = (props) => {	2✔
30
31	const isLoggedIn = useSelector(	14✔
32	(state: RootState) => state.auth.isLoggedIn,	22✔
33	shallowEqual,
34	);
35	const { count } = useSelector((state: any) => state.cart);	22✔
36
37	const [burgerShown, setIsBurgerShown] = useState(props.burgerShown \|\| false);	14✔
38	const [showSearch, setShowSearch] = useState(props.showSearch\|\| false);	14✔
39	const { unreadCount } = useNotifications();	14✔
40	const [isModalOpen, setIsModalOpen] = React.useState<boolean>(false);	14✔
41	return (	14✔
42	<div className=" w-full flex flex-col ">
43	<nav className="navbar-container w-full border-b-1 p-8 flex-between space-x-2 border-b-[1px] border-gray_100">
44	<div className="nav-logo w-[20%] ">
45	<img src={Logo} alt="Logo" className="w-24 object-contain " />
46	</div>
47	<div className="nav-link flex-between w-[30%] hidden tablet:flex">
48	<ul className="flex-between space-x-4">
49	<li>
50	<Link to="" className="text-sm">
51	Home
52	</Link>
53	</li>
54	<li>
55	<Link to="" className="text-sm">
56	About
57	</Link>
58	</li>
59	<li>
60	<Link to="" className="text-sm">
61	Shop
62	</Link>
63	</li>
64	<li>
65	<Link to="" className="text-sm">
66	Contact
67	</Link>
68	</li>
69	</ul>
70	</div>
71	<div className="nav-icons flex-between hidden tablet:flex">
72	<ul className="flex-between space-x-4">
73	<li>
74	<div className="search-container bg-gray rounded-sm flex-between space-x-2 p-2 cursor-pointer" onClick={()=>setShowSearch(!showSearch)}>	×
75	<p className="text-xs">search here</p>
76	<CiSearch />
77	</div>
78	</li>
79	<li>
80	<Link to="" className="text-lg">
81	{" "}
82	<CiHeart size={24}/>
83	</Link>
84	</li>
85	<li>
86	<Link to="/cart" className="text-lg relative">
87	{" "}
88	<IoCartOutline size={24} />
89	{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>}	14!
90	<IoCartOutline />
91	</Link>
92	</li>
93	<li>
94	<Link to="" className="text-lg">
95	{" "}
96	<Badge badgeContent={unreadCount} color="primary">
97	<IoNotificationsOutline size={24} onClick={() => {
98	setIsModalOpen(true)}}/>	×
99	</Badge>
100	</Link>
101	</li>
102	<li>
103	<Link to="" className="text-lg">
104	{" "}
105
106	<IoLocationOutline size={24} />
107	</Link>
108	</li>
109	</ul>
110	</div>
111	<NotificationPane
112	open={isModalOpen}
UNCOV 113	onClose={() => setIsModalOpen(false)}	×
114	/>
115	<div className=" w-[5%] hidden tablet:flex">
116	{!isLoggedIn ? (	14✔
117	<Link to="/login" className="text-lg">
118	<RxAvatar className="text-2xl" />
119	</Link>
120	) : (
121	<Link to="/view-edit-profile" className="text-sm">
122	<RxAvatar className="text-2xl" />
123	</Link>
124	)}
125	</div>
126	<div className="flex gap-10 items-center">
UNCOV 127	<CiSearch className="text-xl flex tablet:hidden" onClick={()=>setShowSearch(!showSearch)} />	×
128	<button
129	onClick={() => setIsBurgerShown(!burgerShown)}	5✔
130	className="tablet:hidden"
131	>
132	{!burgerShown ? (	14✔
133	<RxHamburgerMenu className="text-3xl " />
134	) : (
135	<RxCross2 className="text-3xl " />
136	)}
137	</button>
138	</div>
139
140
141	{burgerShown && (	18✔
142	<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">
143	<ul className="w-full p-4 space-y-2">
144	<li className="bg-gray rounded-sm">
145	<Link to="" className="text-lg">
146	<div className="flex-between justify-center space-x-1 p-2 ">
147	<IoMdHome />
148	<p className="text-xs">Home</p>
149	</div>
150	</Link>
151	</li>
152	<li className=" rounded-sm hover:bg-white">
153	<Link to="" className="text-lg"
154	onClick={() => {
UNCOV 155	setIsBurgerShown(false)	×
156	setIsModalOpen(true)	×
157	}}>
158	<div className="flex-between justify-center space-x-1 p-2 ">
159
160	<Badge badgeContent={unreadCount} color="primary">
161	<IoNotificationsOutline size={24} className="text-gray_100" />
162	</Badge>
163	<p className="text-xs text-gray_100">Notifications</p>
164	<NotificationPane
165	open={isModalOpen}
UNCOV 166	onClose={() => setIsModalOpen(false)}	×
167	/>
168	</div>
169	</Link>
170	</li>
171
172	<li className=" rounded-sm hover:bg-white transition-all">
173	<Link to="" className="text-lg">
174	<div className="flex-between justify-center space-x-1 p-2 ">
175	<CiHeart className="text-gray_100" />
176	<p className="text-xs text-gray_100">My wishlist</p>
177	</div>
178	</Link>
179	</li>
180	<li className=" rounded-sm hover:bg-white transition-all">
181	<Link to="/cart" className="text-lg">
182	<div className="flex-between justify-center space-x-1 p-2 ">
183	<div className="relative">
184	<IoCartOutline className="text-gray_100" />
185	{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>}	4!
186	</div>
187
188	<p className="text-xs text-gray_100">My cart</p>
189	</div>
190	</Link>
191	</li>
192
193	<li className=" rounded-sm hover:bg-white transition-all">
194	<Link to="" className="text-lg">
195	<div className="flex-between justify-center space-x-1 p-2 ">
196	<IoLocationOutline className="text-gray_100" />
197	<p className="text-xs text-gray_100">My Orders</p>
198	</div>
199	</Link>
200	</li>
201
202	<li className=" rounded-sm hover:bg-white transition-all">
203	{isLoggedIn ? (	4✔
204	<Link
205	to="/view-edit-profile"
206	className="text-lg"
UNCOV 207	onClick={() => setIsBurgerShown(false)}	×
208	>
209	<div className="flex-between justify-center space-x-1 p-2">
210	<IoSettingsSharp className="text-gray_100" />
211	<p className="text-xs text-gray_100">User Settings</p>
212	</div>
213	</Link>
214	) : (
215	<Link
216	to="/login"
217	className="text-lg"
UNCOV 218	onClick={() => setIsBurgerShown(false)}	×
219	>
220	<div className="flex-between justify-center space-x-1 p-2">
221	<IoSettingsSharp className="text-gray_100" />
222	<p className="text-xs text-gray_100">User Settings</p>
223	</div>
224	</Link>
225	)}
226	</li>
227
228	{isLoggedIn ? (	4✔
229	<li className=" rounded-sm hover:bg-white transition-all">
230	<Link to="" className="text-lg">
231	<div className="flex-between justify-center space-x-1 p-2 ">
232	<IoMdLogOut className="text-gray_100" />
233	<p className="text-xs text-gray_100">Logout</p>
234	</div>
235	</Link>
236	</li>
237	) : (
238	<li className=" rounded-sm hover:bg-white transition-all">
239	<Link
240	to="/login"
241	className="text-lg"
242	onClick={() => {
243	setIsBurgerShown(!burgerShown);	1✔
244	}}
245	>
246	<div className="flex-between justify-center space-x-1 p-2 ">
247	<IoMdLogIn className="text-gray_100" />
248	<p className="text-xs text-gray_100">Login</p>
249	</div>
250	</Link>
251	</li>
252	)}
253	</ul>
254	</div>
255	)}
256
257	</nav>
258	{showSearch && <div className="fixed z-20 bg-[rgba(0,0,0,0.5)] w-full h-full mx-auto ">	14!
259	<SearchComponent
UNCOV 260	hideSearch={()=>{setShowSearch(false)}}	×
261	/>
262
263	</div>}
264	</div>
265	);
266	};
267
268	export default Navbar;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / 8727f50c-f416-4b74-b3fa-135ecd0c75bd

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