Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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