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