Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react'
import { connect } from 'react-redux'
import { Avatar } from '@mui/material'

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

import Button from '@app/components/UI/buttons/Buttons'
import Widget from '@app/components/UI/Widget'
import Spinner from '@app/components/UI/Spinner'
import DropzoneComponent from '@app/components/dropzone/DropzoneComponent'
import FormErrorFeedback from '@app/components/UI/form/FormErrorFeedback'

const ChangeImage = ({ addNotification }) => {
  const [imageUrl, setImageUrl] = useState('')
  const [imageFile, setImageFile] = useState(null)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

  const handleOnDropImage = (acceptedFile) => {
    if (!acceptedFile) {
      setImageUrl('')
      setImageFile(null)
      setError('')
      return
    }

    setError('')
    const newImgUrl = URL.createObjectURL(acceptedFile)
    setImageUrl(newImgUrl)
    setImageFile(acceptedFile)
  }

  const handleSubmit = async () => {
    if (!validate()) return

    setLoading(true)

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

    axios
      .post('/account-settings/image/upload', formData)
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          const errorMessage =
            typeof data === 'string'
              ? data
              : 'Ha ocurrido un error, Por favor intente más tarde'
          throw new Error(errorMessage)
        }

        sessionStorage.setItem('user_session_image', data)
        addNotification({
          style: 'success',
          msg: 'Imagen cambiada exitosamente'
        })
      })
      .catch((err) => addNotification({ style: 'danger', msg: err.message }))
      .finally(() => setLoading(false))
  }

  const validate = () => {
    let errorMsg = ''

    if (!imageFile) {
      errorMsg = 'Por favor ingrese una imagen'
      setError(errorMsg)
      return false
    }

    return true
  }

  const getUserImage = () => {
    setLoading(true)

    axios
      .get('/account-settings/image/upload')
      .then(({ data: responseData }) => {
        const { data, success } = responseData

        if (!success) {
          throw new Error(data)
        }

        setImageUrl(data)
      })
      .catch((err) => {
        addNotification({ style: 'danger', msg: err.message })
      })
      .finally(() => setLoading(false))
  }

  useEffect(() => {
    getUserImage()
  }, [])

  return (
    <Widget>
      <Widget.Header title='Cambiar Imagen' />

      <Widget.Body>
        {imageUrl && (
          <Avatar
            src={imageUrl}
            sx={{ width: 100, height: 100, margin: 'auto' }}
          />
        )}

        <DropzoneComponent onUploaded={handleOnDropImage} modalType='IMAGE' />
        {error ? <FormErrorFeedback>{error}</FormErrorFeedback> : null}

        {loading && <Spinner />}

        <Button
          variant='primary'
          onClick={handleSubmit}
          styles={{ marginTop: '1rem' }}
          fullWidth
        >
          Guardar
        </Button>
      </Widget.Body>
    </Widget>
  )
}

const mapDispatchToProps = {
  addNotification: (notification) => addNotification(notification)
}

export default connect(null, mapDispatchToProps)(ChangeImage)