Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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