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

52.94

/src/components/ratings/Ratings.js

/* eslint-disable react/jsx-key */
import React, { useEffect, useState } from 'react';
import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
import { useDispatch, useSelector } from 'react-redux';
import { useForm } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import { provideRatings } from '../../features/api/ratings/ratingsSlice';
import { showErrorMessage, showSuccessMessage } from '../../utils/toast';
import Button from '../forms/Button';
import { ratingSchema } from '../../validations/inputValidation';
import Textarea from './Textarea';
import { getProductRatings } from '../../features/product/getRatingsSlice';

const Ratings = ({ visible, onClose, productId }) => {
  const [number, setNumber] = useState(0);
  const [hoverStar, setHoverStar] = useState(undefined);
  const { ratings, isLoading } = useSelector((state) => state.getRatings);
  
  const handleOnClose = (e) => {
    if(e.target.id === 'container')  onClose();
  }

  const dispatch = useDispatch();
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: yupResolver(ratingSchema),
  });

  const onSubmit = async (reviewsData) => {
   
    try {
      reviewsData.rate=number
      const response = await dispatch(provideRatings({rate:reviewsData.rate, productId:productId, feedback:reviewsData.Feedback})).unwrap();
      dispatch(getProductRatings(productId));
      console.log('response',response)
      showSuccessMessage('Product rated successfully');
      onClose()
    } catch (error) {
      showErrorMessage(error.data.message);
    }
  };


  return (
    <form
    onSubmit={(event) => {
      handleSubmit(onSubmit)(event);
    }}
    
    >

      <div 
      id="container"
      className={` fixed top-40 right-1/4 backdrop-blur-sm left-1/3 z-50 p-4  border border-grey-400 bg-slate-200 poppins bg-opacity-30 ${!visible ? 'hidden': ''}`}>
        <h2>Provide Ratings</h2>
        <div className="flex items-center">
          {Array(5)
            .fill()
            .map((_, index) => (
              number >= index + 1 || hoverStar >= index + 1 ? (
                <AiFillStar 
                key={`${index}rate`}
                  onMouseOver={() => setHoverStar(index + 1)}
                  onMouseLeave={() => setHoverStar(undefined)}
                  style={{ color: 'orange' }}
                  onClick={() => setNumber(index + 1)}
                />
              ) : (
                <AiOutlineStar
                key={`${index}star`}
                  onMouseOver={() => setHoverStar(index + 1)}
                  onMouseLeave={() => hoverStar(undefined)}
                  style={{ color: 'orange' }}
                  onClick={() => setNumber(index + 1)}
                />
              )
            ))}
        </div>
       <div className='mt-5'>
        <Textarea
        id="feedback"
        rows='4'
        name="feedback"
        label="Feedback"
        placeholder="Provide your feedback"
        className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:border-blue-50'
        {...register('Feedback')}
        error={errors?.Feedback}
        />
        </div>
        <div className=' py-3 sm:px-6 sm:flex sm:flex-row-reverse'>
        <Button
            role="submit"
            type="submit"
            label="Add review"
            parentClassName="flex xs:block"
            className="!w-fit text-white sm:ml-3 bg-green-500 hover:bg-green-600 px-5 py-2.5 mt-20 font-bold rounded-none self-end ml-auto xs:w-full"
          />
  <Button   
            role="cancel"
            type='button'
            onClick={onClose}
            label="cancel"
            parentClassName="flex xs:block"
            className="!w-fit text-white bg-red px-5 py-2.5 mt-20 font-bold rounded-none self-end ml-auto xs:w-full"
          />
          </div>
      </div>
  </form>
  );
};

export default Ratings;

