9712548628

Committed 28 Jun 2024 12:10PM UTC coverage: 86.973% (+0.2%) from 86.803%

Build # 9712548628

Build Type

Pull #42

github

Committed by

aimedivin

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

237 of 373 branches covered (63.54%)

Branch coverage included in aggregate %.

494 of 566 new or added lines in 12 files covered. (87.28%)

17 existing lines in 1 file now uncovered.

3208 of 3588 relevant lines covered (89.41%)

5.14 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);	36✔
14	const sortedCategoriesArray = Object.entries(categories).sort(([, a], [, b]) => b - a);	36✔
15	const [isMobile] = useState(window.innerWidth < 700);	36✔
16	const [displayedCategories, setDisplayedCategories] = useState<JSX.Element[]>([]);	36✔
17		36✔
18	const dispatch = useDispatch();	36✔
19		36✔
20	useEffect(() => {	36✔
21	const categoryArray = sortedCategoriesArray.slice(0, 7).map(([category]) => {	7✔
22	const style = currentCategory.toLowerCase() === category.toLowerCase() ? 'border-b-2' : 'hover:border-b-2';	49✔
23		49!
NEW 24	return (	×
25	<a	49✔
26	onClick={(event) => categoryHandler(event)}	49✔
27	href="#products"	49✔
28	title={category}	49✔
29	key={category}	49✔
30	className={`${style} border-orange cursor-pointer`}	49✔
31	>	49✔
32	{category.length > 10 && !isMobile ? category.slice(0, 10).trim() + '...' : category}{' '}	49✔
33	</a>	49✔
34	);	49✔
35	});	49✔
36		49✔
37	setDisplayedCategories(categoryArray);	49✔
38	// eslint-disable-next-line react-hooks/exhaustive-deps	7✔
39	}, [categories, currentCategory]);	7✔
40		7✔
41	useEffect(() => {	7✔
42	fetchCategories();	36✔
43	// eslint-disable-next-line react-hooks/exhaustive-deps	36✔
44	}, []);	36✔
45		7✔
46	const fetchCategories = async () => {	7✔
47	await axios	36✔
48	.get(`${import.meta.env.VITE_APP_API_URL}/product/categories`)	36✔
49	.then((response) => {	36✔
50	const resCategories: { [name: string]: number } = {};	7✔
51	response.data.categories.forEach((category: Category) => {	7✔
52	const name = category.name.charAt(0).toUpperCase() + category.name.slice(1);	7✔
53	resCategories[name] = category.products.length;	5✔
54	});	5✔
55		3✔
56	const updatedCategories = { ...categories, ...resCategories };	3✔
57	dispatch(setCategoryObj(updatedCategories));	5✔
58	})	5✔
59	.catch((error) => {	5✔
60	console.log(error);	5✔
61	});	7✔
62	};	7✔
63	const categoryHandler = (event: any) => {	5✔
64	if ((event.target as HTMLParagraphElement).title === 'Shop') {	7✔
65	dispatch(setCurrentCategory(''));	7✔
66	} else {	36✔
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)}	36✔
77	className={`${!currentCategory ? 'border-b-2' : 'hover:border-b-2'} border-orange hover:cursor-pointer`}	36✔
78	>	36✔
79	Shop	36✔
80	</p>	36!
81	{displayedCategories}	36✔
82	</nav>	36✔
83	);	36✔
84	};	36✔
85		36✔
86	export default CategoriesMenu;	36✔

atlp-rwanda / knights-ecomm-fe / 9712548628

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