5cdbd4dc-f1e9-4fa9-b081-a21b8f6064e6

Committed 10 Jul 2024 01:57PM UTC coverage: 89.04% (-4.0%) from 93.026%

Build # 5cdbd4dc-f1e9-4fa9-b081-a21b8f6064e6

Build Type

Pull #39

circleci

Committed by

Bananayosostene

Commit Message

A buyer should be able to checkout [#187364703]

Pull Request Pull Request #39: [#187364703] ft-A buyer should be able to checkout

Run Details

367 of 450 branches covered (81.56%)

Branch coverage included in aggregate %.

23 of 85 new or added lines in 5 files covered. (27.06%)

5 existing lines in 1 file now uncovered.

1006 of 1092 relevant lines covered (92.12%)

7.96 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>
            <li>
              <Link to="/checkout" className="text-sm">
                checkout
              </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="" 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="" 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	<li>
62	<Link to="/checkout" className="text-sm">
63	checkout
64	</Link>
65	</li>
66	</ul>
67	</div>
68	<div className="nav-icons flex-between hidden tablet:flex">
69	<ul className="flex-between space-x-4">
70	<li>
71	<div
72	className="search-container bg-gray rounded-sm flex-between space-x-2 p-2 cursor-pointer"
NEW UNCOV 73	onClick={() => setShowSearch(!showSearch)}	×
74	>
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 />
83	</Link>
84	</li>
85	<li>
86	<Link to="" className="text-lg">
87	{" "}
88	<IoCartOutline />
89	</Link>
90	</li>
91	<li>
92	<Link to="" className="text-lg">
93	{" "}
94	<IoNotificationsOutline />
95	</Link>
96	</li>
97	<li>
98	<Link to="" className="text-lg">
99	{" "}
100	<IoLocationOutline />
101	</Link>
102	</li>
103	</ul>
104	</div>
105	<div className=" w-[5%] hidden tablet:flex">
106	{!isLoggedIn ? (	14✔
107	<Link to="/login" className="text-lg">
108	<RxAvatar className="text-2xl" />
109	</Link>
110	) : (
111	<Link to="/view-edit-profile" className="text-sm">
112	<RxAvatar className="text-2xl" />
113	</Link>
114	)}
115	</div>
116	<div className="flex gap-10 items-center">
117	<CiSearch
118	className="text-xl flex tablet:hidden"
NEW UNCOV 119	onClick={() => setShowSearch(!showSearch)}	×
120	/>
121	<button
122	onClick={() => setIsBurgerShown(!burgerShown)}	5✔
123	className="tablet:hidden"
124	>
125	{!burgerShown ? (	14✔
126	<RxHamburgerMenu className="text-3xl " />
127	) : (
128	<RxCross2 className="text-3xl " />
129	)}
130	</button>
131	</div>
132
133	{burgerShown && (	18✔
134	<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">
135	<ul className="w-full p-4 space-y-2">
136	<li className="bg-gray rounded-sm">
137	<Link to="" className="text-lg">
138	<div className="flex-between justify-center space-x-1 p-2 ">
139	<IoMdHome />
140	<p className="text-xs">Home</p>
141	</div>
142	</Link>
143	</li>
144	<li className=" rounded-sm hover:bg-white">
145	<Link to="" className="text-lg">
146	<div className="flex-between justify-center space-x-1 p-2 ">
147	<IoNotificationsOutline className="text-gray_100" />
148	<p className="text-xs text-gray_100">Notifications</p>
149	</div>
150	</Link>
151	</li>
152
153	<li className=" rounded-sm hover:bg-white transition-all">
154	<Link to="" className="text-lg">
155	<div className="flex-between justify-center space-x-1 p-2 ">
156	<CiHeart className="text-gray_100" />
157	<p className="text-xs text-gray_100">My wishlist</p>
158	</div>
159	</Link>
160	</li>
161	<li className=" rounded-sm hover:bg-white transition-all">
162	<Link to="" className="text-lg">
163	<div className="flex-between justify-center space-x-1 p-2 ">
164	<IoCartOutline className="text-gray_100" />
165	<p className="text-xs text-gray_100">My cart</p>
166	</div>
167	</Link>
168	</li>
169
170	<li className=" rounded-sm hover:bg-white transition-all">
171	<Link to="" className="text-lg">
172	<div className="flex-between justify-center space-x-1 p-2 ">
173	<IoLocationOutline className="text-gray_100" />
174	<p className="text-xs text-gray_100">My Orders</p>
175	</div>
176	</Link>
177	</li>
178
179	<li className=" rounded-sm hover:bg-white transition-all">
180	{isLoggedIn ? (	4✔
181	<Link
182	to="/view-edit-profile"
183	className="text-lg"
NEW UNCOV 184	onClick={() => setIsBurgerShown(false)}	×
185	>
186	<div className="flex-between justify-center space-x-1 p-2">
187	<IoSettingsSharp className="text-gray_100" />
188	<p className="text-xs text-gray_100">User Settings</p>
189	</div>
190	</Link>
191	) : (
192	<Link
193	to="/login"
194	className="text-lg"
NEW UNCOV 195	onClick={() => setIsBurgerShown(false)}	×
196	>
197	<div className="flex-between justify-center space-x-1 p-2">
198	<IoSettingsSharp className="text-gray_100" />
199	<p className="text-xs text-gray_100">User Settings</p>
200	</div>
201	</Link>
202	)}
203	</li>
204
205	{isLoggedIn ? (	4✔
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	<IoMdLogOut className="text-gray_100" />
210	<p className="text-xs text-gray_100">Logout</p>
211	</div>
212	</Link>
213	</li>
214	) : (
215	<li className=" rounded-sm hover:bg-white transition-all">
216	<Link
217	to="/login"
218	className="text-lg"
219	onClick={() => {
220	setIsBurgerShown(!burgerShown);	1✔
221	}}
222	>
223	<div className="flex-between justify-center space-x-1 p-2 ">
224	<IoMdLogIn className="text-gray_100" />
225	<p className="text-xs text-gray_100">Login</p>
226	</div>
227	</Link>
228	</li>
229	)}
230	</ul>
231	</div>
232	)}
233	</nav>
234	{showSearch && (	14!
235	<div className="fixed z-20 bg-[rgba(0,0,0,0.5)] w-full h-full mx-auto ">
236	<SearchComponent
237	hideSearch={() => {
NEW UNCOV 238	setShowSearch(false);	×
239	}}
240	/>
241	</div>
242	)}
243	</div>
244	);
245	};
246
247	export default Navbar;	2✔

atlp-rwanda / e-commerce-bitcrafters-fn / 5cdbd4dc-f1e9-4fa9-b081-a21b8f6064e6

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