Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useDispatch } from 'react-redux';
import { useForm } from 'react-hook-form';

import { useInmail } from '@hooks';
import { sendInmail } from '@app/services/inmail';
import { addNotification } from '@app/redux/notification/notification.actions';

import Ckeditor from '@components/common/ckeditor/Ckeditor';
import FormErrorFeedback from '@components/UI/form/FormErrorFeedback';
import Input from '@components/UI/inputs/Input';
import Modal from '@components/UI/modal/Modal';
import SearchInput from './search-input';

export default function ComposeModal() {
  const { composeModalShow, toggleComposeModal } = useInmail();
  const dispatch = useDispatch();
  const requiredErrorMsg = 'Este campo es requerido';

  const {
    control,
    setValue,
    handleSubmit,
    reset,
    formState: { isSubmitting, errors }
  } = useForm({
    defaultValues: {
      to: '',
      subject: '',
      message: '',
      file: ''
    }
  });

  const onSend = handleSubmit(async ({ to, ...message }) => {
    try {
      const result = await sendInmail(to, message);
      dispatch(addNotification({ style: 'success', msg: result }));
      toggleComposeModal();
      reset();
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  });

  return (
    <Modal
      show={composeModalShow}
      title='Nuevo mensaje'
      onAccept={onSend}
      loading={isSubmitting}
      onClose={toggleComposeModal}
    >
      <SearchInput onChange={(value) => setValue('to', value.send_link)} />
      {errors.to?.message ? <FormErrorFeedback>{errors.to.message}</FormErrorFeedback> : null}

      <Input
        label='Asunto'
        name='subject'
        control={control}
        rules={{ required: requiredErrorMsg }}
        error={errors.subject?.message}
      />

      <Ckeditor onChange={(value) => setValue('message', value)} />
      {errors.message?.message ? (
        <FormErrorFeedback>{errors.message.message}</FormErrorFeedback>
      ) : null}

      <Input
        type='file'
        label='Adjunto'
        accept='image/*'
        onChange={(e) => setValue('file', e.target.files[0])}
        error={errors.file?.message}
      />
    </Modal>
  );
}