Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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