Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Controller, useForm } from 'react-hook-form'

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

import Modal from '../modal/Modal'
import FormErrorFeedback from '../form/FormErrorFeedback'
import DropzoneComponent from '@components/dropzone/DropzoneComponent'

const CoverModal = ({
  show = false,
  sizes = '',
  onClose = () => {},
  onChange = () => {},
  url = ''
}) => {
  const labels = useSelector(({ intl }) => intl.labels)
  const dispatch = useDispatch()

  const {
    control,
    formState: { isSubmitting },
    handleSubmit
  } = useForm()

  const onSubmit = handleSubmit(async ({ cover }) => {
    try {
      const formData = new FormData()
      formData.append('cover', cover)

      const response = await axios.post(url, formData)

      const { data, success } = response

      if (!success) throw new Error('Error al actualizar el portada')

      onChange(data)
      onClose()
    } catch (error) {
      console.log(error)
      dispatch(addNotification({ style: 'danger', msg: error.message }))
    }
  })

  return (
    <Modal
      title={labels.cover}
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
      loading={isSubmitting}
    >
      <Controller
        name='cover'
        control={control}
        rules={{ required: 'Portada requerida' }}
        render={({ field: { onChange, value }, fieldState: { error } }) => (
          <>
            <DropzoneComponent
              modalType='IMAGE'
              onUploaded={onChange}
              settedFile={value}
              recomendationText={`Imágenes recomendadas de ${sizes}`}
            />
            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}
          </>
        )}
      />
    </Modal>
  )
}

export default CoverModal