e69e010c-6760-4a5b-8331-e661d3b6cd77

Committed 08 Jul 2024 08:29AM UTC coverage: 93.61% (+0.1%) from 93.483%

Build # e69e010c-6760-4a5b-8331-e661d3b6cd77

Build Type

Pull #35

circleci

Committed by

Yvan-David

Commit Message

feat(notifications): Implement notifications pane

- The notifications pane displays a users notifications
- The notifications pane should open up when a user clicks on the icon
- User can see a list of their notifications displayed on the pane

[Delivers #187364696]

Pull Request Pull Request #35: [#187364696] Implement notifications pane

Run Details

359 of 424 branches covered (84.67%)

Branch coverage included in aggregate %.

33 of 34 new or added lines in 3 files covered. (97.06%)

4 existing lines in 1 file now uncovered.

974 of 1000 relevant lines covered (97.4%)

8.48 hits per line

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

86.96

/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";

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

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

  const isLoggedIn = useSelector(
    (state: RootState) => state.auth.isLoggedIn,
    shallowEqual,
  );

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

atlp-rwanda / e-commerce-bitcrafters-fn / e69e010c-6760-4a5b-8331-e661d3b6cd77

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