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,

    handleSubmit,

    setValue,

    watch,

    formState: { errors }

  } = useForm()

  const onUploadedHandler = (files) => {

    setValue('cover', files)

  }

  const onSubmit = handleSubmit(({ cover }) => {

    const formData = new FormData()

    formData.append('cover', cover)

    axios

      .post(url, formData)

      .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