#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.18

/src/components/LandingPageModel.tsx

import React from 'react';
import { NavLink } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import { useAppDispatch } from '../redux/hooks/hooks';
import { manipulateSearchInput } from '../redux/features/SearchSlice';

interface ModalProps {
        openModel: boolean;
        toggleModel: () => void;
}

const LandingPageModel: React.FC<ModalProps> = ({ openModel, toggleModel }) => {
        const dispatch = useAppDispatch();
        return (
                <AnimatePresence>
                        {openModel && (
                                <motion.div
                                        className="w-full h-screen backdrop-blur fixed z-50 flex flex-col top-[5%] ipad:top-[10%] p-10 ipad:hidden"
                                        initial="hidden"
                                        animate="visible"
                                        exit="exit"
                                >
                                        <motion.div
                                                className="middle_nav flex-col pt-16 mobile:pt-24 mt-4 mobile:mt-10 py-4 z-50 bg-neutral-white h-full rounded-md shadow"
                                                initial="hidden"
                                                animate="visible"
                                                exit="exit"
                                        >
                                                <form className="nav_search flex flex-col mobile:flex-row items-center justify-center gap-4 px-4 mobile:px-0">
                                                        <input
                                                                type="text"
                                                                className="border-primary-lightblue border-2 inline-block rounded-r-full rounded-l-full h-8 w-full mobile:w-[60%] px-4"
                                                                placeholder="Search ..."
                                                                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                                                                        e.target.value
                                                                                ? dispatch(manipulateSearchInput({ name: e.target.value }))
                                                                                : dispatch(manipulateSearchInput({ name: null }))
                                                                }
                                                        />
                                                        <button onClick={toggleModel}>Search</button>
                                                </form>
                                                <div className="w-full flex flex-col items-center">
                                                        <nav className="navigations flex flex-col items-center justify-around mt-10 text-sm mobile:text-base font-semibold w-1/2 p-2 gap-10">
                                                                {['Home', 'Products', 'About', 'Contacts'].map((text) => (
                                                                        <motion.div key={text}>
                                                                                <NavLink
                                                                                        to={text === 'Home' ? '/' : `/${text.toLowerCase()}`}
                                                                                        className="text-2xl w-full py-1 px-4 rounded"
                                                                                        onClick={toggleModel}
                                                                                >
                                                                                        {text}
                                                                                </NavLink>
                                                                        </motion.div>
                                                                ))}
                                                        </nav>
                                                </div>
                                        </motion.div>
                                </motion.div>
                        )}
                </AnimatePresence>
        );
};

export default LandingPageModel;

1	import React from 'react';	1✔
2	import { NavLink } from 'react-router-dom';	1✔
3	import { motion, AnimatePresence } from 'framer-motion';	1✔
4	import { useAppDispatch } from '../redux/hooks/hooks';	1✔
5	import { manipulateSearchInput } from '../redux/features/SearchSlice';	1✔
6		1✔
7	interface ModalProps {	1✔
8	openModel: boolean;	1✔
9	toggleModel: () => void;	1✔
10	}	1✔
11		1✔
12	const LandingPageModel: React.FC<ModalProps> = ({ openModel, toggleModel }) => {	1✔
13	const dispatch = useAppDispatch();	13✔
14	return (	13✔
15	<AnimatePresence>	13✔
16	{openModel && (	13✔
17	<motion.div	4✔
18	className="w-full h-screen backdrop-blur fixed z-50 flex flex-col top-[5%] ipad:top-[10%] p-10 ipad:hidden"	4✔
19	initial="hidden"	4✔
20	animate="visible"	4✔
21	exit="exit"	4✔
22	>	4✔
23	<motion.div	4✔
24	className="middle_nav flex-col pt-16 mobile:pt-24 mt-4 mobile:mt-10 py-4 z-50 bg-neutral-white h-full rounded-md shadow"	4✔
25	initial="hidden"	4✔
26	animate="visible"	4✔
27	exit="exit"	4✔
28	>	4✔
29	<form className="nav_search flex flex-col mobile:flex-row items-center justify-center gap-4 px-4 mobile:px-0">	4✔
30	<input	4✔
31	type="text"	4✔
32	className="border-primary-lightblue border-2 inline-block rounded-r-full rounded-l-full h-8 w-full mobile:w-[60%] px-4"	4✔
33	placeholder="Search ..."	4✔
34	onChange={(e: React.ChangeEvent<HTMLInputElement>) =>	4✔
35	e.target.value	7✔
36	? dispatch(manipulateSearchInput({ name: e.target.value }))	7!
NEW 37	: dispatch(manipulateSearchInput({ name: null }))	×
38	}	4✔
39	/>	4✔
40	<button onClick={toggleModel}>Search</button>	4✔
41	</form>	4✔
42	<div className="w-full flex flex-col items-center">	4✔
43	<nav className="navigations flex flex-col items-center justify-around mt-10 text-sm mobile:text-base font-semibold w-1/2 p-2 gap-10">	4✔
44	{['Home', 'Products', 'About', 'Contacts'].map((text) => (	4✔
45	<motion.div key={text}>	16✔
46	<NavLink	16✔
47	to={text === 'Home' ? '/' : `/${text.toLowerCase()}`}	16✔
48	className="text-2xl w-full py-1 px-4 rounded"	16✔
49	onClick={toggleModel}	16✔
50	>	16✔
51	{text}	16✔
52	</NavLink>	16✔
53	</motion.div>	16✔
54	))}	4✔
55	</nav>	4✔
56	</div>	4✔
57	</motion.div>	4✔
58	</motion.div>	4✔
59	)}	13✔
60	</AnimatePresence>	13✔
61	);	13✔
62	};	13✔
63		1✔
64	export default LandingPageModel;	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