9845696119

Committed 08 Jul 2024 07:24PM UTC coverage: 88.421% (+0.07%) from 88.352%

Build # 9845696119

Build Type

push

github

Committed by

Calebgisa72

Commit Message

Merge pull request #54 from atlp-rwanda/ft-buyer-orders

#48 implement buyer order tracking

Run Details

548 of 751 branches covered (72.97%)

Branch coverage included in aggregate %.

467 of 524 new or added lines in 15 files covered. (89.12%)

5 existing lines in 2 files now uncovered.

6577 of 7307 relevant lines covered (90.01%)

7.82 hits per line

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

86.89

/src/components/Navbar/Navbar.tsx

import React, { useEffect, useState } from 'react';
import { Search } from 'lucide-react';
import knightsLogo from '../../images/logo.png';
import cart from '../../images/cart.png';
import user from '../../images/user.png';
import notificationBell from '../../images/bell.png';
import menuIcon from '../../assets/Menu.svg';
import closeIcon from '../../assets/Close.svg';
import { useDispatch, useSelector } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';
import DesktopMenu from '../Menu/DesktopMenu';
import Login from './loginComponent';
import CategoriesMenu from '../Menu/CategoriesMenu';
import { RootState, AppDispatch } from '../../redux/store';
import { fetchCart } from '../../redux/actions/cartAction';

