#675

Committed 08 Jul 2024 07:21AM UTC coverage: 92.521% (+0.4%) from 92.114%

Build # #675

Build Type

Committed by

Commit Message

feat(search): Implement product search
-
A buyer needs to have a way to search for a product
t. by name, by price range, by category, etc it can also be a combination of two or more with AND operation

- [Delivers #187419017]

Pull Request Pull Request #33: #187419017 Users should be able to search

Run Details

405 of 503 branches covered (80.52%)

Branch coverage included in aggregate %.

336 of 346 new or added lines in 6 files covered. (97.11%)

1 existing line in 1 file now uncovered.

5137 of 5487 relevant lines covered (93.62%)

11.8 hits per line

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

97.12

/src/components/Nav.tsx

import { useAppDispatch, useAppSelector } from '../redux/hooks/hooks';
import { toggleModel } from '../redux/features/navSlice';
import { Link, NavLink } from 'react-router-dom';
import LandingPageModel from '../components/LandingPageModel';
import { nav_logo } from '../utils/images';
import { nav_logo_mobile } from '../utils/images';
import { IoCart, IoMenu } from 'react-icons/io5';
import { ButtonIcon } from './buttons/ButtonIcon';
import ProfileDropdown from './ProfileDropdown';
import { fetchUserProfile } from '../redux/features/userUpdateSlice';
import { useEffect } from 'react';
import Notification from './notification/Notification';
import { manipulateSearchInput } from '../redux/features/SearchSlice';

const Nav = () => {
        const accessToken = localStorage.getItem('access_token') || '';
        const dispatch = useAppDispatch();
        const openModel = useAppSelector((state) => state.nav.openModel);

        const { data } = useAppSelector((state) => state.profile) || {};

        // Fetch user data when the component mounts
        useEffect(() => {
                if (!data && accessToken) {
                        dispatch(fetchUserProfile());
                }
        }, [data, dispatch]);

        const links = [
                { to: '/', label: 'Home' },
                { to: '/products', label: 'Product' },
                { to: '/about', label: 'About Us' },
                { to: '/contacts', label: 'Contact Us' },
        ];

        return (
                <>
                        <LandingPageModel
                                openModel={openModel}
                                toggleModel={() => dispatch(toggleModel())}
                        />

                        <nav className="parent_div fixed top-0 left-0 w-full bg-neutral-white z-50 shadow">
                                <div className="wrapper flex gap-4 ipad:gap-0 laptop:gap-10">
                                        <div className="logo w-[50%] bimobile:w-[30%] ipad:w-[30%]">
                                                <img
                                                        src={nav_logo}
                                                        alt="nav_logo"
                                                        className="nav_logo hidden ipad:flex w-full h-full"
                                                />
                                                <img
                                                        src={nav_logo_mobile}
                                                        alt="nav_logo_mobile"
                                                        className="nav_logo_mobile ipad:hidden w-full h-full"
                                                />
                                        </div>
                                        <div className="navigations flex items-center w-full bg-neutral-darkRe justify-between gap-10 mr-[5%]">
                                                <div className="left_navigations ipad:flex flex-col gap-4 flex-1 hidden py-2">
                                                        <div className="search w-full flex py-2">
                                                                <form className="flex w-full justify-between mobile:mx-[10%] gap-5 tops">
                                                                        <input
                                                                                type="text"
                                                                                placeholder="Search..."
                                                                                className="rounded-l-full rounded-r-full border-2 border-primary-lightblue flex-1 py-1 px-4"
                                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                                        e.target.value
                                                                                                ? dispatch(
                                                                                                                manipulateSearchInput({ name: e.target.value }),
                                                                                                        )
                                                                                                : dispatch(manipulateSearchInput({ name: null }))
                                                                                }
                                                                        />
                                                                        <ButtonIcon className="mobile:py-1 px-10"> Search</ButtonIcon>
                                                                </form>
                                                        </div>
                                                        <div className="nav flex justify-between  pb-4">
                                                                {links.map((link) => (
                                                                        <NavLink
                                                                                key={link.to}
                                                                                to={link.to}
                                                                                className={({ isActive }) =>
                                                                                        `text-lg font-bold py-1 px-10 rounded-r-full rounded-l-full ${
                                                                                                isActive ? 'bg-custom-gradient text-neutral-white' : ''
                                                                                        }`
                                                                                }
                                                                        >
                                                                                {link.label}
                                                                        </NavLink>
                                                                ))}
                                                        </div>
                                                </div>
                                                <div className="right_navigations w-full ipad:w-max flex items-center justify-end gap-6">
                                                        <div className="cart relative pt-2">
                                                                <IoCart className="text-3xl mobile:text-3xl text-primary-lightblue" />
                                                                <span className="bg-neutral-darkRed text-sm mobile:text-base p-1 mt-2 absolute -top-3 -right-3 rounded-full flex items-center justify-center text-neutral-white font-semibold mobile:w-6 w-5 h-5 mobile:h-6">
                                                                        10
                                                                </span>
                                                        </div>
                                                        {accessToken ? (
                                                                <>
                                                                        <Notification />
                                                                        <ProfileDropdown image={data?.profileImage} />
                                                                </>
                                                        ) : (
                                                                <Link to={'/login'}>
                                                                        <ButtonIcon className="py-1 mobile:text-sm mobile:px-7 mobile:py-2">
                                                                                Login
                                                                        </ButtonIcon>
                                                                </Link>
                                                        )}
                                                        <IoMenu
                                                                className="ipad:hidden text-4xl bg-custom-gradient mobile:w-12 w-8 h-8 mobile:h-12 p-2 rounded-full text-neutral-white"
                                                                onClick={() => dispatch(toggleModel())}
                                                        />
                                                </div>
                                        </div>
                                </div>
                        </nav>
                </>
        );
};

