Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect } from 'react'

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

import { useDispatch } from 'react-redux'

import { useInmail } from '@hooks'

import { replyInmail } from '@app/services/inmail'

import { addNotification } from '@app/redux/notification/notification.actions'

import Modal from '@components/UI/modal/Modal'

import Input from '@components/UI/inputs/Input'

import Ckeditor from '@components/common/ckeditor/Ckeditor'

export default function ReplyModal() {

  const { replyModalShow, closeReply, selectedMessage } = useInmail()

  const dispatch = useDispatch()

  const {

    setValue,

    handleSubmit,

    register,

    reset,

    formState: { isSubmitting, errors }

  } = useForm({

    defaultValues: {

      body: '',

      subject: '',

      filename: ''

    }

  })

  const onSend = handleSubmit(async (message) => {

    try {

      const result = await replyInmail(selectedMessage?.send_link, message)

      dispatch(addNotification({ style: 'success', msg: result }))

      closeReply()

      reset()

    } catch (error) {

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

    }

  })

  useEffect(() => {

    const requiredErrorMsg = 'Este campo es requerido'

    register('body', { required: requiredErrorMsg })

    register('subject', { required: requiredErrorMsg })

    register('filename')

  }, [replyModalShow])

  return (

    <Modal

      show={replyModalShow}

      title={`Respuesta a ${selectedMessage?.name}`}

      onAccept={onSend}

      loading={isSubmitting}

      onClose={closeReply}

    >

      <Input label='Para' value={selectedMessage?.name} disabled />

      <Input

        label='Asunto'

        onChange={(e) => setValue('subject', e.target.value)}

      />

      <Ckeditor onChange={(value) => setValue('body', value)} />

      <Input

        type='file'

        label='Adjunto'

        accept='image/*'

        onChange={(e) => setValue('filename', e.target.files[0])}

        error={errors.filename?.message}

      />

    </Modal>

  )

}