Proyectos de Subversion LeadersLinked - SPA

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

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

import Modal from 'components/UI/Modal'
import DropzoneComponent from '../dropzone/DropzoneComponent'
import FormErrorFeedback from '../UI/FormErrorFeedback'

const ImageModal = ({ show, onClose, sizes, id, onComplete }) => {
  const dispatch = useDispatch()

  const {
    register,
    errors,
    handleSubmit,
    setValue,
    clearErrors,
    setError,
    getValues
  } = useForm()

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

  const onSubmitHandler = handleSubmit(({ image }) => {
    const type = window.location.pathname.split('/')[1]
    const typesUrl = {
      profile: `/profile/my-profiles/image/${id}/operation/upload`,
      company: `/my-company/${id}/profile/image/upload`,
      group: `/group/my-groups/image/${id}/operation/upload`
    }

    const formData = new FormData()
    formData.append('image', image)

    axios.post(typesUrl[type], formData).then(({ data: response }) => {
      const { data, success } = response

      if (!success) {
        const resError = data
        if (resError.constructor.name === 'Object') {
          Object.entries(resError).forEach(([key, value]) => {
            if (key in getValues()) {
              setError(key, {
                type: 'manual',
                message: Array.isArray(value) ? value[0] : value
              })
            }
          })
        } else {
          dispatch(addNotification({ style: 'danger', msg: resError }))
        }
      }

      const newImage = data.profile ?? data

      if (data.update_navbar) {
        sessionStorage.setItem('user_session_image', data.user)
      }

      onComplete(newImage)

      setValue('image', '')
      dispatch(
        addNotification({ style: 'success', msg: 'Registro actualizado' })
      )
      onClose()
    })
  })

  useEffect(() => {
    register('image', {
      required: { value: 'true', message: 'El campo es requerido' }
    })
  }, [])

  return (
    <Modal
      show={show}
      title='Imagen'
      onClose={onClose}
      onReject={onClose}
      onAccept={onSubmitHandler}
    >
      <DropzoneComponent
        modalType='IMAGE'
        onUploaded={onUploadedHandler}
        recomendationText={`Imágenes recomendadas de ${sizes}`}
      />

      {errors.image && (
        <FormErrorFeedback>{errors.image.message}</FormErrorFeedback>
      )}
    </Modal>
  )
}

export default ImageModal