Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2285 | Rev 2287 | 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 (
2112 steven 145 
    <div className="col-md-4 col-sm-6 col-12">
2281 stevensc 146 
      <div className={styles.profile_info}>
147 
        <div className={!isTopData && "px-4"}>
148 
          <div className="row border-bottom-gray mb-2">
149 
            {
150 
              !!image && (
151 
                <div className="col-md-4 col-sm-12 p-0">
152 
                  <img src={image} className="object-fit-contain" style={{ borderRadius: 0 }} alt="" />
153 
                </div>
154 
              )
155 
            }
156 
            <div className={image ? 'col-md-8 d-flex justify-content-center align-items-center' : 'col-md-12 ' + ' col-sm-12 col-12'}>
2285 stevensc 157 
              <h3 className={status ? '' : "col-sm-12 d-flex justify-content-center align-items-center" + ' w-100'}>
158 
                {name}
159 
              </h3>
160 
              {
161 
                status
162 
                &&
163 
                <h4 className="col-sm-12 d-flex justify-content-center align-items-center">{status}</h4>
164 
              }
165 
              {
166 
                isTopData && (
167 
                  <>
168 
                    <div className="col-6 list-style-none">
169 
                      {
170 
                        link_view && (
171 
                          <li>
172 
                            <a
173 
                              href={link_view}
174 
                              data-link={link_view}
175 
                              title=""
176 
                              className="btn btn-secondary ellipsis"
177 
                            >
178 
                              Ver perfil
179 
                            </a>
180 
                          </li>
181 
                        )
182 
                      }
183 
                    </div>
184 
                    <div className="col-6 list-style-none">
185 
                      {
186 
                        link_inmail && (
187 
                          <li>
188 
                            <a
189 
                              href={link_inmail}
190 
                              data-link={link_inmail}
191 
                              title=""
192 
                              className="btn btn-primary"
193 
                            >
194 
                              Mensaje
195 
                            </a>
196 
                          </li>
197 
                        )
198 
                      }
199 
                    </div>
200 
                  </>
201 
                )
202 
              }
1587 steven 203 
            </div>
204 
          </div>
2286 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 
            }
324 
 
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>
2281 stevensc 406 
        </div>
2285 stevensc 407 
      </div>
408 
      {
409 
        link_delete && (
410 
          <div style={{ position: "relative" }}>
411 
            <ConfirmationBox
412 
              show={showConfirmationBox}
413 
              onClose={() => handleShowConfirmationBox(false)}
414 
              onAccept={() => handleCancelApply(link_delete)}
415 
            />
416 
          </div>
417 
        )
418 
      }
419 
      {
420 
        link_cancel && (
421 
          <div style={{ position: "relative" }}>
422 
            <ConfirmationBox
423 
              show={showCancelConfirmationBox}
424 
              onClose={() => handleCancelConfirmationBox(false)}
425 
              onAccept={() => handleCancelApply(link_cancel)}
426 
            />
427 
          </div>
428 
        )
429 
      }
430 
      {
431 
        link_block && (
432 
          <div style={{ position: "relative" }}>
433 
            <ConfirmationBox
434 
              show={showBlockConfirmationBox}
435 
              onClose={() => handleBlockConfirmationBox(false)}
436 
              onAccept={() => handleCancelApply(link_block)}
437 
            />
438 
          </div>
439 
        )
440 
      }
441 
      {
442 
        link_approve && (
443 
          <div style={{ position: "relative" }}>
444 
            <ConfirmationBox
445 
              show={showApproveConfirmationBox}
446 
              onClose={() => handleApproveConfirmationBox(false)}
447 
              onAccept={() => handleCancelApply(link_approve)}
448 
            />
449 
          </div>
450 
        )
451 
      }
452 
      {
453 
        link_reject && (
454 
          <div style={{ position: "relative" }}>
455 
            <ConfirmationBox
456 
              show={showRejectConfirmationBox}
457 
              onClose={() => handleRejectConfirmationBox(false)}
458 
              onAccept={() => handleCancelApply(link_reject)}
459 
            />
460 
          </div>
461 
        )
462 
      }
463 
      {
464 
        link_request && (
465 
          <div style={{ position: "relative" }}>
466 
            <ConfirmationBox
467 
              show={showRequestConfirmationBox}
468 
              onClose={() => handleRequestConfirmationBox(false)}
469 
              onAccept={() => handleCancelApply(link_request)}
470 
            />
471 
          </div>
472 
        )
473 
      }
474 
      {
475 
        link_unblock && (
476 
          <div style={{ position: "relative" }}>
477 
            <ConfirmationBox
478 
              show={showUnblockConfirmationBox}
479 
              onClose={() => handleUnblockConfirmationBox(false)}
480 
              onAccept={() => handleCancelApply(link_unblock)}
481 
            />
482 
          </div>
483 
        )
484 
      }
485 
      {
486 
        link_leave && (
487 
          <div style={{ position: "relative" }}>
488 
            <ConfirmationBox
489 
              show={showLeaveConfirmationBox}
490 
              onClose={() => handleLeaveConfirmationBox(false)}
491 
              onAccept={() => handleCancelApply(link_leave)}
492 
            />
493 
          </div>
494 
        )
495 
      }
496 
      {
497 
        loading && (
498 
          <StyledSpinnerContainer>
499 
            <Spinner />
500 
          </StyledSpinnerContainer>
501 
        )
502 
      }
503 
    </div >
1587 steven 504 
  );
505 
};
506 
 
507 
export default Profile;