Proyectos de Subversion LeadersLinked - SPA

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

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

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

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

  const { register, errors, handleSubmit, setValue, watch } = useForm()

  const onUploadedHandler = (files) => {
    setValue('cover', files)
  }

  const onSubmit = handleSubmit(({ cover }) => {
    axios
      .post(url, { cover })
      .then(({ data: response }) => {
        const { data, success } = response

        if (!success) {
          const errorMessage =
            typeof data === 'string' ? data : 'Intente mas tarde'
          throw new Error(errorMessage)
        }

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

  useEffect(() => {
    register('cover', {
      required: 'Este campo es requerido'
    })
  }, [])

  return (
    <Modal
      title={labels.cover}
      show={show}
      onClose={onClose}
      onAccept={onSubmit}
    >
      <DropzoneComponent
        modalType='IMAGE'
        onUploaded={onUploadedHandler}
        settedFile={watch('cover')}
        recomendationText={`Imágenes recomendadas de ${sizes}`}
      />
      {errors.cover && (
        <FormErrorFeedback>{errors.cover.message}</FormErrorFeedback>
      )}
    </Modal>
  )
}

export default CoverModal