Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useDispatch, useSelector } from 'react-redux';

import { useForm } from 'react-hook-form';

import { Button } from '@mui/material';

import { axios } from '@utils';

import { addNotification } from '@store/notification/notification.actions';

import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';

const CommentForm = ({ linkCommentAdd = '' }) => {

  const [rating, setRating] = useState(1);

  const labels = useSelector(({ intl }) => intl.labels);

  const dispatch = useDispatch();

  const {

    register,

    handleSubmit,

    reset,

    formState: { errors }

  } = useForm({ mode: 'onBlur' });

  const addComment = handleSubmit(({ comment }) => {

    axios

      .post(linkCommentAdd, { comment, rating })

      .then((response) => {

        const { data, success } = response.data;

        if (!success) {

          const errorMessage = typeof data === 'string' ? data : JSON.stringify(data);

          throw new Error(errorMessage);

        }

        dispatch(addNotification({ style: 'success', msg: data.message }));

        setRating(1);

        reset();

      })

      .catch((err) => {

        dispatch(addNotification({ style: 'danger', msg: err.message }));

      });

  });

  return (

    <>

      <form onSubmit={addComment}>

        <div className='form-group'>

          <label htmlFor='comment'>Comentario</label>

          <textarea

            className='form-control'

            rows='4'

            name='comment'

            id='comment-add'

            placeholder={labels.write_a_post}

            maxLength={250}

            ref={register({ required: 'Este campo es requerido' })}

          />

          {errors.comment && <FormErrorFeedback>{errors.comment.message}</FormErrorFeedback>}

        </div>

        <Button

          color='primary'

          disabled={!rating}

          type='submit'

          sx={{ width: '100%', mt: 1, p: 1 }}

        >

          Enviar

        </Button>

      </form>

    </>

  );

};

export default CommentForm;