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

72.34

/src/components/products/BuyerViewSingleProduct.js

import React, { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import ProductRatings from './ProductRatings';
import Reviewers from './Reviewers';
import loader from '../../../public/images/icons/loader.svg';
import { getProductRatings } from '../../features/product/getRatingsSlice';
import Button from '../forms/Button';
import Ratings from '../ratings/Ratings';

const BuyerViewProduct = ({ ...props }) => {
  const dispatch = useDispatch();
  const { ratings, isLoading } = useSelector((state) => state.getRatings);
  const [reviews, setReviews] = useState([]);
  const [showRatings, setShowRatings] = useState(false)
  const [isReviews, setIsReviews] = useState(false);
  const handleOnClose = () => setShowRatings(false)


  useEffect(() => {
    if (props.products && props.products.id) {
      dispatch(getProductRatings(props.products.id));
    }
  }, [props.products && props.products.id]);

  useEffect(() => {
    if (Array.isArray(ratings) && ratings.length > 0) {
      const reviewers = ratings.map((rate) => ({
        buyer: rate.buyer,
        feedback: rate.feedback,
      }));
      setReviews(reviewers);
      setIsReviews(true);
    }
  }, [ratings]);
  
  let reviewers = null;
  if (Array.isArray(ratings) && ratings.length > 0) {
    reviewers = reviews.map((r, index) => (
      <Reviewers
        key={index}
        reviewer={r}
      />
    ));
  }
  const fullIViewmage = props.products.images
    && <img src={props.products.images[props.fullImage]} alt="product" className="xs:w-full lg:w-full sm:w-full xs:ml-[-16px] md:w-full md:h-[250px] object-cover" />;
  const otherImages = props.products.images && props.products.images.map((image, i) => i !== props.fullImage
    && <img src={image} key={i} alt="product" className="w-24 h-20 mt-2" />);
  return (
    <div>
      <div className="md:flex lg:flex flex-wrap md:flex-nowrap w-[100%] mt-24 md:gap-10 lg:gap-4">
        <div className="md:w-[900px] xs:w-[108%] lg:w-1/2 sm:ml-[-13px] xs:ml-[0px] px-4 ">
          {fullIViewmage}
          <div className="md:mt-[-190px]">
            {props.switchImages}
          </div>
        </div>
        <div className="w-full md:w-1/1">
          <p className="text-black font-bold text-[20px] pb-2">{props.products.name}</p>
          <p className="text-[#464c55] text-[18px] font-bold pb-2">
            $
            {props.products.price}
          </p>
          <div className="space-y-[-10px]">
            {ratings ? <ProductRatings rate={ratings} /> : <img src={loader} alt="Loader Spinner" className="text-green-500 animate-spin w-[25px] text-center" data-testid="spinner" />}
            <div className="flex space-x-[25px] pb-[40px]">
              {props.wish}
              {props.addCart}
            </div>
            <div className="lg:flex lg:gap-3 md:flex md:gap-3 pb-2 grid sm:grid-cols-3 xs:grid-cols-3 sm:space-y-2 xs:space-y-2">
              {otherImages}
            </div>
          </div>
        </div>
      </div>
      <div className="w-[100%] md:space-y-3">
        <p className="text-[#393d3e] pt-8 font-bold text-[18px] italic">Reviews</p>
        <div className="md:space-y-3">
          {reviewers || 'No reviews found'}
        </div>
        <Ratings onClose={handleOnClose} visible={showRatings} productId={props.products.id} />
        <Button
            onClick={() => setShowRatings(true)  }
            label="Add review"
            parentClassName="flex xs:block"
            className="!w-fit text-white bg-green-500 hover:bg-green-600 px-5 py-2.5 mt-20 font-bold rounded-none self-end xs:w-full"
          />
      </div>
    </div>
  );
};

export default BuyerViewProduct;

1	import React, { useState, useEffect } from 'react';
2	import { useDispatch, useSelector } from 'react-redux';
3	import ProductRatings from './ProductRatings';
4	import Reviewers from './Reviewers';
5	import loader from '../../../public/images/icons/loader.svg';
6	import { getProductRatings } from '../../features/product/getRatingsSlice';
7	import Button from '../forms/Button';
8	import Ratings from '../ratings/Ratings';
9
10	const BuyerViewProduct = ({ ...props }) => {	25✔
11	const dispatch = useDispatch();	2✔
12	const { ratings, isLoading } = useSelector((state) => state.getRatings);	2✔
13	const [reviews, setReviews] = useState([]);	2✔
14	const [showRatings, setShowRatings] = useState(false)	2✔
15	const [isReviews, setIsReviews] = useState(false);	2✔
16	const handleOnClose = () => setShowRatings(false)	2✔
17
18
19	useEffect(() => {	2✔
20	if (props.products && props.products.id) {	1!
21	dispatch(getProductRatings(props.products.id));	×
22	}
23	}, [props.products && props.products.id]);	4✔
24
25	useEffect(() => {	2✔
26	if (Array.isArray(ratings) && ratings.length > 0) {	1!
27	const reviewers = ratings.map((rate) => ({	×
28	buyer: rate.buyer,
29	feedback: rate.feedback,
30	}));
31	setReviews(reviewers);	×
32	setIsReviews(true);	×
33	}
34	}, [ratings]);
35
36	let reviewers = null;	2✔
37	if (Array.isArray(ratings) && ratings.length > 0) {	2!
38	reviewers = reviews.map((r, index) => (	×
39	<Reviewers	×
40	key={index}
41	reviewer={r}
42	/>
43	));
44	}
45	const fullIViewmage = props.products.images	2✔
46	&& <img src={props.products.images[props.fullImage]} alt="product" className="xs:w-full lg:w-full sm:w-full xs:ml-[-16px] md:w-full md:h-[250px] object-cover" />;
47	const otherImages = props.products.images && props.products.images.map((image, i) => i !== props.fullImage	5✔
48	&& <img src={image} key={i} alt="product" className="w-24 h-20 mt-2" />);
49	return (	2✔
50	<div>
51	<div className="md:flex lg:flex flex-wrap md:flex-nowrap w-[100%] mt-24 md:gap-10 lg:gap-4">
52	<div className="md:w-[900px] xs:w-[108%] lg:w-1/2 sm:ml-[-13px] xs:ml-[0px] px-4 ">
53	{fullIViewmage}
54	<div className="md:mt-[-190px]">
55	{props.switchImages}
56	</div>
57	</div>
58	<div className="w-full md:w-1/1">
59	<p className="text-black font-bold text-[20px] pb-2">{props.products.name}</p>
60	<p className="text-[#464c55] text-[18px] font-bold pb-2">
61	$
62	{props.products.price}
63	</p>
64	<div className="space-y-[-10px]">
65	{ratings ? <ProductRatings rate={ratings} /> : <img src={loader} alt="Loader Spinner" className="text-green-500 animate-spin w-[25px] text-center" data-testid="spinner" />}	2!
66	<div className="flex space-x-[25px] pb-[40px]">
67	{props.wish}
68	{props.addCart}
69	</div>
70	<div className="lg:flex lg:gap-3 md:flex md:gap-3 pb-2 grid sm:grid-cols-3 xs:grid-cols-3 sm:space-y-2 xs:space-y-2">
71	{otherImages}
72	</div>
73	</div>
74	</div>
75	</div>
76	<div className="w-[100%] md:space-y-3">
77	<p className="text-[#393d3e] pt-8 font-bold text-[18px] italic">Reviews</p>
78	<div className="md:space-y-3">
79	{reviewers \|\| 'No reviews found'}	4✔
80	</div>
81	<Ratings onClose={handleOnClose} visible={showRatings} productId={props.products.id} />
82	<Button
83	onClick={() => setShowRatings(true) }	×
84	label="Add review"
85	parentClassName="flex xs:block"
86	className="!w-fit text-white bg-green-500 hover:bg-green-600 px-5 py-2.5 mt-20 font-bold rounded-none self-end xs:w-full"
87	/>
88	</div>
89	</div>
90	);
91	};
92
93	export default BuyerViewProduct;

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