Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2314 | Rev 2316 | 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,
1592 steven 38 
    link_leave,
1587 steven 39 
    link_admin,
2113 steven 40 
    fetchCallback,
2306 stevensc 41 
    isTopData = false,
42 
    btnAcceptTitle = 'Ver perfil',
2308 stevensc 43 
    btnCancelTitle = 'Quitar aplicación'
1587 steven 44 
  } = props;
45 
 
46 
  // states
47 
  const [showConfirmationBox, setShowConfirmationBox] = useState(false);
48 
  const [showCancelConfirmationBox, setShowCancelConfirmationBox] = useState(false);
49 
  const [showBlockConfirmationBox, setShowBlockConfirmationBox] = useState(false);
50 
  const [showRejectConfirmationBox, setShowRejectConfirmationBox] = useState(false);
51 
  const [showApproveConfirmationBox, setShowApproveConfirmationBox] = useState(false);
52 
  const [showRequestConfirmationBox, setShowRequestConfirmationBox] = useState(false);
53 
  const [showUnblockConfirmationBox, setShowUnblockConfirmationBox] = useState(false);
1592 steven 54 
  const [showLeaveConfirmationBox, setShowLeaveConfirmationBox] = useState(false);
1587 steven 55 
 
56 
  const [loading, setLoading] = useState(false)
57 
  const handleShowConfirmationBox = (show = !showConfirmationBox) => {
58 
    setShowConfirmationBox(show);
59 
  };
60 
  const handleCancelConfirmationBox = (show = !showConfirmationBox) => {
61 
    setShowCancelConfirmationBox(show);
62 
  };
63 
  const handleBlockConfirmationBox = (show = !showConfirmationBox) => {
64 
    setShowBlockConfirmationBox(show);
65 
  };
66 
  const handleRejectConfirmationBox = (show = !showConfirmationBox) => {
67 
    setShowRejectConfirmationBox(show);
68 
  };
69 
  const handleApproveConfirmationBox = (show = !showConfirmationBox) => {
70 
    setShowApproveConfirmationBox(show);
71 
  };
72 
  const handleRequestConfirmationBox = (show = !showConfirmationBox) => {
73 
    setShowRequestConfirmationBox(show);
74 
  };
75 
  const handleUnblockConfirmationBox = (show = !showConfirmationBox) => {
76 
    setShowUnblockConfirmationBox(show);
77 
  };
1592 steven 78 
  const handleLeaveConfirmationBox = (show = !showConfirmationBox) => {
79 
    setShowLeaveConfirmationBox(show);
80 
  };
1587 steven 81 
 
82 
  const handleCancelApply = (url = link_delete) => {
83 
    setLoading(true);
84 
    axios
85 
      .post(url)
86 
      .then((response) => {
87 
        const resData = response.data;
2281 stevensc 88 
        (resData);
1587 steven 89 
        if (resData.success) {
90 
          const msg = resData.data;
91 
          addNotification({
92 
            style: "success",
93 
            msg: msg,
94 
          });
2281 stevensc 95 
          if (fetchCallback)
1587 steven 96 
            fetchCallback();
97 
        } else {
98 
          const errorMsg =
99 
            typeof resData.data === "string"
100 
              ? resData.data
101 
              : "Ha ocurrido un error, Por favor intente más tarde";
102 
          addNotification({
103 
            style: "danger",
104 
            msg: errorMsg,
105 
          });
106 
          setLoading(false);
107 
        }
108 
      })
109 
      .catch((error) => {
110 
        console.log('>>: error > ', error)
111 
      })
112 
      .finally(() => {
113 
        setLoading(false);
114 
      });
115 
  };
116 
 
1588 steven 117 
  const handleUnfollow = async (link_unfollow) => {
118 
    setLoading(true);
119 
    await axios.post(link_unfollow).then((response) => {
120 
      const resData = response.data;
121 
      if (resData.success) {
122 
        fetchCallback()
123 
      } else {
124 
        if (resError.constructor.name !== "Object") {
125 
          addNotification({
126 
            style: "danger",
127 
            msg: resData.data,
128 
          });
129 
        }
130 
      }
131 
    });
132 
    setLoading(false);
133 
  };
