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

          color='primary'

          onClick={handleSubmit}

          styles={{ marginTop: '1rem' }}

          fullWidth

        >

          Guardar

        </Button>

      </Widget.Body>

    </Widget>

  )

}

const mapDispatchToProps = {

  addNotification: (notification) => addNotification(notification)

}

export default connect(null, mapDispatchToProps)(ChangeImage)