Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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