Proyectos de Subversion LeadersLinked - SPA

import React from 'react'

import { useDispatch } from 'react-redux'

import { Controller, 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 {

    control,

    formState: { isSubmitting },

    handleSubmit,

    reset

  } = useForm({

    defaultValues: { image: '' }

  })

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

    try {

      const formData = new FormData()

      formData.append('image', image)

      const response = await 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: 'danger', msg: error.message }))

    }

  })

  return (

    <Modal

      show={show}

      title='Imagen'

      onClose={onClose}

      onReject={onClose}

      onAccept={onSubmit}

      loading={isSubmitting}

    >

      <Controller

        name='image'

        control={control}

        rules={{ required: 'Imagen requerida' }}

        render={({ field: { onChange, value }, fieldState: { error } }) => (

          <>

            <DropzoneComponent

              type='IMAGE'

              onUploaded={(file) => onChange(file)}

              settedFile={value}

              recomendationText={message}

            />

            {error && <FormErrorFeedback>{error.message}</FormErrorFeedback>}

          </>

        )}

      />

    </Modal>

  )

}

export default ImageModal