9707761100

Committed 28 Jun 2024 05:09AM UTC coverage: 82.584% (-4.2%) from 86.803%

Build # 9707761100

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

197 of 337 branches covered (58.46%)

Branch coverage included in aggregate %.

346 of 537 new or added lines in 12 files covered. (64.43%)

39 existing lines in 2 files now uncovered.

3037 of 3579 relevant lines covered (84.86%)

3.17 hits per line

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

66.88

/src/pages/LandingPage/Home.tsx

import React, { useEffect, useState } from 'react';
import CategoriesMenu from '../../components/Menu/CategoriesMenu';
import ClientProductCard, { ProductProp } from '../../components/Products/ProductCard/ClientProductCard';
import axios from 'axios';
import { useDispatch, useSelector } from 'react-redux';
import { AppDispatch, RootState } from '../../redux/store';
import HeroSection from '../../components/Banners/HeroSection';
import { setBanners, setCurrentBanner } from '../../redux/reducers/bannerReducer';
import { FormatPosted, calculateRate } from '../../test/utils/bannerRateTime';
import Banner from '../../components/Banners/Banner';

const Home = () => {
  const [productList, setProductList] = useState<ProductProp[]>([]); //All products
  const [selectedProducts, setSelectedProducts] = useState<JSX.Element[]>([]);
  const [viewProducts, setViewProducts] = useState<JSX.Element[]>([]);
  const [viewItems, setViewItems] = useState(4);
  const { currentCategory } = useSelector((state: RootState) => state.category);
  const { banners, currentBanner } = useSelector((state: RootState) => state.banner);
  const [selectedBanner, setSelectedBanners] = useState<JSX.Element[]>([]);
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    axios
      .get(`${import.meta.env.VITE_APP_API_URL}/product/all`)
      .then((response) => {
        setProductList(response.data.data.products);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  useEffect(() => {
    const productCards = [];
    for (let i = 0; i < productList.length; i++) {
      if (!currentCategory) {
        productCards.push(<ClientProductCard product={productList[i]} key={i} />);
      }
      if (currentCategory) {
        for (let j = 0; j < productList[i].categories.length; j++) {
          if (currentCategory.toLowerCase() === productList[i].categories[j].name.toLowerCase()) {
            productCards.push(<ClientProductCard product={productList[i]} key={i} />);
          }
        }
      }
    }
    if (productCards) {
      setSelectedProducts(productCards);
    }
  }, [currentCategory, productList, viewItems]);

  useEffect(() => {
    const tempBanners = [];
    for (let i = 0; i < productList.length; i++) {
      if (productList[i].oldPrice) {
        const result = calculateRate(productList[i].newPrice, productList[i].oldPrice!);
        if (result) {
          const time = FormatPosted(new Date(productList[i].updatedAt));
          tempBanners.push({
            rate: result,
            time: time,
            title: productList[i].name,
            id: productList[i].id,
            image: productList[i].images[0]
          });
        }
      }
    }
    tempBanners.length && dispatch(setBanners(tempBanners));
  }, [dispatch, productList]);

  useEffect(() => {
    let productCards;
    if (selectedProducts.length >= viewItems) {
      productCards = selectedProducts.slice(0, viewItems);
    } else {
      productCards = selectedProducts;
    }
    setViewProducts(productCards);
  }, [viewItems, selectedProducts]);

  const handleAddMore = () => {
    setViewItems((prevViewItems) => prevViewItems + 4);
  };

  useEffect(() => {
    const bannerElements: JSX.Element[] = [];
    banners.forEach((banner) => {
      bannerElements.push(<Banner rate={banner.rate} time={banner.time} image={banner.image} />);
    });
    console.log(bannerElements);

    banners.length > 0 && setSelectedBanners(bannerElements);
    const intervalIdentifier = setInterval(() => {
      if (banners.length > currentBanner) {
        dispatch(setCurrentBanner(currentBanner + 1));
      } else {
        dispatch(setCurrentBanner(0));
      }
    }, 10000);
    return () => clearInterval(intervalIdentifier);
  }, [banners, currentBanner, dispatch]);

  return (
    <div className="text-baseBlack">
      <div className="hidden xmd:flex">
        <CategoriesMenu />
      </div>
      <div>
        <div>{currentBanner === 0 && <HeroSection />}</div>
        <div className="flex w-[100%] justify-center">{currentBanner > 0 && selectedBanner[currentBanner - 1]}</div>
      </div>
      <div className="flex flex-col items-center justify-around gap-y-12 py-12 xmd:px-8 lg:px-16" id="products">
        <h1 className="text-2xl font-medium">Explore our collections</h1>
        <div className="w-full flex gap-y-10 justify-center flex-wrap gap-x-5 px-6 xmd:px-0">
          {viewProducts.length > 0 ? viewProducts : `${currentCategory} Products sold out !! Come back later`}
          {/* <ClientProductCard /> */}
        </div>
      </div>
      {selectedProducts.length > viewItems && (
        <div className="w-full flex items-center justify-center p-12">
          <button
            onClick={handleAddMore}
            className="w-[250px] flex justify-center gap-x-3 items-center rounded-3xl min-h-[50px] ml-1 text-primary border  border-primary hover:bg-gray-100"
          >
            Load more products
          </button>
        </div>
      )}
    </div>
  );
};

export default Home;

1	import React, { useEffect, useState } from 'react';	1✔
2	import CategoriesMenu from '../../components/Menu/CategoriesMenu';	1✔
3	import ClientProductCard, { ProductProp } from '../../components/Products/ProductCard/ClientProductCard';	1✔
4	import axios from 'axios';	1✔
5	import { useDispatch, useSelector } from 'react-redux';	1✔
6	import { AppDispatch, RootState } from '../../redux/store';	1✔
7	import HeroSection from '../../components/Banners/HeroSection';	1✔
8	import { setBanners, setCurrentBanner } from '../../redux/reducers/bannerReducer';	1✔
9	import { FormatPosted, calculateRate } from '../../test/utils/bannerRateTime';	1✔
10	import Banner from '../../components/Banners/Banner';	1✔
11		1✔
12	const Home = () => {	1✔
13	const [productList, setProductList] = useState<ProductProp[]>([]); //All products	1✔
14	const [selectedProducts, setSelectedProducts] = useState<JSX.Element[]>([]);	1✔
15	const [viewProducts, setViewProducts] = useState<JSX.Element[]>([]);	6✔
16	const [viewItems, setViewItems] = useState(4);	6✔
17	const { currentCategory } = useSelector((state: RootState) => state.category);	6✔
18	const { banners, currentBanner } = useSelector((state: RootState) => state.banner);	6✔
19	const [selectedBanner, setSelectedBanners] = useState<JSX.Element[]>([]);	6✔
20	const dispatch = useDispatch<AppDispatch>();	6✔
21		6✔
22	useEffect(() => {	6✔
23	axios	6✔
24	.get(`${import.meta.env.VITE_APP_API_URL}/product/all`)	6✔
25	.then((response) => {	2✔
26	setProductList(response.data.data.products);	2✔
27	})	2✔
NEW 28	.catch((error) => {	×
29	console.log(error);	2✔
30	});	2✔
NEW 31	}, []);	×
32		2✔
33	useEffect(() => {	6✔
34	const productCards = [];	6✔
35	for (let i = 0; i < productList.length; i++) {	6✔
36	if (!currentCategory) {	2✔
37	productCards.push(<ClientProductCard product={productList[i]} key={i} />);	2!
NEW 38	}	×
NEW 39	if (currentCategory) {	×
NEW 40	for (let j = 0; j < productList[i].categories.length; j++) {	×
NEW 41	if (currentCategory.toLowerCase() === productList[i].categories[j].name.toLowerCase()) {	×
NEW 42	productCards.push(<ClientProductCard product={productList[i]} key={i} />);	×
NEW 43	}	×
NEW 44	}	×
NEW 45	}	×
NEW 46	}	×
NEW 47	if (productCards) {	×
NEW 48	setSelectedProducts(productCards);	×
49	}	2✔
50	}, [currentCategory, productList, viewItems]);	2✔
51		2✔
52	useEffect(() => {	6✔
53	const tempBanners = [];	6✔
54	for (let i = 0; i < productList.length; i++) {	6✔
55	if (productList[i].oldPrice) {	2✔
56	const result = calculateRate(productList[i].newPrice, productList[i].oldPrice!);	2!
NEW 57	if (result) {	×
NEW 58	const time = FormatPosted(new Date(productList[i].updatedAt));	×
NEW 59	tempBanners.push({	×
NEW 60	rate: result,	×
NEW 61	time: time,	×
NEW 62	title: productList[i].name,	×
NEW 63	id: productList[i].id,	×
NEW 64	image: productList[i].images[0]	×
NEW 65	});	×
NEW 66	}	×
NEW 67	}	×
NEW 68	}	×
NEW 69	tempBanners.length && dispatch(setBanners(tempBanners));	×
NEW 70	}, [dispatch, productList]);	×
71		2!
72	useEffect(() => {	6✔
73	let productCards;	6✔
74	if (selectedProducts.length >= viewItems) {	6✔
75	productCards = selectedProducts.slice(0, viewItems);	4✔
76	} else {	4!
NEW 77	productCards = selectedProducts;	×
78	}	4✔
79	setViewProducts(productCards);	4✔
80	}, [viewItems, selectedProducts]);	4✔
81		4✔
82	const handleAddMore = () => {	6✔
83	setViewItems((prevViewItems) => prevViewItems + 4);	6✔
84	};	6✔
NEW 85		×
NEW 86	useEffect(() => {	×
87	const bannerElements: JSX.Element[] = [];	6✔
88	banners.forEach((banner) => {	6✔
89	bannerElements.push(<Banner rate={banner.rate} time={banner.time} image={banner.image} />);	2✔
90	});	2✔
NEW 91	console.log(bannerElements);	×
92		2✔
93	banners.length > 0 && setSelectedBanners(bannerElements);	2✔
94	const intervalIdentifier = setInterval(() => {	2✔
95	if (banners.length > currentBanner) {	2!
96	dispatch(setCurrentBanner(currentBanner + 1));	2✔
NEW 97	} else {	×
NEW 98	dispatch(setCurrentBanner(0));	×
NEW 99	}	×
NEW 100	}, 10000);	×
NEW 101	return () => clearInterval(intervalIdentifier);	×
102	}, [banners, currentBanner, dispatch]);	2✔
103		2✔
104	return (	6✔
105	<div className="text-baseBlack">	6✔
106	<div className="hidden xmd:flex">	6✔
107	<CategoriesMenu />	6✔
108	</div>	6✔
109	<div>	6✔
110	<div>{currentBanner === 0 && <HeroSection />}</div>	6✔
111	<div className="flex w-[100%] justify-center">{currentBanner > 0 && selectedBanner[currentBanner - 1]}</div>	6✔
112	</div>	6✔
113	<div className="flex flex-col items-center justify-around gap-y-12 py-12 xmd:px-8 lg:px-16" id="products">	6✔
114	<h1 className="text-2xl font-medium">Explore our collections</h1>	6!
115	<div className="w-full flex gap-y-10 justify-center flex-wrap gap-x-5 px-6 xmd:px-0">	6✔
116	{viewProducts.length > 0 ? viewProducts : `${currentCategory} Products sold out !! Come back later`}	6✔
117	{/* <ClientProductCard /> */}	6✔
118	</div>	6✔
119	</div>	6✔
120	{selectedProducts.length > viewItems && (	6✔
121	<div className="w-full flex items-center justify-center p-12">	6✔
122	<button	6✔
123	onClick={handleAddMore}	6!
NEW 124	className="w-[250px] flex justify-center gap-x-3 items-center rounded-3xl min-h-[50px] ml-1 text-primary border border-primary hover:bg-gray-100"	×
125	>	6✔
126	Load more products	6✔
127	</button>	6✔
128	</div>	6✔
129	)}	6!
NEW 130	</div>	×
NEW 131	);	×
NEW 132	};	×
NEW 133		×
NEW 134	export default Home;	×

atlp-rwanda / knights-ecomm-fe / 9707761100

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