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;