Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2639 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import {axios} from "../../../utils";
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;
15 
  margin: 2rem;
16 
  .dropzoneContainer {
17 
    width: 90%;
18 
    height: 100px;
19 
    margin-top: 1.5rem;
20 
  }
21 
`;
22 
 
23 
const StyledSpinnerContainer = styled.div`
24 
  position: absolute;
25 
  left: 0;
26 
  top: 0;
27 
  width: 100%;
28 
  height: 100%;
29 
  background: rgba(255, 255, 255, 0.4);
30 
  display: flex;
31 
  justify-content: center;
32 
  align-items: center;
33 
  z-index: 300;
34 
`;
35 
 
36 
const ChangeImage = (props) => {
37 
  // redux destructuring
38 
  const { addNotification } = props;
39 
 
40 
  // states
41 
  const [imageUrl, setImageUrl] = useState("");
42 
  const [imageFile, setImageFile] = useState(null);
43 
  const [error, setError] = useState("");
44 
  const [loading, setLoading] = useState(false);
45 
 
46 
  const handleOnDropImage = (acceptedFile) => {
47 
    setError("");
48 
    const newImgUrl = URL.createObjectURL(acceptedFile);
49 
    setImageUrl(newImgUrl);
50 
    setImageFile(acceptedFile);
51 
  };
52 
 
53 
  const handleDropReject = () => {
54 
    setError("Por favor solo introducir imagenes jpeg, jpeg y png");
55 
  };
56 
 
57 
  const handleSubmit = async () => {
58 
    setLoading(true);
59 
    if (validate()) {
60 
      const formData = new FormData();
61 
      formData.append("image", imageFile);
62 
      await axios
63 
        .post("/account-settings/image/upload", formData)
64 
        .then((response) => {
65 
          const resData = response.data;
66 
          if (resData.success) {
67 
            addNotification({
68 
              style: "success",
69 
              msg: 'Imagen cambiada exitosamente',
70 
            });
71 
          } else {
72 
            const errorMsg =
73 
              typeof resData.data === "string"
74 
                ? resData.data
75 
                : "Ha ocurrido un error, Por favor intente más tarde";
76 
            addNotification({
77 
              style: "danger",
78 
              msg: errorMsg,
79 
            });
80 
          }
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 (
108 
    <div
109 
      className="acc-setting"
110 
      style={{
111 
        position: "relative",
112 
      }}
113 
    >
114 
      <h3>Imagen</h3>
115 
      <StyledSetting>
116 
        {imageUrl && (
117 
          <img
118 
            id="user-img-change"
119 
            src={imageUrl}
120 
            className="img img-responsive"
121 
          />
122 
        )}
123 
 
124 
        <div className="dropzoneContainer">
125 
          <MyDropzone
126 
            onDrop={handleOnDropImage}
127 
            onDropRejected={handleDropReject}
128 
          />
129 
          {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
130 
        </div>
131 
      </StyledSetting>
132 
      <div className="save-stngs pd2">
133 
        <ul>
134 
          <li>
135 
            <button
136 
              type="button"
137 
              className="btn-save-basic"
138 
              onClick={handleSubmit}
139 
            >
140 
              Guardar
141 
            </button>
142 
          </li>
143 
        </ul>
144 
      </div>
145 
      {loading && (
146 
        <StyledSpinnerContainer>
147 
          <Spinner></Spinner>
148 
        </StyledSpinnerContainer>
149 
      )}
150 
    </div>
151 
  );
152 
};
153 
 
154 
// const mapStateToProps = (state) => ({
155 
 
156 
// })
157 
 
158 
const mapDispatchToProps = {
159 
  addNotification: (notification) => addNotification(notification),
160 
};
161 
 
162 
export default connect(null, mapDispatchToProps)(ChangeImage);