1	/* eslint-disable react/jsx-key */
2	import React, { useEffect, useState } from 'react';
3	import { AiFillStar, AiOutlineStar } from 'react-icons/ai';
4	import { useDispatch, useSelector } from 'react-redux';
5	import { useForm } from 'react-hook-form';
6	import { yupResolver } from '@hookform/resolvers/yup';
7	import { provideRatings } from '../../features/api/ratings/ratingsSlice';
8	import { showErrorMessage, showSuccessMessage } from '../../utils/toast';
9	import Button from '../forms/Button';
10	import { ratingSchema } from '../../validations/inputValidation';
11	import Textarea from './Textarea';
12	import { getProductRatings } from '../../features/product/getRatingsSlice';
13
14	const Ratings = ({ visible, onClose, productId }) => {	25✔
15	const [number, setNumber] = useState(0);	3✔
16	const [hoverStar, setHoverStar] = useState(undefined);	3✔
17	const { ratings, isLoading } = useSelector((state) => state.getRatings);	4✔
18
19	const handleOnClose = (e) => {	3✔
20	if(e.target.id === 'container') onClose();	×
21	}
22
23	const dispatch = useDispatch();	3✔
24	const {
25	register,
26	handleSubmit,
27	formState: { errors },
28	} = useForm({	3✔
29	resolver: yupResolver(ratingSchema),
30	});
31
32	const onSubmit = async (reviewsData) => {	3✔
33
34	try {	1✔
35	reviewsData.rate=number	1✔
36	const response = await dispatch(provideRatings({rate:reviewsData.rate, productId:productId, feedback:reviewsData.Feedback})).unwrap();	1✔
37	dispatch(getProductRatings(productId));	×
38	console.log('response',response)	×
39	showSuccessMessage('Product rated successfully');	×
40	onClose()	×
41	} catch (error) {
42	showErrorMessage(error.data.message);	×
43	}
44	};
45
46
47	return (	3✔
48	<form
49	onSubmit={(event) => {
50	handleSubmit(onSubmit)(event);	1✔
51	}}
52
53	>
54
55	<div
56	id="container"
57	className={` fixed top-40 right-1/4 backdrop-blur-sm left-1/3 z-50 p-4 border border-grey-400 bg-slate-200 poppins bg-opacity-30 ${!visible ? 'hidden': ''}`}>	3!
58	<h2>Provide Ratings</h2>
59	<div className="flex items-center">
60	{Array(5)
61	.fill()
62	.map((_, index) => (
63	number >= index + 1 \|\| hoverStar >= index + 1 ? (	15!
64	<AiFillStar
65	key={`${index}rate`}
66	onMouseOver={() => setHoverStar(index + 1)}	×
67	onMouseLeave={() => setHoverStar(undefined)}	×
68	style={{ color: 'orange' }}
69	onClick={() => setNumber(index + 1)}	×
70	/>
71	) : (
72	<AiOutlineStar
73	key={`${index}star`}
74	onMouseOver={() => setHoverStar(index + 1)}	×
75	onMouseLeave={() => hoverStar(undefined)}	×
76	style={{ color: 'orange' }}
77	onClick={() => setNumber(index + 1)}	×
78	/>
79	)
80	))}
81	</div>
82	<div className='mt-5'>
83	<Textarea
84	id="feedback"
85	rows='4'
86	name="feedback"
87	label="Feedback"
88	placeholder="Provide your feedback"
89	className='block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:border-blue-50'
90	{...register('Feedback')}
91	error={errors?.Feedback}
92	/>
93	</div>
94	<div className=' py-3 sm:px-6 sm:flex sm:flex-row-reverse'>
95	<Button
96	role="submit"
97	type="submit"
98	label="Add review"
99	parentClassName="flex xs:block"
100	className="!w-fit text-white sm:ml-3 bg-green-500 hover:bg-green-600 px-5 py-2.5 mt-20 font-bold rounded-none self-end ml-auto xs:w-full"
101	/>
102	<Button
103	role="cancel"
104	type='button'
105	onClick={onClose}
106	label="cancel"
107	parentClassName="flex xs:block"
108	className="!w-fit text-white bg-red px-5 py-2.5 mt-20 font-bold rounded-none self-end ml-auto xs:w-full"
109	/>
110	</div>
111	</div>
112	</form>
113	);
114	};
115
116	export default Ratings;

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