Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3872 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3872 Rev 4599
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React from "react";
 2 
import React from "react";
3 
import { useState, useEffect } from "react";
 3 
import { useState, } from "react";
4 
import { Button, Modal } from "react-bootstrap";
 - 
 
5 
import { useForm } from "react-hook-form";
 - 
 
6 
import styled from "styled-components";
 - 
 
7 
import { axios } from "../../../../../utils";
 - 
 
8 
import Spinner from "../../../../loading-spinner/Spinner";
 - 
 
9 
import DropzoneComponent from "../../../../dropzone/DropzoneComponent";
 - 
 
10 
import { profileTypes } from "../../../Profile.types";
 4 
import { profileTypes } from "../../../Profile.types";
11 
import FormErrorFeedback from "../../../../form-error-feedback/FormErrorFeedback";
 5 
import ImageModal from './ImageModal'
12 
import { addNotification } from "../../../../../redux/notification/notification.actions";
 - 
 
Línea 13... Línea -...
13 
 
 - 
 
14 
const StyledSpinnerContainer = styled.div`
 - 
 
15 
  position: absolute;
 - 
 
16 
  left: 0;
 - 
 
17 
  top: 0;
 - 
 
18 
  width: 100%;
 - 
 
19 
  height: 100%;
 - 
 
20 
  background: rgba(255, 255, 255, 0.4);
 - 
 
21 
  display: flex;
 - 
 
22 
  justify-content: center;
 - 
 
23 
  align-items: center;
 - 
 
24 
  z-index: 300;
 - 
 
Línea 25... Línea 6...
25 
`;
 6 
 
26 
 
 7 
 
