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, isSubmitting }

  } = useForm({

    defaultValues: {

      image: ''

    }

  })

  const onSubmit = async ({ image }) => {

    try {

      const formData = new FormData()

      formData.append('image', image)

      const response = axios.post(url, formData)

      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)

      }

      dispatch(addNotification({ style: 'success', msg: 'Imagen actualizada' }))

      onComplete(newImage)

      reset()

      onClose()

    } catch (error) {

      dispatch(addNotification({ style: 'error', msg: error.message }))

    }

  }

  useEffect(() => {

    register('image', {

      required: { value: 'true', message: 'El campo es requerido' }

    })

  }, [])

  return (

    <Modal

      show={show}

      title='Imagen'

      onClose={onClose}

      onReject={onClose}

      onAccept={handleSubmit(onSubmit)}

      loading={isSubmitting}

    >

      <DropzoneComponent

        modalType='IMAGE'

        onUploaded={(file) => setValue('image', file)}

        settedFile={watch('image')}

        recomendationText={message}

      />

      {errors.image && (

        <FormErrorFeedback>{errors.image.message}</FormErrorFeedback>

      )}

    </Modal>

  )

}

export default ImageModal