a474b1e0-13e7-48c4-ac64-e30d2df1868e

Build # a474b1e0-13e7-48c4-ac64-e30d2df1868e

Build Type

circleci

Committed by Fidela1

Commit Message

feat: Implement provide ratings

Pull Request Pull Request #26: feat: Implement provide ratings

Run Details

130 of 232 branches covered (56.03%)

Branch coverage included in aggregate %.

53 of 53 new or added lines in 6 files covered. (100.0%)

601 of 730 relevant lines covered (82.33%)

7.72 hits per line

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

66.67

/src/pages/HomePage.jsx

import React, { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import getMessage from '../features/actions/welcomeAction';
import ProductCard from '../components/products/ProductCard';
import { getProductList } from '../features/product/getProductsSilice';
import ProductOperationButton from '../components/products/ProductOperationButton';
import wishIcon from '../../public/images/wish.svg';
import HoveredShopIcon from '../../public/images/shoping.svg';
import shopIcon from '../../public/images/black-add-cart.svg';
import hoveredHurt from '../../public/images/hoveredHurt.svg';
import PageCount from '../components/products/PageCount';
import Loader from '../components/Loader';

const HomePage = () => {
  const dispatch = useDispatch();
  const { productsList, isLoading } = useSelector((state) => state.product);
  const [hover, setHover] = useState(false);
  const [hoverAddCart, setHoverAddCart] = useState(false);
  const handleMouseEnter = () => {
    setHover(true);
  };
  const handleMouseLeave = () => {
    setHover(false);
  };
  const handleAddTocartMouseEnter = () => {
    setHoverAddCart(true);
  };
  const handleAddTocartMouseLeave = () => {
    setHoverAddCart(false);
  };
  useEffect(() => {
    dispatch(getMessage());
    dispatch(getProductList({ pageNumber: 1 }));
  }, [dispatch]);

  const setPageNumberHandler = (nextPage) => {
    const newPageNumber = nextPage ? parseInt(productsList.currentPage) + 1
      : parseInt(productsList.currentPage) - 1;
    if (newPageNumber > 0 && newPageNumber <= productsList.totalPages) {
      dispatch(getProductList({
        pageNumber: newPageNumber,
      }));
    }
  };

  let viewProducts = null;
  let pageCount = null;
  if (Array.isArray(productsList.rows) && productsList.rows.length > 0) {
    viewProducts = productsList.rows.map((row) => (
      <ProductCard
        key={row.id}
        product={row}
        wish={(
          <ProductOperationButton
            className="mt-[20px] bg-[#f6f4f4] h-[32px] hover:bg-[#099f09] w-[32px] rounded-full flex justify-center items-center"
            icon={hover ? hoveredHurt : wishIcon}
            title="Wish product"
            alt="wish"
            handleMouseEnter={handleMouseEnter}
            handleMouseLeave={handleMouseLeave}
          />
)}
        addCart={(
          <ProductOperationButton
            className="mt-[20px] bg-[#f6f4f4] hover:bg-[#099f09] h-[32px] w-[32px] rounded-full flex justify-center items-center "
            icon={hoverAddCart ? HoveredShopIcon : shopIcon}
            title="Shop product"
            alt="shop"
            handleMouseEnter={handleAddTocartMouseEnter}
            handleMouseLeave={handleAddTocartMouseLeave}
          />
)}
      />
    ));
    pageCount = (
      <PageCount
        className=""
        currentPage={productsList.currentPage}
        totalPages={productsList.totalPages}
        click={setPageNumberHandler}
      />
    );
  }

  return (
    <div className="min-h-72">
      <h1 className="pb-8 text-center pt-8 font-bold text-[25px] text-gray-600">OUR PRODUCTS</h1>
      {isLoading ? <Loader />
        : (
          <div className="px-10 md:px-24 xl:px-60 xs:px-2 grid md:grid-cols-2 lg:grid-cols-4 xs:grid-cols-1 gap-10">
            {viewProducts}
          </div>
        )}
      <br />
      <div className="pb-4">
        {!isLoading ? pageCount : null}
      </div>
    </div>
  );
};

export default HomePage;

1	import React, { useEffect, useState } from 'react';
2	import { useDispatch, useSelector } from 'react-redux';
3	import getMessage from '../features/actions/welcomeAction';
4	import ProductCard from '../components/products/ProductCard';
5	import { getProductList } from '../features/product/getProductsSilice';
6	import ProductOperationButton from '../components/products/ProductOperationButton';
7	import wishIcon from '../../public/images/wish.svg';
8	import HoveredShopIcon from '../../public/images/shoping.svg';
9	import shopIcon from '../../public/images/black-add-cart.svg';
10	import hoveredHurt from '../../public/images/hoveredHurt.svg';
11	import PageCount from '../components/products/PageCount';
12	import Loader from '../components/Loader';
13
14	const HomePage = () => {	25✔
15	const dispatch = useDispatch();	12✔
16	const { productsList, isLoading } = useSelector((state) => state.product);	30✔
17	const [hover, setHover] = useState(false);	12✔
18	const [hoverAddCart, setHoverAddCart] = useState(false);	12✔
19	const handleMouseEnter = () => {	12✔
20	setHover(true);	×
21	};
22	const handleMouseLeave = () => {	12✔
23	setHover(false);	×
24	};
25	const handleAddTocartMouseEnter = () => {	12✔
26	setHoverAddCart(true);	×
27	};
28	const handleAddTocartMouseLeave = () => {	12✔
29	setHoverAddCart(false);	×
30	};
31	useEffect(() => {	12✔
32	dispatch(getMessage());	6✔
33	dispatch(getProductList({ pageNumber: 1 }));	6✔
34	}, [dispatch]);
35
36	const setPageNumberHandler = (nextPage) => {	12✔
37	const newPageNumber = nextPage ? parseInt(productsList.currentPage) + 1	×
38	: parseInt(productsList.currentPage) - 1;
39	if (newPageNumber > 0 && newPageNumber <= productsList.totalPages) {	×
40	dispatch(getProductList({	×
41	pageNumber: newPageNumber,
42	}));
43	}
44	};
45
46	let viewProducts = null;	12✔
47	let pageCount = null;	12✔
48	if (Array.isArray(productsList.rows) && productsList.rows.length > 0) {	12✔
49	viewProducts = productsList.rows.map((row) => (	9✔
50	<ProductCard	16✔
51	key={row.id}
52	product={row}
53	wish={(
54	<ProductOperationButton
55	className="mt-[20px] bg-[#f6f4f4] h-[32px] hover:bg-[#099f09] w-[32px] rounded-full flex justify-center items-center"
56	icon={hover ? hoveredHurt : wishIcon}	16!
57	title="Wish product"
58	alt="wish"
59	handleMouseEnter={handleMouseEnter}
60	handleMouseLeave={handleMouseLeave}
61	/>
62	)}
63	addCart={(
64	<ProductOperationButton
65	className="mt-[20px] bg-[#f6f4f4] hover:bg-[#099f09] h-[32px] w-[32px] rounded-full flex justify-center items-center "
66	icon={hoverAddCart ? HoveredShopIcon : shopIcon}	16!
67	title="Shop product"
68	alt="shop"
69	handleMouseEnter={handleAddTocartMouseEnter}
70	handleMouseLeave={handleAddTocartMouseLeave}
71	/>
72	)}
73	/>
74	));
75	pageCount = (	9✔
76	<PageCount
77	className=""
78	currentPage={productsList.currentPage}
79	totalPages={productsList.totalPages}
80	click={setPageNumberHandler}
81	/>
82	);
83	}
84
85	return (	12✔
86	<div className="min-h-72">
87	<h1 className="pb-8 text-center pt-8 font-bold text-[25px] text-gray-600">OUR PRODUCTS</h1>
88	{isLoading ? <Loader />	12✔
89	: (
90	<div className="px-10 md:px-24 xl:px-60 xs:px-2 grid md:grid-cols-2 lg:grid-cols-4 xs:grid-cols-1 gap-10">
91	{viewProducts}
92	</div>
93	)}
94	<br />
95	<div className="pb-4">
96	{!isLoading ? pageCount : null}	12✔
97	</div>
98	</div>
99	);
100	};
101
102	export default HomePage;

atlp-rwanda / vikings-ec-fe / a474b1e0-13e7-48c4-ac64-e30d2df1868e

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