Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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