function Navbar() {
  const { userToken } = useSelector((state: RootState) => state.auth);
  const [showDesktopMenu, setShowDesktopMenu] = useState(false);
  const [showMenu, setShowMenu] = useState(false);

  const [searchTerm, setSearchTerm] = useState('');
  const navigate = useNavigate();

  useEffect(() => {
    setShowDesktopMenu(false);
  }, [userToken]);

  const desktopMenuHandler = () => {
    setShowDesktopMenu((prevData) => !prevData);
  };

  const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(event.target.value);
  };

  const handleSearchSubmit = (event: React.KeyboardEvent<HTMLInputElement>) => {
    if (event.key === 'Enter') {
      navigate(`/search?query=${encodeURIComponent(searchTerm)}`);
    }
  };

  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    dispatch(fetchCart());
  }, [dispatch]);

  //cart state
  const { cartItems } = useSelector((state: RootState) => state.cart);

  return (
    <nav
      className={`relative z-50 w-full min-h-[10vh] h-auto flex items-center ${userToken ? 'justify-center flex-col gap-4' : 'justify-between'} xmd:flex-row xmd:justify-between bg-white px-6 lg:px-12 py-5 sticky top-0 shadow-navbar text-baseBlack`}
      data-testid="navbar"
    >
      <h1
        data-testid="homePage"
        onClick={() => {
          navigate('/');
        }}
        className="cursor-pointer flex items-center justify-start gap-x-2 text-primary capitalize font-medium text-xl"
      >
        <img src={knightsLogo} alt="Knights Store Logo" />
        KNIGHTS STORE
      </h1>

      {!userToken && (
        <div className="xmd:hidden flex gap-5" data-testid="userIcon">
          <Search strokeWidth={1.5} className="w-10 h-9 text-black" />
          <img
            onClick={() => setShowMenu((prevState) => !prevState)}
            src={menuIcon}
            className="w-9 h-9"
            alt="Menu Icon"
            data-testid="menuIcon"
          />
        </div>
      )}

      {userToken && (
        <div className="xmd:hidden flex justify-between w-[100%]" data-testid="userIcon">
          <Search strokeWidth={1.5} className="w-[25px] h-[25px] text-black" />
          <a href="/notification" className="relative cursor-pointer">
            <img src={notificationBell} className="w-[25px] h-[25px]" alt="Notification Bell" />
            <span className="absolute min-w-5 h-5 top-1 right-[14px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">
              0
            </span>
          </a>
          <a href="/cart" className="relative cursor-pointer">
            <img src={cart} alt="Cart Icon" className="w-[25px] h-[25px]" />
            <span className="absolute min-w-5 h5 top-1 right-[6px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">
              {cartItems.length}
            </span>
          </a>
          <img
            src={user}
            onClick={desktopMenuHandler}
            alt="User Icon"
            className="w-[25px] h-[25px]"
            data-testid="userIcon"
          />
          <img
            onClick={() => setShowMenu((prevState) => !prevState)}
            src={menuIcon}
            className="w-[25px] h-[25px]"
            alt="Menu Icon"
            data-testid="menuIcon"
          />
        </div>
      )}

      {showMenu && (
        <div
          className={`absolute ${userToken ? 'top-32' : 'top-20'} left-0 w-[100%] bg-slate-100 h-[500px] p-6 flex flex-col gap-6`}
          data-testid="mobileMenu"
        >
          <div className={`flex ${userToken ? 'justify-end' : 'justify-between'}`}>
            {!userToken && (
              <div onClick={() => setShowMenu(false)}>
                <Link to="/login">
                  <Login data-testid="loginLink" />
                </Link>
              </div>
            )}
            <img onClick={() => setShowMenu(false)} src={closeIcon} alt="Close Icon" />
          </div>
          <div className="flex flex-col gap-3 items-center">
            <CategoriesMenu setShowMenu={setShowMenu} />
          </div>
        </div>
      )}

      <div className=" hidden lg:w-[40%] xmd:w-[40%] min-h-10 xmd:flex items-center justify-between gap-x-1 px-4 py-2 border border-neutrals500 bg-white rounded-3xl">
        <input
          className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-base placeholder-grey2"
          type="text"
          id="searchInput"
          placeholder="search for anything"
          value={searchTerm}
          onChange={handleSearchInputChange}
          onKeyDown={handleSearchSubmit}
          data-testid="searchInput"
        />
        <Search strokeWidth={1.5} className="text-orange" />
      </div>

      <div className="hidden xmd:flex items-center justify-end sm:gap-x-5 lg:gap-x-10">
        {!userToken && (
          <Link to="/login" data-testid="loginLink">
            <Login />
          </Link>
        )}
        {userToken && (
          <a href="/notification" className="relative cursor-pointer">
            <img src={notificationBell} alt="Notification Bell" className="w-7 h-7" />
            <span className="absolute min-w-5 h-5 top-1 right-[12px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">
              0
            </span>
          </a>
        )}
        <a href="/cart" className="relative cursor-pointer" data-testid="cart">
          <img src={cart} alt="Cart Icon" className="w-7 h-7" />
          <span className="absolute min-w-5 h-5 top-1 right-[5px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">
            {cartItems.length}
          </span>
        </a>
        {userToken && (
          <div onClick={desktopMenuHandler} className="relative cursor-pointer" data-testid="desktopMenuIcon">
            <img src={user} alt="User Icon" className="w-7 h-7" data-testid="userIcon" />
          </div>
        )}
      </div>
      {userToken && showDesktopMenu && (
        <div
          className="absolute top-[130px] right-[25%] xmd:right-6 xmd:top-[12vh]"
          onClick={() => setShowDesktopMenu(false)}
        >
          <DesktopMenu />
        </div>
      )}
    </nav>
  );
}

export default Navbar;