27 
const ProfileImg = ({
 8 
const ProfileImg = ({
28 
  entityId = '',
 9 
  entityId = '',
29 
  profileId = '',
 10 
  profileId = '',
30 
  image = '',
 11 
  image = '',
31 
  imageProfileCover = '',
 12 
  imageProfileCover = '',
Línea 32... Línea 13...
32 
  profileType = ''
 13 
  profileType = ''
33 
}) => {
 - 
 
34 
 
 - 
 
35 
  const {
 - 
 
36 
    register,
 - 
 
37 
    errors,
 - 
 
38 
    handleSubmit,
 - 
 
39 
    setValue,
 - 
 
40 
    clearErrors,
 - 
 
Línea 41... Línea 14...
41 
    setError,
 14 
}) => {
42 
    getValues
 15 
 
43 
  } = useForm();
 - 
 
- 
 
 16 
 
44 
 
 17 
 
45 
  // states
 18 
  // states
46 
  const [isModalOpen, setIsModalOpen] = useState(false);
 19 
  const [isModalOpen, setIsModalOpen] = useState(false);
47 
  const [loading, setLoading] = useState(false);
 20 
 
48 
  const [profileImg, setProfileImg] = useState(() => {
 21 
  const [profileImg, setProfileImg] = useState(() => {
Línea 65... Línea 38...
65 
  const handleModalOpen = (event) => {
 38 
  const handleModalOpen = (event) => {
66 
    event && event.preventDefault();
 39 
    event && event.preventDefault();
67 
    setIsModalOpen(!isModalOpen);
 40 
    setIsModalOpen(!isModalOpen);
68 
  };
 41 
  };
Línea 69... Línea -...
69 
 
 - 
 
70 
  const onUploadedHandler = (files) => {
 - 
 
71 
    setValue("image", files);
 - 
 
72 
    clearErrors("image");
 - 
 
73 
  };
 - 
 
74 
 
 - 
 
75 
  const dropZoneRender = () => (
 - 
 
76 
    <DropzoneComponent
 - 
 
77 
      modalType="IMAGE"
 - 
 
78 
      onUploaded={onUploadedHandler}
 - 
 
79 
      recomendationText={`Imágenes recomendadas de ${imageProfileCover}`}
 - 
 
80 
    />
 - 
 
81 
  );
 - 
 
82 
 
 - 
 
83 
  useEffect(() => {
 - 
 
84 
    register("image", {
 - 
 
85 
      required: { value: "true", message: "El campo es requerido" },
 - 
 
86 
    });
 - 
 
87 
    // setSettedCover(false);
 - 
 
88 
  }, []);
 - 
 
89 
 
 - 
 
90 
  const onSubmitHandler = async (data) => {
 - 
 
91 
    let postPath = "";
 - 
 
92 
    switch (profileType) {
 - 
 
93 
      case profileTypes.USER:
 - 
 
94 
        postPath = `/profile/my-profiles/image/${profileId}/operation/upload`;
 - 
 
95 
        break;
 - 
 
96 
      case profileTypes.COMPANY:
 - 
 
97 
        postPath = `/my-company/${profileId}/profile/image/upload`;
 - 
 
98 
        break;
 - 
 
99 
      default:
 - 
 
100 
        break;
 - 
 
101 
    }
 - 
 
102 
    ("called");
 - 
 
103 
    setLoading(true);
 - 
 
104 
    const formData = new FormData();
 - 
 
105 
    Object.entries(data).map(([key, value]) => {
 - 
 
106 
      formData.append(key, value);
 - 
 
107 
    });
 - 
 
108 
    await axios.post(postPath, formData).then((response) => {
 - 
 
109 
      const resData = response.data;
 - 
 
110 
      (resData);
 - 
 
111 
      if (resData.success) {
 - 
 
112 
        setLoading(false);
 - 
 
113 
        const newCoverImg = {
 - 
 
114 
          path: resData.data.profile,
 - 
 
115 
          uid: Date.now(),
 - 
 
116 
        };
 - 
 
117 
        if (resData.data.update_navbar) sessionStorage.setItem('user_session_image', resData.data.user)
 - 
 
118 
        setProfileImg(newCoverImg);
 - 
 
119 
        setValue("image", "");
 - 
 
120 
        handleModalOpen();
 - 
 
121 
      } else {
 - 
 
122 
        const resError = resData.data;
 - 
 
123 
        if (resError.constructor.name === "Object") {
 - 
 
124 
          Object.entries(resError).map(([key, value]) => {
 - 
 
125 
            if (key in getValues()) {
 - 
 
126 
              setError(key, {
 - 
 
127 
                type: "manual",
 - 
 
128 
                message: Array.isArray(value) ? value[0] : value,
 - 
 
129 
              });
 - 
 
130 
            }
 - 
 
131 
          });
 - 
 
132 
        } else {
 - 
 
133 
          addNotification({
 - 
 
134 
            style: "danger",
 - 
 
135 
            msg: resError,
 - 
 
136 
          });
 - 
 
137 
        }
 - 
 
138 
      }
 - 
 
139 
    });
 - 
 
140 
    setLoading(false);
 - 
 
141 
  };
 - 
 
142 
 
 42 
 
143 
  return (
 43 
  return (
144 
    <React.Fragment>
 44 
    <>
145 
      <div className="user-pro-img">
 45 
      <div className="user-pro-img">
146 
        <img
 46 
        <img
147 
          id="user-profile-img"
 47 
          id="user-profile-img"
148 
          src={`${profileImg.path}?${profileImg.uid}`}
 48 
          src={`${profileImg.path}?${profileImg.uid}`}
Línea 152... Línea 52...
152 
          <a href="#" className="btn-image-open" onClick={handleModalOpen}>
 52 
          <a href="#" className="btn-image-open" onClick={handleModalOpen}>
153 
            <i className="fas fa-camera"></i>
 53 
            <i className="fas fa-camera"></i>
154 
          </a>
 54 
          </a>
155 
        </div>
 55 
        </div>
156 
      </div>
 56 
      </div>
157 
 
 - 
 
158 
      {/* modal */}
 - 
 
159 
      <Modal
 57 
      <ImageModal
160 
        show={isModalOpen}
 58 
        isModalOpen={isModalOpen}
161 
        onHide={handleModalOpen}
 59 
        profileId={profileId}
162 
        style={{ overflowY: "scroll" }}
 60 
        setProfileImg={(newImage) => setProfileImg(newImage)}
163 
      >
 - 
 
164 
        <Modal.Header closeButton>
 61 
        imageProfileCover={imageProfileCover}
165 
          <Modal.Title>Portada</Modal.Title>
 62 
        handleModalOpen={handleModalOpen}
166 
        </Modal.Header>
 - 
 
167 
        <form
 - 
 
168 
          encType="multipart/form-data"
 63 
        profileType={profileType}
169 
          onSubmit={handleSubmit(onSubmitHandler)}
 - 
 
170 
        >
 64 
      />
171 
          <Modal.Body>
 - 
 
172 
            {dropZoneRender()}
 - 
 
173 
            {errors.image && (
 - 
 
174 
              <FormErrorFeedback>{errors.image.message}</FormErrorFeedback>
 - 
 
175 
            )}
 - 
 
176 
          </Modal.Body>
 - 
 
177 
          <Modal.Footer>
 - 
 
178 
            <Button type="submit">Enviar</Button>
 - 
 
179 
            <Button variant="danger" onClick={handleModalOpen}>
 - 
 
180 
              Cancelar
 - 
 
181 
            </Button>
 - 
 
182 
          </Modal.Footer>
 - 
 
183 
        </form>
 - 
 
184 
        {loading && (
 - 
 
185 
          <StyledSpinnerContainer>
 - 
 
186 
            <Spinner />
 - 
 
187 
          </StyledSpinnerContainer>
 - 
 
188 
        )}
 - 
 
189 
      </Modal>
 65 
    </>
190 
    </React.Fragment>
 - 
 
191 
  );
 66 
  );
192 
};
 67 
};
Línea 193... Línea 68...
193 
 
 68