atlp-rwanda/knights-ecomm-fe | Build 9842317120 | src/pages/LandingPage/Home.tsx | Coveralls

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 '../../utils/bannerRateTime';

1✔

10

import Banner from '../../components/Banners/Banner';

1✔

11

import toast from 'react-hot-toast';

1✔

12

import { PropagateLoader } from 'react-spinners';

1✔

13

import { useSwipeable } from 'react-swipeable';

1✔

14

import BannerIdentifier from '../../components/Banners/BannerIdentifier';

1✔

15

import fetchWishlist from '../../utils/wishlistFunctions/fetchWishlist';

1✔

16

1✔

17

const Home = () => {

1✔

18

  const [productList, setProductList] = useState<ProductProp[]>([]);

1✔

19

  const [selectedProducts, setSelectedProducts] = useState<JSX.Element[]>([]);

1✔

20

  const [viewProducts, setViewProducts] = useState<JSX.Element[]>([]);

40✔

21

  const [viewItems, setViewItems] = useState(12);

40✔

22

  const { currentCategory } = useSelector((state: RootState) => state.category);

40✔

23

  const { banners, currentBanner } = useSelector((state: RootState) => state.banner);

40✔

24

  const [loading, setLoading] = useState(true);

40✔

25

  const [selectedBanner, setSelectedBanners] = useState<JSX.Element[]>([]);

40✔

26

  const [dotIdentifies, setDotIdentifiers] = useState<JSX.Element[]>([]);

40✔

27

  const dispatch = useDispatch<AppDispatch>();

40✔

28

  const { userToken } = useSelector((state: RootState) => state.auth);

40✔

29

40✔

30

  useEffect(() => {

40✔

31

    axios

40✔

32

      .get(`${import.meta.env.VITE_APP_API_URL}/product/all`)

40✔

33

      .then((response) => {

8✔

34

        const products: ProductProp[] = response.data.data.products;

8✔

35

        setProductList(

8✔

36

          products.filter((product) => {

5✔

37

            return (

5✔

38

              Number(product.quantity) > 0 && (!product.expirationDate || new Date(product.expirationDate) > new Date())

5✔

39

);

16✔

40

})

16✔

42

        setLoading(false);

16✔

43

})

5✔

44

      .catch((error) => {

5✔

45

        toast.error('Server issues. Something went wrong');

5✔

46

        console.log(error);

8✔

47

        setLoading(false);

8✔

51

  useEffect(() => {

8✔

52

    const productCards = [];

40✔

53

    for (let i = 0; i < productList.length; i++) {

40✔

54

      if (!currentCategory) {

40✔

55

        productCards.push(<ClientProductCard product={productList[i]} key={i} />);

12✔

56

12✔

57

      if (currentCategory) {

29✔

58

        for (let j = 0; j < productList[i].categories.length; j++) {

29✔

59

          if (currentCategory.toLowerCase() === productList[i].categories[j].name.toLowerCase()) {

29✔

67

29✔

68

  }, [currentCategory, productList, viewItems]);

12✔

69

12✔

70

  useEffect(() => {

12✔

71

    const tempBanners = [];

40✔

72

    for (let i = 0; i < productList.length; i++) {

40✔

73

      if (productList[i].oldPrice) {

40✔

74

        const result = calculateRate(productList[i].newPrice, productList[i].oldPrice!);

11✔

75

        if (result) {

11✔

76

          const time = FormatPosted(new Date(productList[i].updatedAt));

16✔

77

          tempBanners.push({

16✔

78

            rate: result,

16✔

79

            time: time,

16✔

80

            title: productList[i].name,

16✔

81

            id: productList[i].id,

16✔

82

            image: productList[i].images[0]

16✔

83

});

16✔

84

16✔

85

16✔

86

16✔

87

16✔

88

    tempBanners.length && dispatch(setBanners(tempBanners));

16✔

89

  }, [dispatch, productList]);

16✔

90

11✔

91

  useEffect(() => {

11✔

92

    let productCards;

40✔

93

    if (selectedProducts.length >= viewItems) {

40✔

94

      productCards = selectedProducts.slice(0, viewItems);

40✔

95

    } else {

20✔

96

      productCards = selectedProducts;

20✔

97

1✔

98

    setViewProducts(productCards);

20✔

99

  }, [viewItems, selectedProducts]);

19✔

100

19✔

101

  const handleAddMore = () => {

20✔

102

    setViewItems((prevViewItems) => prevViewItems + 4);

40✔

103

};

40✔

104

40✔

105

  useEffect(() => {

1✔

106

    const bannerElements: JSX.Element[] = [];

1✔

107

    const bannerIdentifiers: JSX.Element[] = [];

40✔

108

    banners.forEach((banner, index) => {

40✔

109

      bannerElements.push(<Banner rate={banner.rate} time={banner.time} image={banner.image} />);

11✔

110

      bannerIdentifiers.push(<BannerIdentifier key={index} index={index + 1} />);

11✔

111

});

11✔

112

    setDotIdentifiers(bannerIdentifiers);

20✔

113

    banners.length > 0 && setSelectedBanners(bannerElements);

20✔

114

    const intervalIdentifier = setInterval(() => {

11✔

115

      if (banners.length > currentBanner) {

11✔

116

        dispatch(setCurrentBanner(currentBanner + 1));

11✔

117

      } else {

11✔

123

11✔

124

  const handleSwipedLeft = () => {

11✔

125

    if (currentBanner < banners.length) {

40✔

126

      dispatch(setCurrentBanner(currentBanner + 1));

40✔

127

40✔

132

      const fetchData = async () => {

40✔

133

        try {

40✔

145

    if (currentBanner > 0) {

40✔

146

      dispatch(setCurrentBanner(currentBanner - 1));

40✔

147

40✔

152

    onSwipedRight: handleSwipedRight

40✔

153

});

40✔

154

40✔

155

  return (

40✔

156

    <div className="text-baseBlack">

40✔

157

      <div className="hidden xmd:flex">

40✔

158

        <CategoriesMenu />

40✔

159

      </div>

40✔

160

      <div>

40✔

161

        <div className="relative group overflow-hidden" {...swipeHandlers}>

40✔

162

          <div className="group-hover:flex hidden z-50 animate-fadeInAnimation absolute top-[45%] left-[50px]">

40✔

163

            {window.innerWidth > 700 && (

40✔

164

<i

40✔

165

                onClick={handleSwipedRight}

40✔

166

                className={`cursor-pointer fa-solid text-4xl fa-square-caret-left ${currentBanner === 0 ? 'hidden' : 'block'} text-primary hover:text-blue-900`}

40✔

167

              ></i>

39✔

168

)}

39✔

170

39✔

171

          <div className="group-hover:block hidden animate-fadeInAnimation z-50 absolute top-[45%] right-[50px]">

40✔

172

            {window.innerWidth > 700 && (

40✔

173

<i

40✔

174

                onClick={handleSwipedLeft}

40✔

175

                className={`cursor-pointer fa-solid text-4xl fa-square-caret-right ${currentBanner === banners.length ? 'hidden' : 'block'} text-primary hover:text-blue-900`}

40✔

176

              ></i>

39✔

177

)}

39✔

178

          </div>

39✔

179

          <div>{currentBanner === 0 && <HeroSection />}</div>

39✔

180

          <div className="flex w-[100%] justify-center">{currentBanner > 0 && selectedBanner[currentBanner - 1]}</div>

40✔

181

        </div>

40✔

182

40✔

183

        <div className="w-[100%] flex h-5 mt-[10px] mb-[-8px] items-center justify-center gap-2">

40✔

185

            onClick={() => dispatch(setCurrentBanner(0))}

40✔

186

            className={`${currentBanner === 0 ? 'w-[8px] h-[8px] bg-grey2' : 'w-[5px] h-[5px] bg-grey1'} rounded-full cursor-pointer`}

40✔

187

          ></div>

40✔

188

          {dotIdentifies}

40✔

189

        </div>

40✔

190

      </div>

40✔

191

      <div className="flex flex-col items-center justify-around gap-y-8 py-8 xmd:px-8 lg:px-16" id="products">

40✔

192

        <h1 className="text-2xl font-medium">Explore our collections</h1>

40✔

193

40✔

194

        {loading && (

40✔

195

          <div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">

40✔

196

            <PropagateLoader color="#070f2b" />

40✔

197

          </div>

40✔

198

)}

40✔

199

40✔

200

        {!loading && (

40✔

201

          <div className="w-full flex gap-y-10 justify-center flex-wrap gap-x-5 px-6 xmd:px-0">

40✔

202

            {viewProducts.length > 0 ? viewProducts : `${currentCategory} Products sold out !! Come back later`}

40✔

203

          </div>

24✔

204

)}

24✔

205

      </div>

24✔

206

      {selectedProducts.length > viewItems && (

40✔

207

        <div className="w-full flex items-center justify-center p-12">

40✔

208

          <button

40✔

209

            onClick={handleAddMore}

15✔

210

            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"

15✔

211

6✔

212

            Load more products

9✔

213

          </button>

15✔

214

        </div>

40✔

215

)}

40✔

216

    </div>

40✔

217

);

2✔

218

};

2✔

219

2✔

220

export default Home;

2✔

atlp-rwanda / knights-ecomm-fe / 9842317120

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

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 '../../utils/bannerRateTime';	1✔
10	import Banner from '../../components/Banners/Banner';	1✔
11	import toast from 'react-hot-toast';	1✔
12	import { PropagateLoader } from 'react-spinners';	1✔
13	import { useSwipeable } from 'react-swipeable';	1✔
14	import BannerIdentifier from '../../components/Banners/BannerIdentifier';	1✔
15	import fetchWishlist from '../../utils/wishlistFunctions/fetchWishlist';	1✔
16		1✔
17	const Home = () => {	1✔
18	const [productList, setProductList] = useState<ProductProp[]>([]);	1✔
19	const [selectedProducts, setSelectedProducts] = useState<JSX.Element[]>([]);	1✔
20	const [viewProducts, setViewProducts] = useState<JSX.Element[]>([]);	40✔
21	const [viewItems, setViewItems] = useState(12);	40✔
22	const { currentCategory } = useSelector((state: RootState) => state.category);	40✔
23	const { banners, currentBanner } = useSelector((state: RootState) => state.banner);	40✔
24	const [loading, setLoading] = useState(true);	40✔
25	const [selectedBanner, setSelectedBanners] = useState<JSX.Element[]>([]);	40✔
26	const [dotIdentifies, setDotIdentifiers] = useState<JSX.Element[]>([]);	40✔
27	const dispatch = useDispatch<AppDispatch>();	40✔
28	const { userToken } = useSelector((state: RootState) => state.auth);	40✔
29		40✔
30	useEffect(() => {	40✔
31	axios	40✔
32	.get(`${import.meta.env.VITE_APP_API_URL}/product/all`)	40✔
33	.then((response) => {	8✔
34	const products: ProductProp[] = response.data.data.products;	8✔
35	setProductList(	8✔
36	products.filter((product) => {	5✔
37	return (	5✔
38	Number(product.quantity) > 0 && (!product.expirationDate \|\| new Date(product.expirationDate) > new Date())	5✔
39	);	16✔
40	})	16✔
41	);	16!
42	setLoading(false);	16✔
43	})	5✔
44	.catch((error) => {	5✔
45	toast.error('Server issues. Something went wrong');	5✔
46	console.log(error);	8✔
47	setLoading(false);	8✔
48	});	×
49	}, []);	×
UNCOV 50		×
51	useEffect(() => {	8✔
52	const productCards = [];	40✔
53	for (let i = 0; i < productList.length; i++) {	40✔
54	if (!currentCategory) {	40✔
55	productCards.push(<ClientProductCard product={productList[i]} key={i} />);	12✔
56	}	12✔
57	if (currentCategory) {	29✔
58	for (let j = 0; j < productList[i].categories.length; j++) {	29✔
59	if (currentCategory.toLowerCase() === productList[i].categories[j].name.toLowerCase()) {	29✔
60	productCards.push(<ClientProductCard product={productList[i]} key={i} />);	29!
61	}	×
62	}	×
63	}	×
64	}	×
65	if (productCards) {	×
UNCOV 66	setSelectedProducts(productCards);	×
67	}	29✔
68	}, [currentCategory, productList, viewItems]);	12✔
69		12✔
70	useEffect(() => {	12✔
71	const tempBanners = [];	40✔
72	for (let i = 0; i < productList.length; i++) {	40✔
73	if (productList[i].oldPrice) {	40✔
74	const result = calculateRate(productList[i].newPrice, productList[i].oldPrice!);	11✔
75	if (result) {	11✔
76	const time = FormatPosted(new Date(productList[i].updatedAt));	16✔
77	tempBanners.push({	16✔
78	rate: result,	16✔
79	time: time,	16✔
80	title: productList[i].name,	16✔
81	id: productList[i].id,	16✔
82	image: productList[i].images[0]	16✔
83	});	16✔
84	}	16✔
85	}	16✔
86	}	16✔
87		16✔
88	tempBanners.length && dispatch(setBanners(tempBanners));	16✔
89	}, [dispatch, productList]);	16✔
90		11✔
91	useEffect(() => {	11✔
92	let productCards;	40✔
93	if (selectedProducts.length >= viewItems) {	40✔
94	productCards = selectedProducts.slice(0, viewItems);	40✔
95	} else {	20✔
96	productCards = selectedProducts;	20✔
97	}	1✔
98	setViewProducts(productCards);	20✔
99	}, [viewItems, selectedProducts]);	19✔
100		19✔
101	const handleAddMore = () => {	20✔
102	setViewItems((prevViewItems) => prevViewItems + 4);	40✔
103	};	40✔
104		40✔
105	useEffect(() => {	1✔
106	const bannerElements: JSX.Element[] = [];	1✔
107	const bannerIdentifiers: JSX.Element[] = [];	40✔
108	banners.forEach((banner, index) => {	40✔
109	bannerElements.push(<Banner rate={banner.rate} time={banner.time} image={banner.image} />);	11✔
110	bannerIdentifiers.push(<BannerIdentifier key={index} index={index + 1} />);	11✔
111	});	11✔
112	setDotIdentifiers(bannerIdentifiers);	20✔
113	banners.length > 0 && setSelectedBanners(bannerElements);	20✔
114	const intervalIdentifier = setInterval(() => {	11✔
115	if (banners.length > currentBanner) {	11✔
116	dispatch(setCurrentBanner(currentBanner + 1));	11✔
117	} else {	11✔
118	dispatch(setCurrentBanner(0));	×
119	}	×
120	}, 10000);	×
121	return () => clearInterval(intervalIdentifier);	×
UNCOV 122	}, [banners, currentBanner, dispatch]);	×
123		11✔
124	const handleSwipedLeft = () => {	11✔
125	if (currentBanner < banners.length) {	40✔
126	dispatch(setCurrentBanner(currentBanner + 1));	40✔
127	}	40✔
128	};	×
129		×
130	useEffect(() => {	×
UNCOV 131	if (userToken) {	×
132	const fetchData = async () => {	40✔
133	try {	40✔
134	await fetchWishlist(userToken, dispatch);	8!
135	} catch (error) {	×
136	console.error('Failed to fetch wishlist', error);	×
137	}	×
138	};	×
139		×
140	fetchData();	×
141	}	×
142	}, [userToken, dispatch]);	×
143		×
UNCOV 144	const handleSwipedRight = () => {	×
145	if (currentBanner > 0) {	40✔
146	dispatch(setCurrentBanner(currentBanner - 1));	40✔
147	}	40✔
148	};	×
149		×
150	const swipeHandlers = useSwipeable({	×
UNCOV 151	onSwipedLeft: handleSwipedLeft,	×
152	onSwipedRight: handleSwipedRight	40✔
153	});	40✔
154		40✔
155	return (	40✔
156	<div className="text-baseBlack">	40✔
157	<div className="hidden xmd:flex">	40✔
158	<CategoriesMenu />	40✔
159	</div>	40✔
160	<div>	40✔
161	<div className="relative group overflow-hidden" {...swipeHandlers}>	40✔
162	<div className="group-hover:flex hidden z-50 animate-fadeInAnimation absolute top-[45%] left-[50px]">	40✔
163	{window.innerWidth > 700 && (	40✔
164	<i	40✔
165	onClick={handleSwipedRight}	40✔
166	className={`cursor-pointer fa-solid text-4xl fa-square-caret-left ${currentBanner === 0 ? 'hidden' : 'block'} text-primary hover:text-blue-900`}	40✔
167	></i>	39✔
168	)}	39✔
169	</div>	39!
170		39✔
171	<div className="group-hover:block hidden animate-fadeInAnimation z-50 absolute top-[45%] right-[50px]">	40✔
172	{window.innerWidth > 700 && (	40✔
173	<i	40✔
174	onClick={handleSwipedLeft}	40✔
175	className={`cursor-pointer fa-solid text-4xl fa-square-caret-right ${currentBanner === banners.length ? 'hidden' : 'block'} text-primary hover:text-blue-900`}	40✔
176	></i>	39✔
177	)}	39✔
178	</div>	39✔
179	<div>{currentBanner === 0 && <HeroSection />}</div>	39✔
180	<div className="flex w-[100%] justify-center">{currentBanner > 0 && selectedBanner[currentBanner - 1]}</div>	40✔
181	</div>	40✔
182		40✔
183	<div className="w-[100%] flex h-5 mt-[10px] mb-[-8px] items-center justify-center gap-2">	40✔
184	<div	40!
185	onClick={() => dispatch(setCurrentBanner(0))}	40✔
186	className={`${currentBanner === 0 ? 'w-[8px] h-[8px] bg-grey2' : 'w-[5px] h-[5px] bg-grey1'} rounded-full cursor-pointer`}	40✔
187	></div>	40✔
188	{dotIdentifies}	40✔
189	</div>	40✔
190	</div>	40✔
191	<div className="flex flex-col items-center justify-around gap-y-8 py-8 xmd:px-8 lg:px-16" id="products">	40✔
192	<h1 className="text-2xl font-medium">Explore our collections</h1>	40✔
193		40✔
194	{loading && (	40✔
195	<div className="w-full flex justify-center px-6 py-20" data-testid="loading-spinner">	40✔
196	<PropagateLoader color="#070f2b" />	40✔
197	</div>	40✔
198	)}	40✔
199		40✔
200	{!loading && (	40✔
201	<div className="w-full flex gap-y-10 justify-center flex-wrap gap-x-5 px-6 xmd:px-0">	40✔
202	{viewProducts.length > 0 ? viewProducts : `${currentCategory} Products sold out !! Come back later`}	40✔
203	</div>	24✔
204	)}	24✔
205	</div>	24✔
206	{selectedProducts.length > viewItems && (	40✔
207	<div className="w-full flex items-center justify-center p-12">	40✔
208	<button	40✔
209	onClick={handleAddMore}	15✔
210	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"	15✔
211	>	6✔
212	Load more products	9✔
213	</button>	15✔
214	</div>	40✔
215	)}	40✔
216	</div>	40✔
217	);	2✔
218	};	2✔
219		2✔
220	export default Home;	2✔

atlp-rwanda / knights-ecomm-fe / 9842317120

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