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>

  );

}