Proyectos de Subversion LeadersLinked - SPA

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

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

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

const ImageModal = ({
  show = false,
  url = '',
  message = 'Imágenes recomendadas de 250x250',
  onComplete = (newImage) => {},
  onClose = () => {}
}) => {
  const dispatch = useDispatch()

  const {
    register,
    handleSubmit,
    setValue,
    watch,
    reset,
    formState: { errors }
  } = useForm({
    defaultValues: {
      image: ''
    }
  })

  const onSubmitHandler = handleSubmit(({ image }) => {
    const formData = new FormData()
    formData.append('image', image)

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

        if (!success) {
          throw new Error('Error al actualizar la imagen')
        }

        const newImage = data.profile ?? data

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

        onComplete(newImage)

        dispatch(
          addNotification({ style: 'success', msg: 'Registro actualizado' })
        )
        reset()
        onClose()
      })
      .catch((err) => {
        addNotification({ style: 'error', msg: err.message })
      })
  })

  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={(file) => setValue('image', file)}
        settedFile={watch('image')}
        recomendationText={message}
      />

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

export default ImageModal