86b04e72-4e2e-4874-b681-611cd134a86e

Committed 09 Jul 2024 04:02PM UTC coverage: 92.971% (-0.06%) from 93.026%

Build # 86b04e72-4e2e-4874-b681-611cd134a86e

Build Type

Pull #40

circleci

Committed by

EricNiyo73

Commit Message

fix(chat): add a badge to chat icons

Pull Request Pull Request #40: fix- Add abadge to show that there is new message

Run Details

385 of 461 branches covered (83.51%)

Branch coverage included in aggregate %.

51 of 57 new or added lines in 5 files covered. (89.47%)

1 existing line in 1 file now uncovered.

1070 of 1104 relevant lines covered (96.92%)

9.04 hits per line

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

83.33

/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 { 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 { FaTimes } from "react-icons/fa";
import Chat from "../views/chat/Chat";

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

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

  const toggleChat = () => {
    setIsChatOpen(!isChatOpen);
  };
  const [burgerShown, setIsBurgerShown] = useState(props.burgerShown || false);
  const [showSearch, setShowSearch] = useState(props.showSearch || false);
  const { unreadCount } = useNotifications();
  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="" className="text-lg">
                {" "}
                <IoCartOutline size={24} />
              </Link>
            </li>
            <li>
              <Link to="" className="text-lg">
                {" "}
                <Badge badgeContent={unreadCount} color="primary">
                  <IoNotificationsOutline size={24} />
                </Badge>
              </Link>
            </li>

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

atlp-rwanda / e-commerce-bitcrafters-fn / 86b04e72-4e2e-4874-b681-611cd134a86e

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