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((response) => {
        const { data, success } = response.data;

        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((response) => {
        const { data, success } = response.data;

        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);