9711098750

Committed 28 Jun 2024 10:06AM UTC coverage: 86.193% (-0.6%) from 86.803%

Build # 9711098750

Build Type

Pull #42

github

Committed by

Calebgisa72

Commit Message

feat(landing-page): implementing landing page for client (buyer)

Pull Request Pull Request #42: feat(landing-page): implementing landing page for client (buyer)

Run Details

228 of 365 branches covered (62.47%)

Branch coverage included in aggregate %.

474 of 553 new or added lines in 13 files covered. (85.71%)

17 existing lines in 1 file now uncovered.

3168 of 3575 relevant lines covered (88.62%)

4.22 hits per line

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

88.35

/src/components/Menu/CategoriesMenu.tsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '../../redux/store';
import { setCategoryObj, setCurrentCategory } from '../../redux/reducers/categoryReducer';
import { Category } from '../Products/ProductCard/ClientProductCard';

interface CategoriesMenu {
  setShowMenu?: React.Dispatch<React.SetStateAction<any>>;
}

const CategoriesMenu = ({ setShowMenu }: CategoriesMenu) => {
  const { categories, currentCategory } = useSelector((state: RootState) => state.category);
  const sortedCategoriesArray = Object.entries(categories).sort(([, a], [, b]) => b - a);
  const [isMobile] = useState(window.innerWidth < 700);
  const [displayedCategories, setDisplayedCategories] = useState<JSX.Element[]>([]);

  const dispatch = useDispatch();

  useEffect(() => {
    const categoryArray = sortedCategoriesArray.slice(0, 7).map(([category]) => {
      const style = currentCategory.toLowerCase() === category.toLowerCase() ? 'border-b-2' : 'hover:border-b-2';

      return (
        <a
          onClick={(event) => categoryHandler(event)}
          href="#products"
          title={category}
          key={category}
          className={`${style} border-orange cursor-pointer`}
        >
          {category.length > 10 && !isMobile ? category.slice(0, 10).trim() + '...' : category}{' '}
        </a>
      );
    });

    setDisplayedCategories(categoryArray);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [categories, currentCategory]);

  useEffect(() => {
    fetchCategories();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const fetchCategories = async () => {
    await axios
      .get(`${import.meta.env.VITE_APP_API_URL}/product/categories`)
      .then((response) => {
        const resCategories: { [name: string]: number } = {};
        response.data.categories.forEach((category: Category) => {
          const name = category.name.charAt(0).toUpperCase() + category.name.slice(1);
          resCategories[name] = category.products.length;
        });

        const updatedCategories = { ...categories, ...resCategories };
        dispatch(setCategoryObj(updatedCategories));
      })
      .catch((error) => {
        console.log(error);
      });
  };
  const categoryHandler = (event: any) => {
    if ((event.target as HTMLParagraphElement).title === 'Shop') {
      dispatch(setCurrentCategory(''));
    } else {
      dispatch(setCurrentCategory((event.target as HTMLParagraphElement).title));
    }
    if (setShowMenu) {
      setShowMenu(false);
    }
  };
  return (
    <nav className="flex flex-col gap-5 xmd:gap-8 md:gap-10 lg:gap-12 xmd:flex xmd:flex-row items-center justify-between xmd:justify-center h-16 text-neutral-600 text-sm xmd:w-[100%]">
      <p
        onClick={(event) => categoryHandler(event)}
        className={`${!currentCategory ? 'border-b-2' : 'hover:border-b-2'} border-orange hover:cursor-pointer`}
      >
        Shop
      </p>
      {displayedCategories}
    </nav>
  );
};

export default CategoriesMenu;

1	import React, { useEffect, useState } from 'react';	1✔
2	import axios from 'axios';	1✔
3	import { useDispatch, useSelector } from 'react-redux';	1✔
4	import { RootState } from '../../redux/store';	1✔
5	import { setCategoryObj, setCurrentCategory } from '../../redux/reducers/categoryReducer';	1✔
6	import { Category } from '../Products/ProductCard/ClientProductCard';	1✔
7		1✔
8	interface CategoriesMenu {	1✔
9	setShowMenu?: React.Dispatch<React.SetStateAction<any>>;	1✔
10	}	1✔
11		1✔
12	const CategoriesMenu = ({ setShowMenu }: CategoriesMenu) => {	1✔
13	const { categories, currentCategory } = useSelector((state: RootState) => state.category);	23✔
14	const sortedCategoriesArray = Object.entries(categories).sort(([, a], [, b]) => b - a);	23✔
15	const [isMobile] = useState(window.innerWidth < 700);	23✔
16	const [displayedCategories, setDisplayedCategories] = useState<JSX.Element[]>([]);	23✔
17		23✔
18	const dispatch = useDispatch();	23✔
19		23✔
20	useEffect(() => {	23✔
21	const categoryArray = sortedCategoriesArray.slice(0, 7).map(([category]) => {	5✔
22	const style = currentCategory.toLowerCase() === category.toLowerCase() ? 'border-b-2' : 'hover:border-b-2';	35✔
23		35!
NEW 24	return (	×
25	<a	35✔
26	onClick={(event) => categoryHandler(event)}	35✔
27	href="#products"	35✔
28	title={category}	35✔
29	key={category}	35✔
30	className={`${style} border-orange cursor-pointer`}	35✔
31	>	35✔
32	{category.length > 10 && !isMobile ? category.slice(0, 10).trim() + '...' : category}{' '}	35✔
33	</a>	35✔
34	);	35✔
35	});	35✔
36		35✔
37	setDisplayedCategories(categoryArray);	35✔
38	// eslint-disable-next-line react-hooks/exhaustive-deps	5✔
39	}, [categories, currentCategory]);	5✔
40		5✔
41	useEffect(() => {	5✔
42	fetchCategories();	23✔
43	// eslint-disable-next-line react-hooks/exhaustive-deps	23✔
44	}, []);	23✔
45		5✔
46	const fetchCategories = async () => {	5✔
47	await axios	23✔
48	.get(`${import.meta.env.VITE_APP_API_URL}/product/categories`)	23✔
49	.then((response) => {	23✔
50	const resCategories: { [name: string]: number } = {};	5✔
51	response.data.categories.forEach((category: Category) => {	5✔
52	const name = category.name.charAt(0).toUpperCase() + category.name.slice(1);	5✔
53	resCategories[name] = category.products.length;	3✔
54	});	3✔
55		2✔
56	const updatedCategories = { ...categories, ...resCategories };	2✔
57	dispatch(setCategoryObj(updatedCategories));	3✔
58	})	3✔
59	.catch((error) => {	3✔
60	console.log(error);	3✔
61	});	5✔
62	};	5✔
63	const categoryHandler = (event: any) => {	3✔
64	if ((event.target as HTMLParagraphElement).title === 'Shop') {	5✔
65	dispatch(setCurrentCategory(''));	5✔
66	} else {	23✔
NEW 67	dispatch(setCurrentCategory((event.target as HTMLParagraphElement).title));	×
NEW 68	}	×
NEW 69	if (setShowMenu) {	×
NEW 70	setShowMenu(false);	×
NEW 71	}	×
NEW 72	};	×
NEW 73	return (	×
NEW 74	<nav className="flex flex-col gap-5 xmd:gap-8 md:gap-10 lg:gap-12 xmd:flex xmd:flex-row items-center justify-between xmd:justify-center h-16 text-neutral-600 text-sm xmd:w-[100%]">	×
NEW 75	<p	×
76	onClick={(event) => categoryHandler(event)}	23✔
77	className={`${!currentCategory ? 'border-b-2' : 'hover:border-b-2'} border-orange hover:cursor-pointer`}	23✔
78	>	23✔
79	Shop	23✔
80	</p>	23!
81	{displayedCategories}	23✔
82	</nav>	23✔
83	);	23✔
84	};	23✔
85		23✔
86	export default CategoriesMenu;	23✔

atlp-rwanda / knights-ecomm-fe / 9711098750

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