Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1587 | Rev 1592 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1587 steven 1 
import React, { useState } from "react";
2 
import { addNotification } from "../redux/notification/notification.actions";
3 
import ConfirmationBox from "../shared/confirmation-box/ConfirmationBox";
4 
import Spinner from "../shared/loading-spinner/Spinner";
5 
import { axios } from "../utils";
6 
import styled from 'styled-components'
7 
 
8 
const StyledSpinnerContainer = styled.div`
9 
  position: absolute;
10 
  left: 0;
11 
  top: 0;
12 
  width: 100%;
13 
  height: 100%;
14 
  background: rgba(255, 255, 255, 0.4);
15 
  display: flex;
16 
  justify-content: center;
17 
  align-items: center;
18 
  z-index: 300;
19 
`;
20 
const Profile = (props) => {
21 
  // props destructuring
22 
  const {
23 
    image,
24 
    name,
25 
    status,
26 
    link_view,
27 
    link_edit,
28 
    link_delete,
29 
    link_cancel,
30 
    link_block,
31 
    link_reject,
32 
    link_approve,
33 
    link_inmail,
34 
    link_request,
35 
    link_unblock,
1588 steven 36 
    link_unfollow,
1587 steven 37 
    link_admin,
38 
    fetchCallback
39 
  } = props;
40 
 
41 
  // states
42 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false);
43 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false);
44 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false);
45 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false);
46 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false);
47 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false);
48 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false);
49 
 
50 
  const [loading, setLoading] = useState(false)
51 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
52 
    setShowConfirmationBox(show);
53 
  };
54 
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
55 
    setShowCancelConfirmationBox(show);
56 
  };
57 
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
58 
    setShowBlockConfirmationBox(show);
59 
  };
60 
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
61 
    setShowRejectConfirmationBox(show);
62 
  };
63 
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
64 
    setShowApproveConfirmationBox(show);
65 
  };
66 
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
67 
    setShowRequestConfirmationBox(show);
68 
  };
69 
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
70 
    setShowUnblockConfirmationBox(show);
71 
  };
72 
 
73 
  const handleCancelApply = (url = link_delete) => {
74 
    setLoading(true);
75 
    axios
76 
      .post(url)
77 
      .then((response) => {
78 
        const resData = response.data;
79 
         (resData);
80 
        if (resData.success) {
81 
          const msg = resData.data;
82 
          addNotification({
83 
            style: "success",
84 
            msg: msg,
85 
          });
86 
          if(fetchCallback)
87 
            fetchCallback();
88 
        } else {
89 
          const errorMsg =
90 
            typeof resData.data === "string"
91 
              ? resData.data
92 
              : "Ha ocurrido un error, Por favor intente más tarde";
93 
          addNotification({
94 
            style: "danger",
95 
            msg: errorMsg,
96 
          });
97 
          setLoading(false);
98 
        }
99 
      })
100 
      .catch((error) => {
101 
        console.log('>>: error > ', error)
102 
      })
103 
      .finally(() => {
104 
        setLoading(false);
105 
      });
106 
  };
107 
 
1588 steven 108 
  const handleUnfollow = async (link_unfollow) => {
109 
    setLoading(true);
110 
    await axios.post(link_unfollow).then((response) => {
111 
      const resData = response.data;
112 
      if (resData.success) {
113 
        fetchCallback()
114 
      } else {
115 
        if (resError.constructor.name !== "Object") {
116 
          addNotification({
117 
            style: "danger",
118 
            msg: resData.data,
119 
          });
120 
        }
121 
      }
122 
    });
123 
    setLoading(false);
124 
  };
125 
 
1587 steven 126 
  const getManageUrl = async () => {
127 
    try {
128 
      const res = await axios.get(link_admin)
129 
      if(res.data.success){
130 
        window.open(res.data.data, '_backend')
131 
      }
132 
    } catch (error) {
133 
      console.log('>>: error > ', error)
134 
    }
135 
  }
136 
 