export default Nav;

1	import { useAppDispatch, useAppSelector } from '../redux/hooks/hooks';	1✔
2	import { toggleModel } from '../redux/features/navSlice';	1✔
3	import { Link, NavLink } from 'react-router-dom';	1✔
4	import LandingPageModel from '../components/LandingPageModel';	1✔
5	import { nav_logo } from '../utils/images';	1✔
6	import { nav_logo_mobile } from '../utils/images';	1✔
7	import { IoCart, IoMenu } from 'react-icons/io5';	1✔
8	import { ButtonIcon } from './buttons/ButtonIcon';	1✔
9	import ProfileDropdown from './ProfileDropdown';	1✔
10	import { fetchUserProfile } from '../redux/features/userUpdateSlice';	1✔
11	import { useEffect } from 'react';	1✔
12	import Notification from './notification/Notification';	1✔
13	import { manipulateSearchInput } from '../redux/features/SearchSlice';	1✔
14		1✔
15	const Nav = () => {	1✔
16	const accessToken = localStorage.getItem('access_token') \|\| '';	9✔
17	const dispatch = useAppDispatch();	9✔
18	const openModel = useAppSelector((state) => state.nav.openModel);	9✔
19		9✔
20	const { data } = useAppSelector((state) => state.profile) \|\| {};	9!
21		9✔
22	// Fetch user data when the component mounts	9✔
23	useEffect(() => {	9✔
24	if (!data && accessToken) {	8✔
25	dispatch(fetchUserProfile());	2✔
26	}	2✔
27	}, [data, dispatch]);	9✔
28		9✔
29	const links = [	9✔
30	{ to: '/', label: 'Home' },	9✔
31	{ to: '/products', label: 'Product' },	9✔
32	{ to: '/about', label: 'About Us' },	9✔
33	{ to: '/contacts', label: 'Contact Us' },	9✔
34	];	9✔
35		9✔
36	return (	9✔
37	<>	9✔
38	<LandingPageModel	9✔
39	openModel={openModel}	9✔
40	toggleModel={() => dispatch(toggleModel())}	9✔
41	/>	9✔
42		9✔
43	<nav className="parent_div fixed top-0 left-0 w-full bg-neutral-white z-50 shadow">	9✔
44	<div className="wrapper flex gap-4 ipad:gap-0 laptop:gap-10">	9✔
45	<div className="logo w-[50%] bimobile:w-[30%] ipad:w-[30%]">	9✔
46	<img	9✔
47	src={nav_logo}	9✔
48	alt="nav_logo"	9✔
49	className="nav_logo hidden ipad:flex w-full h-full"	9✔
50	/>	9✔
51	<img	9✔
52	src={nav_logo_mobile}	9✔
53	alt="nav_logo_mobile"	9✔
54	className="nav_logo_mobile ipad:hidden w-full h-full"	9✔
55	/>	9✔
56	</div>	9✔
57	<div className="navigations flex items-center w-full bg-neutral-darkRe justify-between gap-10 mr-[5%]">	9✔
58	<div className="left_navigations ipad:flex flex-col gap-4 flex-1 hidden py-2">	9✔
59	<div className="search w-full flex py-2">	9✔
60	<form className="flex w-full justify-between mobile:mx-[10%] gap-5 tops">	9✔
61	<input	9✔
62	type="text"	9✔
63	placeholder="Search..."	9✔
64	className="rounded-l-full rounded-r-full border-2 border-primary-lightblue flex-1 py-1 px-4"	9✔
65	onChange={(e: React.ChangeEvent<HTMLInputElement>) =>	9✔
66	e.target.value	7✔
67	? dispatch(	7✔
68	manipulateSearchInput({ name: e.target.value }),	7✔
69	)	7!
NEW 70	: dispatch(manipulateSearchInput({ name: null }))	×
71	}	9✔
72	/>	9✔
73	<ButtonIcon className="mobile:py-1 px-10"> Search</ButtonIcon>	9✔
74	</form>	9✔
75	</div>	9✔
76	<div className="nav flex justify-between pb-4">	9✔
77	{links.map((link) => (	9✔
78	<NavLink	36✔
79	key={link.to}	36✔
80	to={link.to}	36✔
81	className={({ isActive }) =>	36✔
82	`text-lg font-bold py-1 px-10 rounded-r-full rounded-l-full ${	36✔
83	isActive ? 'bg-custom-gradient text-neutral-white' : ''	36✔
84	}`	36✔
85	}	36✔
86	>	36✔
87	{link.label}	36✔
88	</NavLink>	36✔
89	))}	9✔
90	</div>	9✔
91	</div>	9✔
92	<div className="right_navigations w-full ipad:w-max flex items-center justify-end gap-6">	9✔
93	<div className="cart relative pt-2">	9✔
94	<IoCart className="text-3xl mobile:text-3xl text-primary-lightblue" />	9✔
95	<span className="bg-neutral-darkRed text-sm mobile:text-base p-1 mt-2 absolute -top-3 -right-3 rounded-full flex items-center justify-center text-neutral-white font-semibold mobile:w-6 w-5 h-5 mobile:h-6">	9✔
96	10	9✔
97	</span>	9✔
98	</div>	9✔
99	{accessToken ? (	9✔
100	<>	3✔
101	<Notification />	3✔
102	<ProfileDropdown image={data?.profileImage} />	3!
103	</>	3✔
104	) : (	6✔
105	<Link to={'/login'}>	6✔
106	<ButtonIcon className="py-1 mobile:text-sm mobile:px-7 mobile:py-2">	6✔
107	Login	6✔
108	</ButtonIcon>	6✔
109	</Link>	6✔
110	)}	9✔
111	<IoMenu	9✔
112	className="ipad:hidden text-4xl bg-custom-gradient mobile:w-12 w-8 h-8 mobile:h-12 p-2 rounded-full text-neutral-white"	9✔
113	onClick={() => dispatch(toggleModel())}	9✔
114	/>	9✔
115	</div>	9✔
116	</div>	9✔
117	</div>	9✔
118	</nav>	9✔
119	</>	9✔
120	);	9✔
121	};	9✔
122		1✔
123	export default Nav;	1✔

atlp-rwanda / hackers-ec-Fe / #675

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