Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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