Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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