Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2641 | 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;
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);
64 
      await axios
65 
        .post("/account-settings/image/upload", formData)
66 
        .then((response) => {
67 
          const resData = response.data;
68 
          if (resData.success) {
69 
            addNotification({
70 
              style: "success",
71 
              msg: 'Imagen cambiada exitosamente',
72 
            });
73 
          } else {
74 
            const errorMsg =
75 
              typeof resData.data === "string"
76 
                ? resData.data
77 
                : "Ha ocurrido un error, Por favor intente más tarde";
78 
            addNotification({
79 
              style: "danger",
80 
              msg: errorMsg,
81 
            });
82 
          }
83 
        });
84 
    }
85 
    setLoading(false);
86 
  };
87 
 
88 
  const validate = () => {
89 
    let errorMsg = "";
90 
    if (!imageFile) {
91 
      errorMsg = "Por favor ingrese una imagen";
92 
      setError(errorMsg);
93 
      return false;
94 
    }
95 
    return true;
96 
  };
97 
 
98 
  useEffect(async () => {
99 
    setLoading(true);
100 
    await axios.get("/account-settings/image/upload").then((response) => {
101 
      const resData = response.data;
102 
      if (resData.success) {
103 
        setImageUrl(resData.data);
104 
      }
105 
    });
106 
    setLoading(false);
107 
  }, []);
108 
 
109 
  return (
2639 stevensc 110 
    <div className="settings-container">
2641 stevensc 111 
      <h2>Cambiar Imagen</h2>
2639 stevensc 112 
      <div className="acc-setting_content">
113 
        <StyledSetting>
114 
          {imageUrl && (
115 
            <img
116 
              id="user-img-change"
117 
              src={imageUrl}
118 
              className="img img-responsive"
119 
            />
120 
          )}
121 
          <div className="dropzoneContainer">
122 
            <MyDropzone
123 
              onDrop={handleOnDropImage}
124 
              onDropRejected={handleDropReject}
125 
            />
126 
            {error && <FormErrorFeedback>{error}</FormErrorFeedback>}
127 
          </div>
128 
        </StyledSetting>
129 
        <div className="pt-4 d-flex align-items-center justify-content-center">
130 
          <button
131 
            type="button"
132 
            className="btn btn-secondary"
133 
            onClick={handleSubmit}
134 
          >
135 
            Guardar
136 
          </button>
1 www 137 
        </div>
138 
      </div>
2639 stevensc 139 
 
1 www 140 
      {loading && (
141 
        <StyledSpinnerContainer>
142 
          <Spinner></Spinner>
143 
        </StyledSpinnerContainer>
144 
      )}
145 
    </div>
146 
  );
147 
};
148 
 
149 
// const mapStateToProps = (state) => ({
150 
 
151 
// })
152 
 
153 
const mapDispatchToProps = {
154 
  addNotification: (notification) => addNotification(notification),
155 
};
156 
 
157 
export default connect(null, mapDispatchToProps)(ChangeImage);