Proyectos de Subversion LeadersLinked - Antes de SPA

import { axios } from "../../../utils";
import React, { useEffect, useState } from "react";
import { connect } from "react-redux";
import styled from "styled-components";
import { addNotification } from "../../../redux/notification/notification.actions";
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
import Spinner from "../../../shared/loading-spinner/Spinner";
import MyDropzone from "./dropzone/Dropzone";

const StyledSetting = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 2rem;
  .dropzoneContainer {
    width: 90%;
    height: 230px;
    margin: auto;
    margin-top: 1.5rem;
    text-align: center;
  }
`;

const StyledSpinnerContainer = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 300;
`;

const ChangeImage = (props) => {
  // redux destructuring
  const { addNotification } = props;

  // states
  const [imageUrl, setImageUrl] = useState("");
  const [imageFile, setImageFile] = useState(null);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  const handleOnDropImage = (acceptedFile) => {
    setError("");
    const newImgUrl = URL.createObjectURL(acceptedFile);
    setImageUrl(newImgUrl);
    setImageFile(acceptedFile);
  };

  const handleDropReject = () => {
    setError("Por favor solo introducir imagenes jpeg, jpeg y png");
  };

  const handleSubmit = async () => {
    setLoading(true);
    if (validate()) {
      const formData = new FormData();
      formData.append("image", imageFile);
      axios.post("/account-settings/image/upload", formData)
        .then(({ data }) => {
          if (!data.success) {
            addNotification({
              style: "danger",
              msg: typeof data.data === "string"
                ? data.data
                : "Ha ocurrido un error, Por favor intente más tarde"
            });
            return
          }
          sessionStorage.setItem('user_session_image', data.data)
          addNotification({
            style: "success",
            msg: 'Imagen cambiada exitosamente'
          });
          setLoading(false);
        });
    }
    setLoading(false);
  };

  const validate = () => {
    let errorMsg = "";
    if (!imageFile) {
      errorMsg = "Por favor ingrese una imagen";
      setError(errorMsg);
      return false;
    }
    return true;
  };

  useEffect(async () => {
    setLoading(true);
    await axios.get("/account-settings/image/upload").then((response) => {
      const resData = response.data;
      if (resData.success) {
        setImageUrl(resData.data);
      }
    });
    setLoading(false);
  }, []);

  return (
    <div className="settings-container">
      <h2>Cambiar Imagen</h2>
      <div className="acc-setting_content">
        <StyledSetting>
          {imageUrl && (
            <img
              id="user-img-change"
              src={imageUrl}
              className="img img-responsive"
            />
          )}
          <div className="dropzoneContainer">
            <MyDropzone
              onDrop={handleOnDropImage}
              onDropRejected={handleDropReject}
            />
            {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
          </div>
        </StyledSetting>
        <div className="pt-4 d-flex align-items-center justify-content-center">
          <button
            type="button"
            className="btn btn-secondary"
            onClick={handleSubmit}
          >
            Guardar
          </button>
        </div>
      </div>

      {loading && (
        <StyledSpinnerContainer>
          <Spinner></Spinner>
        </StyledSpinnerContainer>
      )}
    </div>
  );
};

// const mapStateToProps = (state) => ({

// })

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

export default connect(null, mapDispatchToProps)(ChangeImage);