Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2290 | Rev 2296 | 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 (
2295 stevensc 145 
    <>
2281 stevensc 146 
      <div className={styles.profile_info}>
2288 stevensc 147 
        <div className={styles.profile_info_header}>
2287 stevensc 148 
          {
149 
            !!image && (
2288 stevensc 150 
              <div className={styles.profile_info_header_imgContainer}>
2287 stevensc 151 
                <img src={image} className="object-fit-contain" style={{ borderRadius: 0 }} alt="" />
152 
              </div>
153 
            )
154 
          }
2289 stevensc 155 
          <div className={image ? 'col-md-8 d-flex justify-content-start align-items-center' : 'col-md-12 ' + ' col-sm-12 col-12'}>
2287 stevensc 156 
            <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center" + ' w-100'}>
157 
              {name}
158 
            </h3>
2281 stevensc 159 
            {
2287 stevensc 160 
              status
161 
              &&
2288 stevensc 162 
              <h4 className="col-sm-12 d-flex justify-content-center align-items-center">
163 
                {status}
164 
              </h4>
2281 stevensc 165 
            }
2286 stevensc 166 
            {
2288 stevensc 167 
              isTopData
168 
              &&
169 
              <>
170 
                <div className="col-6 list-style-none">
171 
                  {
172 
                    link_view
173 
                    &&
174 
                    <li>
175 
                      <a
176 
                        href={link_view}
177 
                        data-link={link_view}
178 
                        className="btn btn-secondary ellipsis"
179 
                      >
180 
                        Ver perfil
181 
                      </a>
182 
                    </li>
183 
                  }
184 
                </div>
185 
                <div className="col-6 list-style-none">
186 
                  {
187 
                    link_inmail
188 
                    &&
189 
                    <li>
190 
                      <a
191 
                        href={link_inmail}
192 
                        data-link={link_inmail}
193 
                        className="btn btn-primary"
194 
                      >
195 
                        Mensaje
196 
                      </a>
197 
                    </li>
198 
                  }
199 
                </div>
200 
              </>
2286 stevensc 201 
            }
2287 stevensc 202 
          </div>
203 
        </div>
2290 stevensc 204 
        <hr />
2287 stevensc 205 
        <ul>
206 
          {
207 
            link_view && !isTopData && (
208 
              <li>
209 
                <a
210 
                  href={link_view}
211 
                  data-link={link_view}
212 
                  title=""
213 
                  className="btn btn-secondary"
214 
                >
215 
                  Ver perfil
216 
                </a>
217 
              </li>
218 
            )
219 
          }
220 
          {
221 
            link_edit && (
222 
              <li>
223 
                <a
224 
                  href={link_edit}
225 
                  data-link={link_edit}
226 
                  title=""
227 
                  className="btn btn-tertiary"
228 
                >
229 
                  Editar perfil
230 
                </a>
231 
              </li>
232 
            )
233 
          }
234 
          {
235 
            link_approve && (
236 
              <li>
237 
                <a
238 
                  href="#"
239 
                  className="btn btn-primary"
240 
                  onClick={(e) => {
241 
                    e.preventDefault();
242 
                    handleApproveConfirmationBox();
243 
                  }}
244 
                >
245 
                  Aprobar
246 
                </a>
247 
              </li>
248 
            )
249 
          }
250 
          {
251 
            link_reject && (
252 
              <li>
253 
                <a
254 
                  href="#"
255 
                  className="btn btn-primary"
256 
                  onClick={(e) => {
257 
                    e.preventDefault();
258 
                    handleRejectConfirmationBox();
259 
                  }}
260 
                >
261 
                  Rechazar
262 
                </a>
263 
              </li>
264 
            )
265 
          }
266 
          {
267 
            link_delete && (
268 
              <li>
269 
                <a
270 
                  href="#"
271 
                  className="btn btn-primary"
272 
                  onClick={(e) => {
273 
                    e.preventDefault();
274 
                    handleShowConfirmationBox();
275 
                  }}
276 
                >
277 
                  Borrar perfil
278 
                </a>
279 
              </li>
280 
            )
281 
          }
282 
          {
283 
            link_inmail && !isTopData && (
284 
              <li>
285 
                <a
286 
                  href={link_inmail}
287 
                  data-link={link_inmail}
288 
                  title=""
289 
                  className="btn btn-primary"
290 
                >
291 
                  Mensaje
292 
                </a>
293 
              </li>
294 
            )
295 
          }
296 
          {
297 
            link_admin && (
298 
              <li>
299 
                <a
300 
                  onClick={() => getManageUrl()}
301 
                  data-link={link_admin}
302 
                  title="Administrar empresa"
303 
                  className="btn btn-primary"
304 
                >
305 
                  Administrar
306 
                </a>
307 
              </li>
308 
            )
309 
          }
310 
          {
311 
            link_unfollow && (
312 
              <li>
313 
                <a
314 
                  onClick={() => handleUnfollow(link_unfollow)}
315 
                  data-link={link_unfollow}
316 
                  title="Administrar empresa"
317 
                  className="btn btn-primary"
318 
                >
319 
                  Dejar de seguir
320 
                </a>
321 
              </li>
322 
            )
323 
          }
2286 stevensc 324 
 
2287 stevensc 325 
          {
326 
            link_block && (
327 
              <li>
328 
                <a
329 
                  href="#"
330 
                  className="btn btn-tertiary"
331 
                  onClick={(e) => {
332 
                    e.preventDefault();
333 
                    handleBlockConfirmationBox();
334 
                  }}
335 
                >
336 
                  Bloquear
337 
                </a>
338 
              </li>
339 
            )
340 
          }
341 
          {
342 
            link_unblock && (
343 
              <li>
344 
                <a
345 
                  href="#"
346 
                  className="btn btn-tertiary"
347 
                  onClick={(e) => {
348 
                    e.preventDefault();
349 
                    handleUnblockConfirmationBox();
350 
                  }}
351 
                >
352 
                  Desbloquear
353 
                </a>
354 
              </li>
355 
            )
356 
          }
357 
          {
358 
            link_request && (
359 
              <li>
360 
                <a
361 
                  href="#"
362 
                  className="btn btn-tertiary"
363 
                  onClick={(e) => {
364 
                    e.preventDefault();
365 
                    handleRequestConfirmationBox();
366 
                  }}
367 
                >
368 
                  Conectar
369 
                </a>
370 
              </li>
371 
            )
372 
          }
373 
          {
374 
            link_cancel && (
375 
              <li>
376 
                <a
377 
                  href="#"
378 
                  className="btn btn-secondary"
379 
                  onClick={(e) => {
380 
                    e.preventDefault();
381 
                    handleCancelConfirmationBox();
382 
                  }}
383 
                >
384 
                  Cancelar
385 
                </a>
386 
              </li>
387 
            )
388 
          }
389 
          {
390 
            link_leave && (
391 
              <li>
392 
                <a
393 
                  href="#"
394 
                  className="btn btn-secondary"
395 
                  onClick={(e) => {
396 
                    e.preventDefault();
397 
                    handleLeaveConfirmationBox();
398 
                  }}
399 
                >
400 
                  Abandonar
401 
                </a>
402 
              </li>
403 
            )
404 
          }
405 
        </ul>
2285 stevensc 406 
      </div>
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 
      {
441 
        link_approve && (
442 
          <div style={{ position: "relative" }}>
443 
            <ConfirmationBox
444 
              show={showApproveConfirmationBox}
445 
              onClose={() => handleApproveConfirmationBox(false)}
446 
              onAccept={() => handleCancelApply(link_approve)}
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 
      }
2295 stevensc 502 
    </>
1587 steven 503 
  );
504 
};
505 
 
506 
export default Profile;