Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2281 | Rev 2286 | 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>
2281 stevensc 205 
        </div>
2285 stevensc 206 
      </div>
1587 steven 207 
 
2285 stevensc 208 
      <ul>
209 
        {
210 
          link_view && !isTopData && (
211 
            <li>
212 
              <a
213 
                href={link_view}
214 
                data-link={link_view}
215 
                title=""
216 
                className="btn btn-secondary"
217 
              >
218 
                Ver perfil
219 
              </a>
220 
            </li>
221 
          )
222 
        }
223 
        {
224 
          link_edit && (
225 
            <li>
226 
              <a
227 
                href={link_edit}
228 
                data-link={link_edit}
229 
                title=""
230 
                className="btn btn-tertiary"
231 
              >
232 
                Editar perfil
233 
              </a>
234 
            </li>
235 
          )
236 
        }
237 
        {
238 
          link_approve && (
239 
            <li>
240 
              <a
241 
                href="#"
242 
                className="btn btn-primary"
243 
                onClick={(e) => {
244 
                  e.preventDefault();
245 
                  handleApproveConfirmationBox();
246 
                }}
247 
              >
248 
                Aprobar
249 
              </a>
250 
            </li>
251 
          )
252 
        }
253 
        {
254 
          link_reject && (
255 
            <li>
256 
              <a
257 
                href="#"
258 
                className="btn btn-primary"
259 
                onClick={(e) => {
260 
                  e.preventDefault();
261 
                  handleRejectConfirmationBox();
262 
                }}
263 
              >
264 
                Rechazar
265 
              </a>
266 
            </li>
267 
          )
268 
        }
269 
        {
270 
          link_delete && (
271 
            <li>
272 
              <a
273 
                href="#"
274 
                className="btn btn-primary"
275 
                onClick={(e) => {
276 
                  e.preventDefault();
277 
                  handleShowConfirmationBox();
278 
                }}
279 
              >
280 
                Borrar perfil
281 
              </a>
282 
            </li>
283 
          )
284 
        }
285 
        {
286 
          link_inmail && !isTopData && (
287 
            <li>
288 
              <a
289 
                href={link_inmail}
290 
                data-link={link_inmail}
291 
                title=""
292 
                className="btn btn-primary"
293 
              >
294 
                Mensaje
295 
              </a>
296 
            </li>
297 
          )
298 
        }
299 
        {
300 
          link_admin && (
301 
            <li>
302 
              <a
303 
                onClick={() => getManageUrl()}
304 
                data-link={link_admin}
305 
                title="Administrar empresa"
306 
                className="btn btn-primary"
307 
              >
308 
                Administrar
309 
              </a>
310 
            </li>
311 
          )
312 
        }
313 
        {
314 
          link_unfollow && (
315 
            <li>
316 
              <a
317 
                onClick={() => handleUnfollow(link_unfollow)}
318 
                data-link={link_unfollow}
319 
                title="Administrar empresa"
320 
                className="btn btn-primary"
321 
              >
322 
                Dejar de seguir
323 
              </a>
324 
            </li>
325 
          )
326 
        }
1587 steven 327 
 
2285 stevensc 328 
        {
329 
          link_block && (
330 
            <li>
331 
              <a
332 
                href="#"
333 
                className="btn btn-tertiary"
334 
                onClick={(e) => {
335 
                  e.preventDefault();
336 
                  handleBlockConfirmationBox();
337 
                }}
338 
              >
339 
                Bloquear
340 
              </a>
341 
            </li>
342 
          )
343 
        }
344 
        {
345 
          link_unblock && (
346 
            <li>
347 
              <a
348 
                href="#"
349 
                className="btn btn-tertiary"
350 
                onClick={(e) => {
351 
                  e.preventDefault();
352 
                  handleUnblockConfirmationBox();
353 
                }}
354 
              >
355 
                Desbloquear
356 
              </a>
357 
            </li>
358 
          )
359 
        }
360 
        {
361 
          link_request && (
362 
            <li>
363 
              <a
364 
                href="#"
365 
                className="btn btn-tertiary"
366 
                onClick={(e) => {
367 
                  e.preventDefault();
368 
                  handleRequestConfirmationBox();
369 
                }}
370 
              >
371 
                Conectar
372 
              </a>
373 
            </li>
374 
          )
375 
        }
