Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2717 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
2639 stevensc 1 
import { axios } from "../../../utils";
1 www 2 
import React, { useEffect, useState } from "react";
3 
import { connect } from "react-redux";
4 
import styled from "styled-components";
5 
import { addNotification } from "../../../redux/notification/notification.actions";
6 
import FormErrorFeedback from "../../../shared/form-error-feedback/FormErrorFeedback";
7 
import Spinner from "../../../shared/loading-spinner/Spinner";
8 
import MyDropzone from "./dropzone/Dropzone";
9 
 
10 
const StyledSetting = styled.div`
11 
  display: flex;
12 
  justify-content: center;
13 
  align-items: center;
14 
  flex-direction: column;
2640 stevensc 15 
  margin: 0 2rem;
1 www 16 
  .dropzoneContainer {
17 
    width: 90%;
2640 stevensc 18 
    height: 230px;
2717 stevensc 19 
    margin: auto;
1 www 20 
    margin-top: 1.5rem;
2717 stevensc 21 
    text-align: center;
1 www 22 
  }
23 
`;
24 
 
25 
const StyledSpinnerContainer = styled.div`
26 
  position: absolute;
27 
  left: 0;
28 
  top: 0;
29 
  width: 100%;
30 
  height: 100%;
31 
  background: rgba(255, 255, 255, 0.4);
32 
  display: flex;
33 
  justify-content: center;
34 
  align-items: center;
35 
  z-index: 300;
36 
`;
37 
 
38 
const ChangeImage = (props) => {
39 
  // redux destructuring
40 
  const { addNotification } = props;
41 
 
42 
  // states
43 
  const [imageUrl, setImageUrl] = useState("");
44 
  const [imageFile, setImageFile] = useState(null);
45 
  const [error, setError] = useState("");
46 
  const [loading, setLoading] = useState(false);
47 
 
48 
  const handleOnDropImage = (acceptedFile) => {
49 
    setError("");
50 
    const newImgUrl = URL.createObjectURL(acceptedFile);
51 
    setImageUrl(newImgUrl);
52 
    setImageFile(acceptedFile);
53 
  };
54 
 
55 
  const handleDropReject = () => {
56 
    setError("Por favor solo introducir imagenes jpeg, jpeg y png");
57 
  };
58 
 
59 
  const handleSubmit = async () => {
60 
    setLoading(true);
61 
    if (validate()) {
62 
      const formData = new FormData();
63 
      formData.append("image", imageFile);
3166 stevensc 64 
      axios.post("/account-settings/image/upload", formData)
65 
        .then(({ data }) => {
66 
          if (!data.success) {
1 www 67 
            addNotification({
68 
              style: "danger",
3166 stevensc 69 
              msg: typeof data.data === "string"
70 
                ? data.data
71 
                : "Ha ocurrido un error, Por favor intente más tarde"
1 www 72 
            });
3166 stevensc 73 
            return
1 www 74 
          }
3166 stevensc 75 
          sessionStorage.setItem('user_session_image', data.data)
76 
          addNotification({
77 
            style: "success",
78 
            msg: 'Imagen cambiada exitosamente'
79 
          });
80 
          setLoading(false);
1 www 81 
        });
82 
    }
83 
    setLoading(false);
84 
  };
85 
 
86 
  const validate = () => {
87 
    let errorMsg = "";
88 
    if (!imageFile) {
89 
      errorMsg = "Por favor ingrese una imagen";
90 
      setError(errorMsg);
91 
      return false;
92 
    }
93 
    return true;
94 
  };
95 
 
96 
  useEffect(async () => {
97 
    setLoading(true);
98 
    await axios.get("/account-settings/image/upload").then((response) => {
99 
      const resData = response.data;
100 
      if (resData.success) {
101 
        setImageUrl(resData.data);
102 
      }
103 
    });
104 
    setLoading(false);
105 
  }, []);
106 
 
107 
  return (
2639 stevensc 108 
    <div className="settings-container">
2641 stevensc 109 
      <h2>Cambiar Imagen</h2>
2639 stevensc 110 
      <div className="acc-setting_content">
111 
        <StyledSetting>
112 
          {imageUrl && (
113 
            <img
114 
              id="user-img-change"
115 
              src={imageUrl}
116 
              className="img img-responsive"
117 
            />
118 
          )}
119 
          <div className="dropzoneContainer">
120 
            <MyDropzone
121 
              onDrop={handleOnDropImage}
122 
              onDropRejected={handleDropReject}
123 
            />
124 
            {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
125 
          </div>
126 
        </StyledSetting>
127 
        <div className="pt-4 d-flex align-items-center justify-content-center">
128 
          <button
129 
            type="button"
130 
            className="btn btn-secondary"
131 
            onClick={handleSubmit}
132 
          >
133 
            Guardar
134 
          </button>
1 www 135 
        </div>
136 
      </div>
2639 stevensc 137 
 
1 www 138 
      {loading && (
139 
        <StyledSpinnerContainer>
140 
          <Spinner></Spinner>
141 
        </StyledSpinnerContainer>
142 
      )}
143 
    </div>
144 
  );
145 
};
146 
 
147 
// const mapStateToProps = (state) => ({
148 
 
149 
// })
150 
 
151 
const mapDispatchToProps = {
152 
  addNotification: (notification) => addNotification(notification),
153 
};
154 
 
155 
export default connect(null, mapDispatchToProps)(ChangeImage);