Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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