376 
        {
377 
          link_cancel && (
378 
            <li>
379 
              <a
380 
                href="#"
381 
                className="btn btn-secondary"
382 
                onClick={(e) => {
383 
                  e.preventDefault();
384 
                  handleCancelConfirmationBox();
385 
                }}
386 
              >
387 
                Cancelar
388 
              </a>
389 
            </li>
390 
          )
391 
        }
392 
        {
393 
          link_leave && (
394 
            <li>
395 
              <a
396 
                href="#"
397 
                className="btn btn-secondary"
398 
                onClick={(e) => {
399 
                  e.preventDefault();
400 
                  handleLeaveConfirmationBox();
401 
                }}
402 
              >
403 
                Abandonar
404 
              </a>
405 
            </li>
406 
          )
407 
        }
1587 steven 408 
 
2285 stevensc 409 
      </ul>
410 
      {
411 
        link_delete && (
412 
          <div style={{ position: "relative" }}>
413 
            <ConfirmationBox
414 
              show={showConfirmationBox}
415 
              onClose={() => handleShowConfirmationBox(false)}
416 
              onAccept={() => handleCancelApply(link_delete)}
417 
            />
418 
          </div>
419 
        )
420 
      }
421 
      {
422 
        link_cancel && (
423 
          <div style={{ position: "relative" }}>
424 
            <ConfirmationBox
425 
              show={showCancelConfirmationBox}
426 
              onClose={() => handleCancelConfirmationBox(false)}
427 
              onAccept={() => handleCancelApply(link_cancel)}
428 
            />
429 
          </div>
430 
        )
431 
      }
432 
      {
433 
        link_block && (
434 
          <div style={{ position: "relative" }}>
435 
            <ConfirmationBox
436 
              show={showBlockConfirmationBox}
437 
              onClose={() => handleBlockConfirmationBox(false)}
438 
              onAccept={() => handleCancelApply(link_block)}
439 
            />
440 
          </div>
441 
        )
442 
      }
443 
      {
444 
        link_approve && (
445 
          <div style={{ position: "relative" }}>
446 
            <ConfirmationBox
447 
              show={showApproveConfirmationBox}
448 
              onClose={() => handleApproveConfirmationBox(false)}
449 
              onAccept={() => handleCancelApply(link_approve)}
450 
            />
451 
          </div>
452 
        )
453 
      }
454 
      {
455 
        link_reject && (
456 
          <div style={{ position: "relative" }}>
457 
            <ConfirmationBox
458 
              show={showRejectConfirmationBox}
459 
              onClose={() => handleRejectConfirmationBox(false)}
460 
              onAccept={() => handleCancelApply(link_reject)}
461 
            />
462 
          </div>
463 
        )
464 
      }
465 
      {
466 
        link_request && (
467 
          <div style={{ position: "relative" }}>
468 
            <ConfirmationBox
469 
              show={showRequestConfirmationBox}
470 
              onClose={() => handleRequestConfirmationBox(false)}
471 
              onAccept={() => handleCancelApply(link_request)}
472 
            />
473 
          </div>
474 
        )
475 
      }
476 
      {
477 
        link_unblock && (
478 
          <div style={{ position: "relative" }}>
479 
            <ConfirmationBox
480 
              show={showUnblockConfirmationBox}
481 
              onClose={() => handleUnblockConfirmationBox(false)}
482 
              onAccept={() => handleCancelApply(link_unblock)}
483 
            />
484 
          </div>
485 
        )
486 
      }
487 
      {
488 
        link_leave && (
489 
          <div style={{ position: "relative" }}>
490 
            <ConfirmationBox
491 
              show={showLeaveConfirmationBox}
492 
              onClose={() => handleLeaveConfirmationBox(false)}
493 
              onAccept={() => handleCancelApply(link_leave)}
494 
            />
495 
          </div>
496 
        )
497 
      }
498 
      {
499 
        loading && (
500 
          <StyledSpinnerContainer>
501 
            <Spinner />
502 
          </StyledSpinnerContainer>
503 
        )
504 
      }
505 
    </div >
1587 steven 506 
  );
507 
};
508 
 
509 
export default Profile;