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