Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2288 | Rev 2290 | 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}>
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>
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 
 
2287 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 
      </div>
406 
      {
407 
        link_delete && (
408 
          <div style={{ position: "relative" }}>
409 
            <ConfirmationBox
410 
              show={showConfirmationBox}
411 
              onClose={() => handleShowConfirmationBox(false)}
412 
              onAccept={() => handleCancelApply(link_delete)}
413 
            />
414 
          </div>
415 
        )
416 
      }
417 
      {
418 
        link_cancel && (
419 
          <div style={{ position: "relative" }}>
420 
            <ConfirmationBox
421 
              show={showCancelConfirmationBox}
422 
              onClose={() => handleCancelConfirmationBox(false)}
423 
              onAccept={() => handleCancelApply(link_cancel)}
424 
            />
425 
          </div>
426 
        )
427 
      }
428 
      {
429 
        link_block && (
430 
          <div style={{ position: "relative" }}>
431 
            <ConfirmationBox
432 
              show={showBlockConfirmationBox}
433 
              onClose={() => handleBlockConfirmationBox(false)}
434 
              onAccept={() => handleCancelApply(link_block)}
435 
            />
436 
          </div>
437 
        )
438 
      }
439 
      {
440 
        link_approve && (
441 
          <div style={{ position: "relative" }}>
442 
            <ConfirmationBox
443 
              show={showApproveConfirmationBox}
444 
              onClose={() => handleApproveConfirmationBox(false)}
445 
              onAccept={() => handleCancelApply(link_approve)}
446 
            />
447 
          </div>
448 
        )
449 
      }
450 
      {
451 
        link_reject && (
452 
          <div style={{ position: "relative" }}>
453 
            <ConfirmationBox
454 
              show={showRejectConfirmationBox}
455 
              onClose={() => handleRejectConfirmationBox(false)}
456 
              onAccept={() => handleCancelApply(link_reject)}
457 
            />
458 
          </div>
459 
        )
460 
      }
461 
      {
462 
        link_request && (
463 
          <div style={{ position: "relative" }}>
464 
            <ConfirmationBox
465 
              show={showRequestConfirmationBox}
466 
              onClose={() => handleRequestConfirmationBox(false)}
467 
              onAccept={() => handleCancelApply(link_request)}
468 
            />
469 
          </div>
470 
        )
471 
      }
472 
      {
473 
        link_unblock && (
474 
          <div style={{ position: "relative" }}>
475 
            <ConfirmationBox
476 
              show={showUnblockConfirmationBox}
477 
              onClose={() => handleUnblockConfirmationBox(false)}
478 
              onAccept={() => handleCancelApply(link_unblock)}
479 
            />
480 
          </div>
481 
        )
482 
      }
483 
      {
484 
        link_leave && (
485 
          <div style={{ position: "relative" }}>
486 
            <ConfirmationBox
487 
              show={showLeaveConfirmationBox}
488 
              onClose={() => handleLeaveConfirmationBox(false)}
489 
              onAccept={() => handleCancelApply(link_leave)}
490 
            />
491 
          </div>
492 
        )
493 
      }
494 
      {
495 
        loading && (
496 
          <StyledSpinnerContainer>
497 
            <Spinner />
498 
          </StyledSpinnerContainer>
499 
        )
500 
      }
501 
    </div >
1587 steven 502 
  );
503 
};
504 
 
505 
export default Profile;