137 
  return (
138 
    <div className="col-md-3 col-sm-6 col-12">
139 
      <div className="company_profile_info border-radius border-gray">
140 
        <div className="company-up-info border-radius">
141 
          <div className="ph-15">
142 
            <div
143 
              className="row border-bottom-gray mb-2"
144 
            >
145 
              {
146 
                !!image && (
147 
                  <div className="col-md-4 col-sm-12 p-0">
148 
                    <img src={image} className="object-fit-contain" style={{borderRadius: 0}} alt="" />
149 
                  </div>
150 
                )
151 
              }
152 
              <div className={image ? 'col-md-8 d-flex justify-content-center align-items-center' : 'col-md-12 '+ ' col-sm-12 col-12'}>
153 
                <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center"}>
154 
                  {name}
155 
                  {
156 
                    status && (
157 
                      <>
158 
                        <br />
159 
                        <h4 className="col-sm-12 d-flex justify-content-center align-items-center">{status}</h4>
160 
                      </>
161 
                    )
162 
                  }
163 
                </h3>
164 
              </div>
165 
            </div>
166 
          </div>
167 
 
168 
          <ul>
169 
            {
170 
              link_view && (
171 
                <li>
172 
                  <a
173 
                    href={link_view}
174 
                    data-link={link_view}
175 
                    title=""
176 
                    className="btn btn-primary"
177 
                  >
178 
                    Ver perfil
179 
                  </a>
180 
                </li>
181 
              )
182 
            }
183 
            {
184 
              link_edit && (
185 
                <li>
186 
                  <a
187 
                    href={link_edit}
188 
                    data-link={link_edit}
189 
                    title=""
190 
                    className="btn btn-secondary"
191 
                  >
192 
                    Editar perfil
193 
                  </a>
194 
                </li>
195 
              )
196 
            }
197 
            {
198 
              link_approve && (
199 
                <li>
200 
                  <a
201 
                    href="#"
202 
                    className="btn btn-tertiary"
203 
                    onClick={(e) => {
204 
                      e.preventDefault();
205 
                      handleApproveConfirmationBox();
206 
                    }}
207 
                  >
208 
                    Aprobar
209 
                  </a>
210 
                </li>
211 
              )
212 
            }
213 
            {
214 
              link_reject && (
215 
                <li>
216 
                  <a
217 
                    href="#"
218 
                    className="btn btn-tertiary"
219 
                    onClick={(e) => {
220 
                      e.preventDefault();
221 
                      handleRejectConfirmationBox();
222 
                    }}
223 
                  >
224 
                    Rechazar
225 
                  </a>
226 
                </li>
227 
              )
228 
            }
229 
            {
230 
              link_delete && (
231 
                <li>
232 
                  <a
233 
                    href="#"
234 
                    className="btn btn-tertiary"
235 
                    onClick={(e) => {
236 
                      e.preventDefault();
237 
                      handleShowConfirmationBox();
238 
                    }}
239 
                  >
240 
                    Borrar perfil
241 
                  </a>
242 
                </li>
243 
              )
244 
            }
245 
            {
246 
              link_inmail && (
247 
                <li>
248 
                  <a
249 
                    href={link_inmail}
250 
                    data-link={link_inmail}
251 
                    title=""
252 
                    className="btn btn-tertiary"
253 
                  >
254 
                    Mensaje
255 
                  </a>
256 
                </li>
257 
              )
258 
            }
259 
            {
260 
              link_admin && (
261 
                <li>
262 
                  <a
263 
                    onClick={() => getManageUrl()}
264 
                    data-link={link_admin}
265 
                    title="Administrar empresa"
266 
                    className="btn btn-tertiary"
267 
                  >
268 
                    Administrar
269 
                  </a>
270 
                </li>
271 
              )
272 
            }
1588 steven 273 
            {
274 
              link_unfollow && (
275 
                <li>
276 
                  <a
277 
                    onClick={() => handleUnfollow(link_unfollow)}
278 
                    data-link={link_unfollow}
279 
                    title="Administrar empresa"
280 
                    className="btn btn-tertiary"
281 
                  >
282 
                    Dejar de seguir
283 
                  </a>
284 
                </li>
285 
              )
286 
            }
1587 steven 287 
 
288 
            {
289 
              link_block && (
290 
                <li>
291 
                  <a
292 
                    href="#"
293 
                    className="btn btn-secondary"
294 
                    onClick={(e) => {
295 
                      e.preventDefault();
296 
                      handleBlockConfirmationBox();
297 
                    }}
298 
                  >
299 
                    Bloquear
300 
                  </a>
301 
                </li>
302 
              )
303 
            }
304 
            {
305 
              link_unblock && (
306 
                <li>
307 
                  <a
308 
                    href="#"
309 
                    className="btn btn-secondary"
310 
                    onClick={(e) => {
311 
                      e.preventDefault();
312 
                      handleUnblockConfirmationBox();
313 
                    }}
314 
                  >
315 
                    Desbloquear
316 
                  </a>
317 
                </li>
318 
              )
319 
            }
320 
            {
321 
              link_request && (
322 
                <li>
323 
                  <a
324 
                    href="#"
325 
                    className="btn btn-secondary"
326 
                    onClick={(e) => {
327 
                      e.preventDefault();
328 
                      handleRequestConfirmationBox();
329 
                    }}
330 
                  >
331 
                    Conectar
332 
                  </a>
333 
                </li>
334 
              )
335 
            }
336 
            {
337 
              link_cancel && (
338 
                <li>
339 
                  <a
340 
                    href="#"
341 
                    className="btn btn-primary"
342 
                    onClick={(e) => {
343 
                      e.preventDefault();
344 
                      handleCancelConfirmationBox();
345 
                    }}
346 
                  >
347 
                    Cancelar
348 
                  </a>
349 
                </li>
350 
              )
351 
            }
352 
 
353 
          </ul>
354 
        </div>
355 
        {link_delete && (
356 
          <div style={{ position: "relative" }}>
357 
            <ConfirmationBox
358 
              show={showConfirmationBox}
359 
              onClose={() => handleShowConfirmationBox(false)}
360 
              onAccept={() => handleCancelApply(link_delete)}
361 
            />
362 
          </div>
363 
        )}
364 
        {link_cancel && (
365 
          <div style={{ position: "relative" }}>
366 
            <ConfirmationBox
367 
              show={showCancelConfirmationBox}
368 
              onClose={() => handleCancelConfirmationBox(false)}
369 
              onAccept={() => handleCancelApply(link_cancel)}
370 
            />
371 
          </div>
372 
        )}
373 
        {link_block && (
374 
          <div style={{ position: "relative" }}>
375 
            <ConfirmationBox
376 
              show={showBlockConfirmationBox}
377 
              onClose={() => handleBlockConfirmationBox(false)}
378 
              onAccept={() => handleCancelApply(link_block)}
379 
            />
380 
          </div>
381 
        )}
382 
        {link_approve && (
383 
          <div style={{ position: "relative" }}>
384 
            <ConfirmationBox
385 
              show={showApproveConfirmationBox}
386 
              onClose={() => handleApproveConfirmationBox(false)}
387 
              onAccept={() => handleCancelApply(link_approve)}
388 
            />
389 
          </div>
390 
        )}
391 
        {link_reject && (
392 
          <div style={{ position: "relative" }}>
393 
            <ConfirmationBox
394 
              show={showRejectConfirmationBox}
395 
              onClose={() => handleRejectConfirmationBox(false)}
396 
              onAccept={() => handleCancelApply(link_reject)}
397 
            />
398 
          </div>
399 
        )}
400 
        {link_request && (
401 
          <div style={{ position: "relative" }}>
402 
            <ConfirmationBox
403 
              show={showRequestConfirmationBox}
404 
              onClose={() => handleRequestConfirmationBox(false)}
405 
              onAccept={() => handleCancelApply(link_request)}
406 
            />
407 
          </div>
408 
        )}
409 
        {link_unblock && (
410 
          <div style={{ position: "relative" }}>
411 
            <ConfirmationBox
412 
              show={showUnblockConfirmationBox}
413 
              onClose={() => handleUnblockConfirmationBox(false)}
414 
              onAccept={() => handleCancelApply(link_unblock)}
415 
            />
416 
          </div>
417 
        )}
418 
        {loading && (
419 
          <StyledSpinnerContainer>
420 
            <Spinner />
421 
          </StyledSpinnerContainer>
422 
        )}
423 
      </div>
424 
    </div>
425 
  );
426 
};
427 
 
428 
export default Profile;