134 
 
1587 steven 135 
  const getManageUrl = async () => {
136 
    try {
137 
      const res = await axios.get(link_admin)
2281 stevensc 138 
      if (res.data.success) {
1587 steven 139 
        window.open(res.data.data, '_backend')
140 
      }
141 
    } catch (error) {
142 
      console.log('>>: error > ', error)
143 
    }
144 
  }
145 
 
146 
  return (
2296 stevensc 147 
    <div className={styles.profile_info}>
148 
      <div className={styles.profile_info_header}>
149 
        {
150 
          !!image && (
151 
            <div className={styles.profile_info_header_imgContainer}>
2297 stevensc 152 
              <img src={image} className="object-fit-contain" style={{ maxHeight: '100px' }} alt="group image" />
2296 stevensc 153 
            </div>
154 
          )
155 
        }
156 
        <div className={image ? 'col-md-8 d-flex justify-content-start align-items-center' : 'col-md-12 ' + ' col-sm-12 col-12'}>
157 
          <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center" + ' w-100'}>
158 
            {name}
159 
          </h3>
2287 stevensc 160 
          {
2296 stevensc 161 
            isTopData
162 
            &&
163 
            <>
164 
              <div className="col-6 list-style-none">
165 
                {
166 
                  link_view
167 
                  &&
168 
                  <li>
169 
                    <a
170 
                      href={link_view}
171 
                      data-link={link_view}
172 
                      className="btn btn-secondary ellipsis"
173 
                    >
2306 stevensc 174 
                      {btnAcceptTitle}
2296 stevensc 175 
                    </a>
176 
                  </li>
177 
                }
2287 stevensc 178 
              </div>
2296 stevensc 179 
              <div className="col-6 list-style-none">
180 
                {
181 
                  link_inmail
182 
                  &&
183 
                  <li>
184 
                    <a
185 
                      href={link_inmail}
186 
                      data-link={link_inmail}
187 
                      className="btn btn-primary"
188 
                    >
189 
                      Mensaje
190 
                    </a>
191 
                  </li>
192 
                }
193 
              </div>
194 
            </>
2287 stevensc 195 
          }
196 
        </div>
2297 stevensc 197 
        {
198 
          status
199 
          &&
200 
          <h4 className="col-sm-12 d-flex justify-content-center align-items-center">
201 
            {status}
202 
          </h4>
203 
        }
2296 stevensc 204 
      </div>
205 
      <hr />
206 
      <ul>
207 
        {
208 
          link_view && !isTopData && (
209 
            <li>
210 
              <a
211 
                href={link_view}
212 
                data-link={link_view}
213 
                title=""
214 
                className="btn btn-secondary"
215 
              >
2306 stevensc 216 
                {btnAcceptTitle}
2296 stevensc 217 
              </a>
218 
            </li>
219 
          )
220 
        }
221 
        {
222 
          link_edit && (
223 
            <li>
224 
              <a
225 
                href={link_edit}
226 
                data-link={link_edit}
227 
                title=""
228 
                className="btn btn-tertiary"
229 
              >
230 
                Editar perfil
231 
              </a>
232 
            </li>
233 
          )
234 
        }
235 
        {
2314 stevensc 236 
          link_accept && (
2296 stevensc 237 
            <li>
238 
              <a
239 
                href="#"
240 
                className="btn btn-primary"
241 
                onClick={(e) => {
242 
                  e.preventDefault();
243 
                  handleApproveConfirmationBox();
244 
                }}
245 
              >
246 
                Aprobar
247 
              </a>
248 
            </li>
249 
          )
250 
        }
251 
        {
252 
          link_reject && (
253 
            <li>
254 
              <a
255 
                href="#"
256 
                className="btn btn-primary"
257 
                onClick={(e) => {
258 
                  e.preventDefault();
259 
                  handleRejectConfirmationBox();
260 
                }}
261 
              >
262 
                Rechazar
263 
              </a>
264 
            </li>
265 
          )
266 
        }
267 
        {
268 
          link_delete && (
269 
            <li>
270 
              <a
271 
                href="#"
272 
                className="btn btn-primary"
273 
                onClick={(e) => {
274 
                  e.preventDefault();
275 
                  handleShowConfirmationBox();
276 
                }}
277 
              >
2306 stevensc 278 
                {btnCancelTitle}
2296 stevensc 279 
              </a>
280 
            </li>
281 
          )
282 
        }
283 
        {
284 
          link_inmail && !isTopData && (
285 
            <li>
286 
              <a
287 
                href={link_inmail}
288 
                data-link={link_inmail}
289 
                title=""
290 
                className="btn btn-primary"
291 
              >
292 
                Mensaje
293 
              </a>
294 
            </li>
295 
          )
296 
        }
297 
        {
298 
          link_admin && (
299 
            <li>
300 
              <a
301 
                onClick={() => getManageUrl()}
302 
                data-link={link_admin}
303 
                title="Administrar empresa"
304 
                className="btn btn-primary"
305 
              >
306 
                Administrar
307 
              </a>
308 
            </li>
309 
          )
310 
        }
311 
        {
312 
          link_unfollow && (
313 
            <li>
314 
              <a
315 
                onClick={() => handleUnfollow(link_unfollow)}
316 
                data-link={link_unfollow}
317 
                title="Administrar empresa"
318 
                className="btn btn-primary"
319 
              >
320 
                Dejar de seguir
321 
              </a>
322 
            </li>
323 
          )
324 
        }
2286 stevensc 325 
 
2296 stevensc 326 
        {
327 
          link_block && (
328 
            <li>
329 
              <a
330 
                href="#"
331 
                className="btn btn-tertiary"
332 
                onClick={(e) => {
333 
                  e.preventDefault();
334 
                  handleBlockConfirmationBox();
335 
                }}
336 
              >
337 
                Bloquear
338 
              </a>
339 
            </li>
340 
          )
341 
        }
342 
        {
343 
          link_unblock && (
344 
            <li>
345 
              <a
346 
                href="#"
347 
                className="btn btn-tertiary"
348 
                onClick={(e) => {
349 
                  e.preventDefault();
350 
                  handleUnblockConfirmationBox();
351 
                }}
352 
              >
353 
                Desbloquear
354 
              </a>
355 
            </li>
356 
          )
357 
        }
358 
        {
359 
          link_request && (
360 
            <li>
361 
              <a
362 
                href="#"
363 
                className="btn btn-tertiary"
364 
                onClick={(e) => {
365 
                  e.preventDefault();
366 
                  handleRequestConfirmationBox();
367 
                }}
368 
              >
369 
                Conectar
370 
              </a>
371 
            </li>
372 
          )
373 
        }
374 
        {
375 
          link_cancel && (
376 
            <li>
377 
              <a
378 
                href="#"
379 
                className="btn btn-secondary"
380 
                onClick={(e) => {
381 
                  e.preventDefault();
382 
                  handleCancelConfirmationBox();
383 
                }}
384 
              >
385 
                Cancelar
386 
              </a>
387 
            </li>
388 
          )
389 
        }
390 
        {
391 
          link_leave && (
392 
            <li>
393 
              <a
394 
                href="#"
395 
                className="btn btn-secondary"
396 
                onClick={(e) => {
397 
                  e.preventDefault();
398 
                  handleLeaveConfirmationBox();
399 
                }}
400 
              >
401 
                Abandonar
402 
              </a>
403 
            </li>
404 
          )
405 
        }
406 
      </ul>
2285 stevensc 407 
      {
408 
        link_delete && (
409 
          <div style={{ position: "relative" }}>
410 
            <ConfirmationBox
411 
              show={showConfirmationBox}
412 
              onClose={() => handleShowConfirmationBox(false)}
413 
              onAccept={() => handleCancelApply(link_delete)}
414 
            />
415 
          </div>
416 
        )
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 
      {
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 
      }
495 
      {
496 
        loading && (
497 
          <StyledSpinnerContainer>
498 
            <Spinner />
499 
          </StyledSpinnerContainer>
500 
        )
501 
      }
2296 stevensc 502 
    </div>
1587 steven 503 
  );
504 
};
505 
 
506 
export default Profile;