1	import React, { useEffect, useState } from 'react';	1✔
2	import { Search } from 'lucide-react';	1✔
3	import knightsLogo from '../../images/logo.png';	1✔
4	import cart from '../../images/cart.png';	1✔
5	import user from '../../images/user.png';	1✔
6	import notificationBell from '../../images/bell.png';	1✔
7	import menuIcon from '../../assets/Menu.svg';	1✔
8	import closeIcon from '../../assets/Close.svg';	1✔
9	import { useDispatch, useSelector } from 'react-redux';	1✔
10	import { Link, useNavigate } from 'react-router-dom';	1✔
11	import DesktopMenu from '../Menu/DesktopMenu';	1✔
12	import Login from './loginComponent';	1✔
13	import CategoriesMenu from '../Menu/CategoriesMenu';	1✔
14	import { RootState, AppDispatch } from '../../redux/store';	1✔
15	import { fetchCart } from '../../redux/actions/cartAction';	1✔
16		1✔
17	function Navbar() {	23✔
18	const { userToken } = useSelector((state: RootState) => state.auth);	23✔
19	const [showDesktopMenu, setShowDesktopMenu] = useState(false);	23✔
20	const [showMenu, setShowMenu] = useState(false);	23✔
21		23✔
22	const [searchTerm, setSearchTerm] = useState('');	23✔
23	const navigate = useNavigate();	23✔
24		23✔
25	useEffect(() => {	23✔
26	setShowDesktopMenu(false);	8✔
27	}, [userToken]);	23✔
28		23✔
29	const desktopMenuHandler = () => {	23✔
30	setShowDesktopMenu((prevData) => !prevData);	×
31	};	×
32		23✔
33	const handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {	23✔
34	setSearchTerm(event.target.value);	1✔
35	};	1✔
36		23✔
37	const handleSearchSubmit = (event: React.KeyboardEvent<HTMLInputElement>) => {	23✔
38	if (event.key === 'Enter') {	1✔
39	navigate(`/search?query=${encodeURIComponent(searchTerm)}`);	1✔
40	}	1✔
41	};	1✔
42		23✔
43	const dispatch = useDispatch<AppDispatch>();	23✔
44		23✔
45	useEffect(() => {	23✔
46	dispatch(fetchCart());	8✔
47	}, [dispatch]);	23✔
48		23✔
49	//cart state	23✔
50	const { cartItems } = useSelector((state: RootState) => state.cart);	23✔
51		23✔
52	return (	23✔
53	<nav	23✔
54	className={`relative z-50 w-full min-h-[10vh] h-auto flex items-center ${userToken ? 'justify-center flex-col gap-4' : 'justify-between'} xmd:flex-row xmd:justify-between bg-white px-6 lg:px-12 py-5 sticky top-0 shadow-navbar text-baseBlack`}	23✔
55	data-testid="navbar"	23✔
56	>	23✔
57	<h1	23✔
58	data-testid="homePage"	23✔
59	onClick={() => {	23✔
60	navigate('/');	1✔
61	}}	1✔
62	className="cursor-pointer flex items-center justify-start gap-x-2 text-primary capitalize font-medium text-xl"	23✔
63	>	23✔
64	<img src={knightsLogo} alt="Knights Store Logo" />	23✔
65	KNIGHTS STORE	23✔
66	</h1>	23✔
67		23✔
68	{!userToken && (	23✔
69	<div className="xmd:hidden flex gap-5" data-testid="userIcon">	19✔
70	<Search strokeWidth={1.5} className="w-10 h-9 text-black" />	19✔
71	<img	19✔
72	onClick={() => setShowMenu((prevState) => !prevState)}	19✔
73	src={menuIcon}	19✔
74	className="w-9 h-9"	19✔
75	alt="Menu Icon"	19✔
76	data-testid="menuIcon"	19✔
77	/>	19✔
78	</div>	19✔
79	)}	23✔
80		23✔
81	{userToken && (	23✔
82	<div className="xmd:hidden flex justify-between w-[100%]" data-testid="userIcon">	3✔
83	<Search strokeWidth={1.5} className="w-[25px] h-[25px] text-black" />	3✔
84	<a href="/notification" className="relative cursor-pointer">	3✔
85	<img src={notificationBell} className="w-[25px] h-[25px]" alt="Notification Bell" />	3✔
86	<span className="absolute min-w-5 h-5 top-1 right-[14px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">	3✔
87	0	3✔
88	</span>	3✔
89	</a>	3✔
90	<a href="/cart" className="relative cursor-pointer">	3✔
91	<img src={cart} alt="Cart Icon" className="w-[25px] h-[25px]" />	3✔
92	<span className="absolute min-w-5 h5 top-1 right-[6px] mt-[-10px] mr-[-15px] bg-orange text-white text-xs flex items-center justify-center rounded-full leading-none p-1">	3✔
93	{cartItems.length}	3✔
94	</span>	3✔
95	</a>	3✔
96	<img	3✔
97	src={user}	3✔
98	onClick={desktopMenuHandler}	3✔
99	alt="User Icon"	3✔
100	className="w-[25px] h-[25px]"	3✔
101	data-testid="userIcon"	3✔
102	/>	3✔
103	<img	3✔
104	onClick={() => setShowMenu((prevState) => !prevState)}	3✔
105	src={menuIcon}	3✔
106	className="w-[25px] h-[25px]"	3✔
107	alt="Menu Icon"	3✔
108	data-testid="menuIcon"	3✔
109	/>	3✔
110	</div>	3✔
111	)}	23✔
112		23✔
113	{showMenu && (	23!
114	<div	×
115	className={`absolute ${userToken ? 'top-32' : 'top-20'} left-0 w-[100%] bg-slate-100 h-[500px] p-6 flex flex-col gap-6`}	×
116	data-testid="mobileMenu"	×
117	>	×
118	<div className={`flex ${userToken ? 'justify-end' : 'justify-between'}`}>	×
119	{!userToken && (	×
120	<div onClick={() => setShowMenu(false)}>	×
121	<Link to="/login">	×
122	<Login data-testid="loginLink" />	×
123	</Link>	×
124	</div>	×
125	)}	×
126	<img onClick={() => setShowMenu(false)} src={closeIcon} alt="Close Icon" />	×
127	</div>	×
128	<div className="flex flex-col gap-3 items-center">	×
129	<CategoriesMenu setShowMenu={setShowMenu} />	×
130	</div>	×
131	</div>	×
132	)}	23✔
133		23✔
134	<div className=" hidden lg:w-[40%] xmd:w-[40%] min-h-10 xmd:flex items-center justify-between gap-x-1 px-4 py-2 border border-neutrals500 bg-white rounded-3xl">	23✔
135	<input	23✔
136	className="w-full h-[100%] border-none outline-none bg-white text-grey2 text-base placeholder-grey2"	23✔
137	type="text"	23✔
138	id="searchInput"	23✔
139	placeholder="search for anything"	23✔
140	value={searchTerm}	23✔
141	onChange={handleSearchInputChange}	23✔
142	onKeyDown={handleSearchSubmit}	23✔
143	data-testid="searchInput"	23✔
144	/>	23✔
145	<Search strokeWidth={1.5} className="text-orange" />	23✔
146	</div>	23✔
147		23✔
148	<div className="hidden xmd:flex items-center justify-end sm:gap-x-5 lg:gap-x-10">	23✔
149	{!userToken && (	23✔
150	<Link to="/login" data-testid="loginLink">	19✔
151	<Login />	19✔
152	</Link>	19✔
153	)}	23✔
154	{userToken && (	23✔
155	<a href="/notification" className="relative cursor-pointer">	3✔
156	<img src={notificationBell} alt="Notification Bell" className="w-7 h-7" />	3✔
157	<span className="absolute min-w-5 h-5 top-1 right-[12px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">	3✔
158	0	3✔
159	</span>	3✔
160	</a>	3✔
161	)}	23✔
162	<a href="/cart" className="relative cursor-pointer" data-testid="cart">	23✔
163	<img src={cart} alt="Cart Icon" className="w-7 h-7" />	23✔
164	<span className="absolute min-w-5 h-5 top-1 right-[5px] mt-[-10px] mr-[-15px] bg-orange text-white text-sm flex items-center justify-center rounded-full leading-none p-1">	23✔
165	{cartItems.length}	23✔
166	</span>	23✔
167	</a>	23✔
168	{userToken && (	23✔
169	<div onClick={desktopMenuHandler} className="relative cursor-pointer" data-testid="desktopMenuIcon">	3✔
170	<img src={user} alt="User Icon" className="w-7 h-7" data-testid="userIcon" />	3✔
171	</div>	3✔
172	)}	3✔
173	</div>	3✔
174	{userToken && showDesktopMenu && (	3✔
175	<div	3✔
176	className="absolute top-[130px] right-[25%] xmd:right-6 xmd:top-[12vh]"	23✔
177	onClick={() => setShowDesktopMenu(false)}	23✔
178	>	23✔
UNCOV 179	<DesktopMenu />	×
UNCOV 180	</div>	×
UNCOV 181	)}	×
182	</nav>	×
183	);	×
184	}	×
185		23✔
186	export default Navbar;	23✔

atlp-rwanda / knights-ecomm-fe / 9845696119

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