atlp-rwanda/knights-ecomm-fe | Build 10083788767 | 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 { PropagateLoader } from 'react-spinners';

1✔

12

import { useSwipeable } from 'react-swipeable';

1✔

13

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

1✔

14

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

1✔

15

1✔

16

const Home = () => {

1✔

17

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

1✔

18

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

1✔

19

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

47✔

20

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

47✔

21

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

47✔

22

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

47✔

23

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

47✔

24

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

47✔

25

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

47✔

26

  const dispatch = useDispatch<AppDispatch>();

47✔

27

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

47✔

28

47✔

29

  useEffect(() => {

47✔

30

    axios

47✔

31

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

47✔

32

      .then((response) => {

9✔

33

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

9✔

34

        if (products) {

9✔

35

          setProductList(

6✔

36

            products.filter((product) => {

6✔

37

              return (

6✔

38

                product.vendor.status === 'active' &&

6✔

39

                Number(product.quantity) > 0 &&

18✔

40

                (!product.expirationDate || new Date(product.expirationDate) > new Date())

18✔

41

);

18✔

43

);

18✔

44

6✔

45

        setLoading(false);

6✔

46

})

6✔

47

      .catch((error) => {

6✔

48

        console.log(error);

9✔

49

        setLoading(false);

9✔

52

9✔

53

  useEffect(() => {

47✔

54

    const productCards = [];

47✔

55

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

47✔

56

      if (!currentCategory) {

14✔

57

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

14✔

58

31✔

59

      if (currentCategory) {

31✔

60

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

31✔

68

      setSelectedProducts(productCards);

31✔

69

14✔

70

  }, [currentCategory, productList, viewItems]);

14✔

71

14✔

72

  useEffect(() => {

47✔

73

    const tempBanners = [];

47✔

74

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

47✔

75

      if (productList[i].oldPrice) {

13✔

76

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

13✔

77

        if (result) {

18✔

78

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

18✔

79

          tempBanners.push({

18✔

80

            rate: result,

18✔

81

            time: time,

18✔

82

            title: productList[i].name,

18✔

83

            id: productList[i].id,

18✔

84

            image: productList[i].images[0]

18✔

85

});

18✔

86

18✔

87

18✔

88

18✔

89

18✔

90

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

18✔

91

  }, [dispatch, productList]);

13✔

92

13✔

93

  useEffect(() => {

47✔

94

    let productCards;

47✔

95

    if (selectedProducts.length >= viewItems) {

47✔

96

      productCards = selectedProducts.slice(0, viewItems);

23✔

97

    } else {

23✔

98

      productCards = selectedProducts;

1✔

99

23✔

100

    setViewProducts(productCards);

22✔

101

  }, [viewItems, selectedProducts]);

22✔

102

23✔

103

  const handleAddMore = () => {

47✔

104

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

47✔

105

};

47✔

106

1✔

107

  useEffect(() => {

1✔

108

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

47✔

109

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

47✔

110

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

13✔

111

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

13✔

112

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

13✔

113

});

35✔

114

    setDotIdentifiers(bannerIdentifiers);

35✔

115

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

35✔

116

    const intervalIdentifier = setInterval(() => {

35✔

117

      if (banners.length > currentBanner) {

13✔

118

        dispatch(setCurrentBanner(currentBanner + 1));

13✔

119

      } else {

13✔

120

        dispatch(setCurrentBanner(0));

13✔

126

  const handleSwipedLeft = () => {

13✔

127

    if (currentBanner < banners.length) {

13✔

128

      dispatch(setCurrentBanner(currentBanner + 1));

47✔

129

47✔

130

};

47✔

135

        try {

47✔

136

          await fetchWishlist(userToken, dispatch);

47✔

137

        } catch (error) {

9✔

138

          console.error('Failed to fetch wishlist', error);

1✔

139

1✔

140

};

1✔

144

  }, [userToken, dispatch]);

1✔

145

1✔

146

  const handleSwipedRight = () => {

1✔

147

    if (currentBanner > 0) {

1✔

148

      dispatch(setCurrentBanner(currentBanner - 1));

47✔

149

47✔

150

};

47✔

155

});

47✔

156

47✔

157

  return (

47✔

158

    <div className="relative text-baseBlack">

47✔

159

      <div className="hidden xmd:flex">

47✔

160

        <CategoriesMenu />

47✔

161

      </div>

47✔

162

      <div>

47✔

163

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

47✔

164

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

47✔

165

            {window.innerWidth > 700 && (

47✔

166

<i

47✔

167

                onClick={handleSwipedRight}

47✔

168

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

47✔

169

              ></i>

47✔

170

)}

46✔

171

          </div>

46✔

173

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

46✔

174

            {window.innerWidth > 700 && (

47✔

175

<i

47✔

176

                onClick={handleSwipedLeft}

47✔

177

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

47✔

178

              ></i>

47✔

179

)}

46✔

180

          </div>

46✔

181

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

46✔

182

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

46✔

183

        </div>

47✔

184

47✔

185

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

47✔

186

          <div

47✔

188

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

47✔

189

          ></div>

47✔

190

          {dotIdentifies}

47✔

191

        </div>

47✔

192

      </div>

47✔

193

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

47✔

194

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

47✔

195

47✔

196

        {loading && (

47✔

197

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

47✔

198

            <PropagateLoader color="#070f2b" />

47✔

199

          </div>

47✔

200

)}

47✔

201

47✔

202

        {!loading && (

47✔

203

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

47✔

204

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

47✔

205

          </div>

47✔

206

)}

27✔

207

      </div>

27✔

208

      {selectedProducts.length > viewItems && (

27✔

209

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

47✔

210

          <button

47✔

211

            onClick={handleAddMore}

47✔

212

            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"

19✔

213

19✔

214

            Load more products

7✔

215

          </button>

12✔

216

        </div>

19✔

217

)}

47✔

218

    </div>

47✔

219

);

47✔

220

};

2✔

221

2✔

222

export default Home;

2✔

atlp-rwanda / knights-ecomm-fe / 10083788767

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

atlp-rwanda / knights-ecomm-fe / 10083788767

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