Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1 | Rev 2640 | Ir a la última revisión | | 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;
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 (
2639 stevensc 108 
    <div className="settings-container">
109 
      <h2>Imagen</h2>
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);