Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

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