Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3635 | Rev 3814 | 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";
6 
import { axios } from "../utils";
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 
`;
21 
const Profile = (props) => {
22 
  // props destructuring
23 
  const {
24 
    image,
25 
    name,
3639 efrain 26 
	email,
27 
	network,
1587 steven 28 
    status,
29 
    link_view,
30 
    link_edit,
31 
    link_delete,
32 
    link_cancel,
33 
    link_block,
34 
    link_reject,
2315 stevensc 35 
    link_accept,
1587 steven 36 
    link_inmail,
37 
    link_request,
38 
    link_unblock,
1588 steven 39 
    link_unfollow,
2395 stevensc 40 
    link_approve,
1592 steven 41 
    link_leave,
1587 steven 42 
    link_admin,
3639 efrain 43 
	link_impersonate,
2113 steven 44 
    fetchCallback,
2306 stevensc 45 
    isTopData = false,
46 
    btnAcceptTitle = 'Ver perfil',
2320 stevensc 47 
    btnCancelTitle = 'Borrar perfil',
48 
    btnEditTitle = 'Editar perfil'
1587 steven 49 
  } = props;
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 
 
1587 steven 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);
1592 steven 68 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false);
1587 steven 69 
 
70 
  const [loading, setLoading] = useState(false)
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 
  };
1592 steven 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`}>
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>
3635 stevensc 158 
          {isTopData &&
3639 efrain 159 
		 {email &&
160 
          <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
161 
            {email}
162 
          </h4>
163 
			}
164 
			{network &&
165 
          <h4 className={`${status ? '' : "w-100 text-left"} ${isTopData ? 'mb-2' : ''} w-100`}>
166 
            {network}
167 
          </h4>
168 
			}
169 
          {
170 
            isTopData
171 
            &&
2386 stevensc 172 
            <ul>
3635 stevensc 173 
              {link_view &&
2386 stevensc 174 
                <li>
175 
                  <a
176 
                    href={link_view}
177 
                    data-link={link_view}
178 
                    className="btn btn-secondary ellipsis"
179 
                  >
180 
                    {btnAcceptTitle}
181 
                  </a>
182 
                </li>
183 
              }
3635 stevensc 184 
              {link_inmail &&
2386 stevensc 185 
                <li>
186 
                  <a
187 
                    href={link_inmail}
188 
                    data-link={link_inmail}
189 
                    className="btn btn-primary"
190 
                  >
191 
                    Mensaje
192 
                  </a>
193 
                </li>
194 
              }
195 
            </ul>
196 
          }
3064 stevensc 197 
        </div>
3520 stevensc 198 
        {status &&
3521 stevensc 199 
          <h4 className={`col-sm-12 d-flex justify-content-center align-items-center ${!image ? 'position-relative' : ''}`}>
3068 stevensc 200 
            {status}
201 
          </h4>
202 
        }
2385 stevensc 203 
      </div>
204 
      <hr />
205 
      <ul>
2316 stevensc 206 
        {
2784 stevensc 207 
          link_view && !isTopData && (
208 
            <li>
209 
              <a
210 
                href={link_view}
211 
                data-link={link_view}
212 
                title=""
213 
                className="btn btn-secondary"
214 
              >
215 
                {btnAcceptTitle}
216 
              </a>
217 
            </li>
218 
          )
219 
        }
220 
        {
2296 stevensc 221 
          link_edit && (
222 
            <li>
223 
              <a
224 
                href={link_edit}
225 
                data-link={link_edit}
226 
                title=""
227 
                className="btn btn-tertiary"
228 
              >
2320 stevensc 229 
                {btnEditTitle}
2296 stevensc 230 
              </a>
231 
            </li>
232 
          )
233 
        }
234 
        {
2511 stevensc 235 
          link_approve
2316 stevensc 236 
          &&
237 
          <li>
238 
            <a
239 
              href="#"
2317 stevensc 240 
              className="btn btn-tertiary"
2316 stevensc 241 
              onClick={(e) => {
242 
                e.preventDefault();
2784 stevensc 243 
                handleApproveConfirmationBox();
2316 stevensc 244 
              }}
245 
            >
2510 stevensc 246 
              Aprobar
2316 stevensc 247 
            </a>
248 
          </li>
2296 stevensc 249 
        }
250 
        {
3046 stevensc 251 
          link_accept
252 
          &&
253 
          <li>
254 
            <a
255 
              href="#"
256 
              className="btn btn-tertiary"
257 
              onClick={(e) => {
258 
                e.preventDefault();
259 
                handleApproveConfirmationBox();
260 
              }}
261 
            >
262 
              Aceptar
263 
            </a>
264 
          </li>
265 
        }
266 
        {
2320 stevensc 267 
          link_reject &&
268 
          <li>
269 
            <a
270 
              href="#"
271 
              className="btn btn-primary"
272 
              onClick={(e) => {
273 
                e.preventDefault();
274 
                handleRejectConfirmationBox();
275 
              }}
276 
            >
277 
              Rechazar
278 
            </a>
279 
          </li>
2296 stevensc 280 
        }
281 
        {
2320 stevensc 282 
          link_delete &&
283 
          <li>
284 
            <a
285 
              href="#"
286 
              className="btn btn-primary"
287 
              onClick={(e) => {
288 
                e.preventDefault();
289 
                handleShowConfirmationBox();
290 
              }}
291 
            >
292 
              {btnCancelTitle}
293 
            </a>
294 
          </li>
2296 stevensc 295 
        }
296 
        {
2518 stevensc 297 
          link_inmail && !isTopData
298 
          &&
299 
          <li>
300 
            <a
301 
              href={link_inmail}
302 
              data-link={link_inmail}
303 
              title=""
304 
              className="btn btn-primary"
305 
            >
306 
              Mensaje
307 
            </a>
308 
          </li>
309 
        }
310 
        {
2320 stevensc 311 
          link_admin &&
312 
          <li>
313 
            <a
314 
              onClick={() => getManageUrl()}
315 
              data-link={link_admin}
316 
              title="Administrar empresa"
317 
              className="btn btn-primary"
318 
            >
319 
              Administrar
320 
            </a>
321 
          </li>
2296 stevensc 322 
        }
323 
        {
2320 stevensc 324 
          link_unfollow
325 
          &&
326 
          <li>
327 
            <a
328 
              onClick={() => handleUnfollow(link_unfollow)}
329 
              data-link={link_unfollow}
330 
              title="Administrar empresa"
331 
              className="btn btn-primary"
332 
            >
333 
              Dejar de seguir
334 
            </a>
335 
          </li>
2296 stevensc 336 
        }
2519 stevensc 337 
 
2296 stevensc 338 
        {
2519 stevensc 339 
          link_block &&
340 
          <li>
341 
            <a
342 
              href="#"
343 
              className="btn btn-primary"
344 
              onClick={(e) => {
345 
                e.preventDefault();
346 
                handleBlockConfirmationBox();
347 
              }}
348 
            >
349 
              Bloquear
350 
            </a>
351 
          </li>
352 
        }
353 
        {
2296 stevensc 354 
          link_unblock && (
355 
            <li>
356 
              <a
357 
                href="#"
358 
                className="btn btn-tertiary"
359 
                onClick={(e) => {
360 
                  e.preventDefault();
361 
                  handleUnblockConfirmationBox();
362 
                }}
363 
              >
364 
                Desbloquear
365 
              </a>
366 
            </li>
367 
          )
368 
        }
369 
        {
2320 stevensc 370 
          link_request
371 
          &&
372 
          <li>
373 
            <a
374 
              href="#"
2410 stevensc 375 
              className="btn btn-tertiary"
2320 stevensc 376 
              onClick={(e) => {
377 
                e.preventDefault();
378 
                handleRequestConfirmationBox();
379 
              }}
380 
            >
381 
              Conectar
382 
            </a>
383 
          </li>
2296 stevensc 384 
        }
385 
        {
2320 stevensc 386 
          link_cancel
387 
          &&
388 
          <li>
389 
            <a
390 
              href="#"
2393 stevensc 391 
              className="btn btn-primary"
2320 stevensc 392 
              onClick={(e) => {
393 
                e.preventDefault();
394 
                handleCancelConfirmationBox();
395 
              }}
396 
            >
2507 stevensc 397 
              Cancelar
2320 stevensc 398 
            </a>
399 
          </li>
2296 stevensc 400 
        }
401 
        {
2320 stevensc 402 
          link_leave &&
403 
          <li>
404 
            <a
405 
              href="#"
406 
              className="btn btn-tertiary"
407 
              onClick={(e) => {
408 
                e.preventDefault();
409 
                handleLeaveConfirmationBox();
410 
              }}
411 
            >
412 
              Abandonar
413 
            </a>
414 
          </li>
2296 stevensc 415 
        }
416 
      </ul>
2285 stevensc 417 
      {
2320 stevensc 418 
        link_delete &&
419 
        <div style={{ position: "relative" }}>
420 
          <ConfirmationBox
421 
            show={showConfirmationBox}
422 
            onClose={() => handleShowConfirmationBox(false)}
423 
            onAccept={() => handleCancelApply(link_delete)}
424 
          />
425 
        </div>
2285 stevensc 426 
      }
427 
      {
428 
        link_cancel && (
429 
          <div style={{ position: "relative" }}>
430 
            <ConfirmationBox
431 
              show={showCancelConfirmationBox}
432 
              onClose={() => handleCancelConfirmationBox(false)}
433 
              onAccept={() => handleCancelApply(link_cancel)}
434 
            />
435 
          </div>
436 
        )
437 
      }
438 
      {
439 
        link_block && (
440 
          <div style={{ position: "relative" }}>
441 
            <ConfirmationBox
442 
              show={showBlockConfirmationBox}
443 
              onClose={() => handleBlockConfirmationBox(false)}
444 
              onAccept={() => handleCancelApply(link_block)}
445 
            />
446 
          </div>
447 
        )
448 
      }
449 
      {
2314 stevensc 450 
        link_accept && (
2285 stevensc 451 
          <div style={{ position: "relative" }}>
452 
            <ConfirmationBox
453 
              show={showApproveConfirmationBox}
454 
              onClose={() => handleApproveConfirmationBox(false)}
2314 stevensc 455 
              onAccept={() => handleCancelApply(link_accept)}
2285 stevensc 456 
            />
457 
          </div>
458 
        )
459 
      }
460 
      {
2582 stevensc 461 
        link_approve && (
462 
          <div style={{ position: "relative" }}>
463 
            <ConfirmationBox
464 
              show={showApproveConfirmationBox}
465 
              onClose={() => handleApproveConfirmationBox(false)}
466 
              onAccept={() => handleCancelApply(link_approve)}
467 
            />
468 
          </div>
469 
        )
470 
      }
471 
      {
2285 stevensc 472 
        link_reject && (
473 
          <div style={{ position: "relative" }}>
474 
            <ConfirmationBox
475 
              show={showRejectConfirmationBox}
476 
              onClose={() => handleRejectConfirmationBox(false)}
477 
              onAccept={() => handleCancelApply(link_reject)}
478 
            />
479 
          </div>
480 
        )
481 
      }
482 
      {
483 
        link_request && (
484 
          <div style={{ position: "relative" }}>
485 
            <ConfirmationBox
486 
              show={showRequestConfirmationBox}
487 
              onClose={() => handleRequestConfirmationBox(false)}
488 
              onAccept={() => handleCancelApply(link_request)}
489 
            />
490 
          </div>
491 
        )
492 
      }
493 
      {
494 
        link_unblock && (
495 
          <div style={{ position: "relative" }}>
496 
            <ConfirmationBox
497 
              show={showUnblockConfirmationBox}
498 
              onClose={() => handleUnblockConfirmationBox(false)}
499 
              onAccept={() => handleCancelApply(link_unblock)}
500 
            />
501 
          </div>
502 
        )
503 
      }
504 
      {
505 
        link_leave && (
506 
          <div style={{ position: "relative" }}>
507 
            <ConfirmationBox
508 
              show={showLeaveConfirmationBox}
509 
              onClose={() => handleLeaveConfirmationBox(false)}
510 
              onAccept={() => handleCancelApply(link_leave)}
511 
            />
512 
          </div>
513 
        )
514 
      }
3639 efrain 515 
        {
516 
          link_impersonate
517 
          &&
518 
          <li>
519 
            <a
520 
			 href="#" onClick={() => getImpersonateUrl(link_impersonate)} > Personificar </a>
521 
          </li>
522 
        }
3526 stevensc 523 
      {
524 
        loading &&
3522 stevensc 525 
        <StyledSpinnerContainer>
526 
          <Spinner />
527 
        </StyledSpinnerContainer>
2285 stevensc 528 
      }
3526 stevensc 529 
    </div >
1587 steven 530 
  );
531 
};
532 
 
533 
export default Profile;