Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1587 steven 1 
import React, { useState } from "react";
2 
import { addNotification } from "../redux/notification/notification.actions";
3 
import ConfirmationBox from "../shared/confirmation-box/ConfirmationBox";
4 
import Spinner from "../shared/loading-spinner/Spinner";
5 
import { axios } from "../utils";
6 
import styled from 'styled-components'
2281 stevensc 7 
import styles from './Profile.module.scss'
1587 steven 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);
121 
    await axios.post(link_unfollow).then((response) => {
122 
      const resData = response.data;
123 
      if (resData.success) {
124 
        fetchCallback()
125 
      } else {
126 
        if (resError.constructor.name !== "Object") {
127 
          addNotification({
128 
            style: "danger",
129 
            msg: resData.data,
130 
          });
131 
        }
132 
      }
133 
    });
134 
    setLoading(false);
135 
  };
136 
 
1587 steven 137 
  const getManageUrl = async () => {
138 
    try {
139 
      const res = await axios.get(link_admin)
2281 stevensc 140 
      if (res.data.success) {
1587 steven 141 
        window.open(res.data.data, '_backend')
142 
      }
143 
    } catch (error) {
144 
      console.log('>>: error > ', error)
145 
    }
146 
  }
147 
 
148 
  return (
2296 stevensc 149 
    <div className={styles.profile_info}>
150 
      <div className={styles.profile_info_header}>
151 
        {
152 
          !!image && (
153 
            <div className={styles.profile_info_header_imgContainer}>
2297 stevensc 154 
              <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
2296 stevensc 155 
            </div>
156 
          )
157 
        }
3068 stevensc 158 
        <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 159 
          <h3 className={status ? '' : "w-100 text-left" + ' w-100'}>
2296 stevensc 160 
            {name}
161 
          </h3>
2386 stevensc 162 
          {
2784 stevensc 163 
            isTopData
164 
            &&
2386 stevensc 165 
            <ul>
166 
              {
167 
                link_view
168 
                &&
169 
                <li>
170 
                  <a
171 
                    href={link_view}
172 
                    data-link={link_view}
173 
                    className="btn btn-secondary ellipsis"
174 
                  >
175 
                    {btnAcceptTitle}
176 
                  </a>
177 
                </li>
178 
              }
179 
              {
180 
                link_inmail
181 
                &&
182 
                <li>
183 
                  <a
184 
                    href={link_inmail}
185 
                    data-link={link_inmail}
186 
                    className="btn btn-primary"
187 
                  >
188 
                    Mensaje
189 
                  </a>
190 
                </li>
191 
              }
192 
            </ul>
193 
          }
3064 stevensc 194 
        </div>
3068 stevensc 195 
        {
196 
          status
197 
          &&
198 
          <h4 className="col-sm-12 d-flex justify-content-center align-items-center">
199 
            {status}
200 
          </h4>
201 
        }
2385 stevensc 202 
      </div>
203 
      <hr />
204 
      <ul>
2316 stevensc 205 
        {
2784 stevensc 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 
        {
2296 stevensc 220 
          link_edit && (
221 
            <li>
222 
              <a
223 
                href={link_edit}
224 
                data-link={link_edit}
225 
                title=""
226 
                className="btn btn-tertiary"
227 
              >
2320 stevensc 228 
                {btnEditTitle}
2296 stevensc 229 
              </a>
230 
            </li>
231 
          )
232 
        }
233 
        {
2511 stevensc 234 
          link_approve
2316 stevensc 235 
          &&
236 
          <li>
237 
            <a
238 
              href="#"
2317 stevensc 239 
              className="btn btn-tertiary"
2316 stevensc 240 
              onClick={(e) => {
241 
                e.preventDefault();
2784 stevensc 242 
                handleApproveConfirmationBox();
2316 stevensc 243 
              }}
244 
            >
2510 stevensc 245 
              Aprobar
2316 stevensc 246 
            </a>
247 
          </li>
2296 stevensc 248 
        }
249 
        {
3046 stevensc 250 
          link_accept
251 
          &&
252 
          <li>
253 
            <a
254 
              href="#"
255 
              className="btn btn-tertiary"
256 
              onClick={(e) => {
257 
                e.preventDefault();
258 
                handleApproveConfirmationBox();
259 
              }}
260 
            >
261 
              Aceptar
262 
            </a>
263 
          </li>
264 
        }
265 
        {
2320 stevensc 266 
          link_reject &&
267 
          <li>
268 
            <a
269 
              href="#"
270 
              className="btn btn-primary"
271 
              onClick={(e) => {
272 
                e.preventDefault();
273 
                handleRejectConfirmationBox();
274 
              }}
275 
            >
276 
              Rechazar
277 
            </a>
278 
          </li>
2296 stevensc 279 
        }
280 
        {
2320 stevensc 281 
          link_delete &&
282 
          <li>
283 
            <a
284 
              href="#"
285 
              className="btn btn-primary"
286 
              onClick={(e) => {
287 
                e.preventDefault();
288 
                handleShowConfirmationBox();
289 
              }}
290 
            >
291 
              {btnCancelTitle}
292 
            </a>
293 
          </li>
2296 stevensc 294 
        }
295 
        {
2518 stevensc 296 
          link_inmail && !isTopData
297 
          &&
298 
          <li>
299 
            <a
300 
              href={link_inmail}
301 
              data-link={link_inmail}
302 
              title=""
303 
              className="btn btn-primary"
304 
            >
305 
              Mensaje
306 
            </a>
307 
          </li>
308 
        }
309 
        {
2320 stevensc 310 
          link_admin &&
311 
          <li>
312 
            <a
313 
              onClick={() => getManageUrl()}
314 
              data-link={link_admin}
315 
              title="Administrar empresa"
316 
              className="btn btn-primary"
317 
            >
318 
              Administrar
319 
            </a>
320 
          </li>
2296 stevensc 321 
        }
322 
        {
2320 stevensc 323 
          link_unfollow
324 
          &&
325 
          <li>
326 
            <a
327 
              onClick={() => handleUnfollow(link_unfollow)}
328 
              data-link={link_unfollow}
329 
              title="Administrar empresa"
330 
              className="btn btn-primary"
331 
            >
332 
              Dejar de seguir
333 
            </a>
334 
          </li>
2296 stevensc 335 
        }
2519 stevensc 336 
 
2296 stevensc 337 
        {
2519 stevensc 338 
          link_block &&
339 
          <li>
340 
            <a
341 
              href="#"
342 
              className="btn btn-primary"
343 
              onClick={(e) => {
344 
                e.preventDefault();
345 
                handleBlockConfirmationBox();
346 
              }}
347 
            >
348 
              Bloquear
349 
            </a>
350 
          </li>
351 
        }
352 
        {
2296 stevensc 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 
        {
2320 stevensc 369 
          link_request
370 
          &&
371 
          <li>
372 
            <a
373 
              href="#"
2410 stevensc 374 
              className="btn btn-tertiary"
2320 stevensc 375 
              onClick={(e) => {
376 
                e.preventDefault();
377 
                handleRequestConfirmationBox();
378 
              }}
379 
            >
380 
              Conectar
381 
            </a>
382 
          </li>
2296 stevensc 383 
        }
384 
        {
2320 stevensc 385 
          link_cancel
386 
          &&
387 
          <li>
388 
            <a
389 
              href="#"
2393 stevensc 390 
              className="btn btn-primary"
2320 stevensc 391 
              onClick={(e) => {
392 
                e.preventDefault();
393 
                handleCancelConfirmationBox();
394 
              }}
395 
            >
2507 stevensc 396 
              Cancelar
2320 stevensc 397 
            </a>
398 
          </li>
2296 stevensc 399 
        }
400 
        {
2320 stevensc 401 
          link_leave &&
402 
          <li>
403 
            <a
404 
              href="#"
405 
              className="btn btn-tertiary"
406 
              onClick={(e) => {
407 
                e.preventDefault();
408 
                handleLeaveConfirmationBox();
409 
              }}
410 
            >
411 
              Abandonar
412 
            </a>
413 
          </li>
2296 stevensc 414 
        }
415 
      </ul>
2285 stevensc 416 
      {
2320 stevensc 417 
        link_delete &&
418 
        <div style={{ position: "relative" }}>
419 
          <ConfirmationBox
420 
            show={showConfirmationBox}
421 
            onClose={() => handleShowConfirmationBox(false)}
422 
            onAccept={() => handleCancelApply(link_delete)}
423 
          />
424 
        </div>
2285 stevensc 425 
      }
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 
      {
2314 stevensc 449 
        link_accept && (
2285 stevensc 450 
          <div style={{ position: "relative" }}>
451 
            <ConfirmationBox
452 
              show={showApproveConfirmationBox}
453 
              onClose={() => handleApproveConfirmationBox(false)}
2314 stevensc 454 
              onAccept={() => handleCancelApply(link_accept)}
2285 stevensc 455 
            />
456 
          </div>
457 
        )
458 
      }
459 
      {
2582 stevensc 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 
      {
2285 stevensc 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 
        loading && (
516 
          <StyledSpinnerContainer>
517 
            <Spinner />
518 
          </StyledSpinnerContainer>
519 
        )
520 
      }
2296 stevensc 521 
    </div>
1587 steven 522 
  );
523 
};
524 
 
525 
export default Profile;