atlp-rwanda/knights-ecomm-fe | Build 9818134898 | 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

        setProductList(response.data.data.products);

8✔

35

        setLoading(false);

8✔

36

})

5✔

37

      .catch((error) => {

5✔

38

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

8✔

39

        console.log(error);

8✔

43

8✔

44

  useEffect(() => {

40✔

45

    const productCards = [];

40✔

46

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

40✔

47

      if (!currentCategory) {

12✔

48

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

12✔

49

29✔

50

      if (currentCategory) {

29✔

51

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

29✔

59

      setSelectedProducts(productCards);

29✔

60

12✔

61

  }, [currentCategory, productList, viewItems]);

12✔

62

12✔

63

  useEffect(() => {

40✔

64

    const tempBanners = [];

40✔

65

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

40✔

66

      if (productList[i].oldPrice) {

11✔

67

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

11✔

68

        if (result) {

16✔

69

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

16✔

70

          tempBanners.push({

16✔

71

            rate: result,

16✔

72

            time: time,

16✔

73

            title: productList[i].name,

16✔

74

            id: productList[i].id,

16✔

75

            image: productList[i].images[0]

16✔

76

});

16✔

77

16✔

78

16✔

79

16✔

80

16✔

81

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

16✔

82

  }, [dispatch, productList]);

11✔

83

11✔

84

  useEffect(() => {

40✔

85

    let productCards;

40✔

86

    if (selectedProducts.length >= viewItems) {

40✔

87

      productCards = selectedProducts.slice(0, viewItems);

20✔

88

    } else {

20✔

89

      productCards = selectedProducts;

1✔

90

20✔

91

    setViewProducts(productCards);

19✔

92

  }, [viewItems, selectedProducts]);

19✔

93

20✔

94

  const handleAddMore = () => {

40✔

95

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

40✔

96

};

40✔

97

1✔

98

  useEffect(() => {

1✔

99

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

40✔

100

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

40✔

101

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

11✔

102

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

11✔

103

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

11✔

104

});

20✔

105

    setDotIdentifiers(bannerIdentifiers);

20✔

106

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

11✔

107

    const intervalIdentifier = setInterval(() => {

11✔

108

      if (banners.length > currentBanner) {

11✔

109

        dispatch(setCurrentBanner(currentBanner + 1));

11✔

115

  }, [banners, currentBanner, dispatch]);

11✔

116

11✔

117

  const handleSwipedLeft = () => {

40✔

118

    if (currentBanner < banners.length) {

40✔

119

      dispatch(setCurrentBanner(currentBanner + 1));

40✔

124

    if (userToken) {

40✔

125

      const fetchData = async () => {

40✔

137

  const handleSwipedRight = () => {

40✔

138

    if (currentBanner > 0) {

40✔

139

      dispatch(setCurrentBanner(currentBanner - 1));

40✔

144

    onSwipedLeft: handleSwipedLeft,

40✔

145

    onSwipedRight: handleSwipedRight

40✔

146

});

40✔

147

40✔

148

  return (

40✔

149

    <div className="text-baseBlack">

40✔

150

      <div className="hidden xmd:flex">

40✔

151

        <CategoriesMenu />

40✔

152

      </div>

40✔

153

      <div>

40✔

154

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

40✔

155

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

40✔

156

            {window.innerWidth > 700 && (

40✔

157

<i

40✔

158

                onClick={handleSwipedRight}

40✔

159

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

39✔

160

              ></i>

39✔

162

          </div>

39✔

163

40✔

164

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

40✔

165

            {window.innerWidth > 700 && (

40✔

166

<i

40✔

167

                onClick={handleSwipedLeft}

40✔

168

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

39✔

169

              ></i>

39✔

170

)}

39✔

171

          </div>

39✔

172

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

40✔

173

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

40✔

174

        </div>

40✔

175

40✔

177

          <div

40✔

178

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

40✔

179

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

40✔

180

          ></div>

40✔

181

          {dotIdentifies}

40✔

182

        </div>

40✔

183

      </div>

40✔

184

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

40✔

185

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

40✔

186

40✔

187

        {loading && (

40✔

188

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

40✔

189

            <PropagateLoader color="#070f2b" />

40✔

190

          </div>

40✔

191

)}

40✔

192

40✔

193

        {!loading && (

40✔

194

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

40✔

195

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

24✔

196

          </div>

24✔

197

)}

24✔

198

      </div>

40✔

199

      {selectedProducts.length > viewItems && (

40✔

200

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

40✔

201

          <button

15✔

202

            onClick={handleAddMore}

15✔

203

            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"

6✔

204

9✔

205

            Load more products

15✔

206

          </button>

40✔

207

        </div>

40✔

208

)}

40✔

209

    </div>

2✔

210

);

2✔

211

};

2✔

212

2✔

213

export default Home;

2✔

atlp-rwanda / knights-ecomm-fe / 9818134898

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

atlp-rwanda / knights-ecomm-fe / 9818134898

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