Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3694 Rev 3701
Línea 1... Línea 1...
1 
import React, { useEffect, useState } from 'react';
 1 
import React, { useEffect, useState } from 'react';
2 
import { Link } from 'react-router-dom';
 2 
import { useNavigate } from 'react-router-dom';
3 
import { useDispatch } from 'react-redux';
 3 
import { useDispatch } from 'react-redux';
- 
 
 4 
import {
- 
 
 5 
  Avatar,
- 
 
 6 
  styled,
- 
 
 7 
  Typography,
- 
 
 8 
  Menu,
- 
 
 9 
  MenuItem,
- 
 
 10 
  Divider,
- 
 
 11 
  Box,
- 
 
 12 
  ListSubheader
4 
import { Avatar, styled, Typography } from '@mui/material';
 13 
} from '@mui/material';
5 
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 14 
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
Línea 6... Línea -...
6 
 
 - 
 
7 
import { useOutsideClick } from '@hooks';
 - 
 
8 
 
 15 
 
9 
import { axios } from '@app/utils';
 16 
import { axios } from '@app/utils';
10 
import { asyncLogout } from '@app/redux/auth/auth.actions';
 17 
import { asyncLogout } from '@app/redux/auth/auth.actions';
Línea 11... Línea 18...
11 
import { addNotification } from '@app/redux/notification/notification.actions';
 18 
import { addNotification } from '@app/redux/notification/notification.actions';
12 
 
 19 
 
13 
const NavItem = styled(Link)(({ theme }) => ({
 20 
const NavItem = styled(Box)(({ theme }) => ({
14 
  position: 'relative',
 21 
  position: 'relative',
15 
  display: 'flex',
 22 
  display: 'flex',
16 
  alignItems: 'center',
 23 
  alignItems: 'center',
- 
 
 24 
  padding: theme.spacing(1, 0),
17 
  padding: theme.spacing(1, 0),
 25 
  height: '100%',
Línea 18... Línea 26...
18 
  height: '100%'
 26 
  cursor: 'pointer'
19 
}));
 27 
}));
20 
 
 28 
 
Línea 26... Línea 34...
26 
  defaultNetwork = 'y',
 34 
  defaultNetwork = 'y',
27 
  knowledgeAuth,
 35 
  knowledgeAuth,
28 
  routeAdmin = '',
 36 
  routeAdmin = '',
29 
  routeImpersonate = ''
 37 
  routeImpersonate = ''
30 
}) => {
 38 
}) => {
31 
  const [userImage, setUserImage] = useState(
 39 
  const [userImage, setUserImage] = useState('');
32 
    '/storage/type/user/code/f3df3718-37d9-4e4d-bd84-71f7924a858d/'
 40 
  const [anchorEl, setAnchorEl] = useState(null);
33 
  );
 - 
 
34 
  const [displayOptions, setDisplayOptions] = useState(false);
 41 
  const open = Boolean(anchorEl);
35 
  const dispatch = useDispatch();
 42 
  const dispatch = useDispatch();
- 
 
 43 
  const navigate = useNavigate();
Línea 36... Línea 44...
36 
 
 44 
 
- 
 
 45 
  const handleClick = (event) => {
- 
 
 46 
    setAnchorEl(event.currentTarget);
Línea 37... Línea 47...
37 
  const [userDropdownContainer] = useOutsideClick(() => setDisplayOptions(false));
 47 
  };
38 
 
 - 
 
39 
  const checkUserImage = () => {
 - 
 
40 
    const session_image = sessionStorage.getItem('user_session_image');
 48 
 
41 
    if (!session_image) return;
 - 
 
42 
    setUserImage(session_image);
 49 
  const handleClose = () => {
Línea 43... Línea 50...
43 
    sessionStorage.removeItem('user_session_image');
 50 
    setAnchorEl(null);
- 
 
 51 
  };
44 
  };
 52 
 
45 
 
 53 
  const checkUserImage = () => {
- 
 
 54 
    const session_image = sessionStorage.getItem('user_session_image');
- 
 
 55 
    if (session_image) {
46 
  const handleDisplay = async (e) => {
 56 
      setUserImage(session_image);
Línea 47... Línea 57...
47 
    e.preventDefault();
 57 
      sessionStorage.removeItem('user_session_image');
48 
    setDisplayOptions(!displayOptions);
 58 
    }
49 
  };
 59 
  };
50 
 
 60 
 
- 
 
 61 
  const handleGetAdminUrl = async () => {
51 
  const getAdminUrl = async (e) => {
 62 
    handleClose();
- 
 
 63 
    try {
52 
    e.preventDefault();
 64 
      const { data } = await axios.get(routeAdmin);
53 
    try {
 65 
      if (data.success) {
- 
 
 66 
        window.open(data.data);
54 
      const { data } = await axios.get(routeAdmin);
 67 
      }
55 
      if (data.success) return window.open(data.data);
 68 
    } catch (error) {
Línea 56... Línea 69...
56 
    } catch (error) {
 69 
      console.log('>>: error > ', error);
57 
      console.log('>>: error > ', error);
 70 
      dispatch(addNotification({ style: 'danger', msg: 'Error al obtener la URL de admin' }));
58 
    }
 71 
    }
59 
  };
 72 
  };
60 
 
 73 
 
61 
  const handleLogout = async (e) => {
 74 
  const handleLogout = async () => {
62 
    e.preventDefault();
 75 
    handleClose();
63 
    try {
 76 
    try {
64 
      await dispatch(asyncLogout());
 77 
      await dispatch(asyncLogout());
Línea -... Línea 78...
- 
 
 78 
      dispatch(addNotification({ style: 'success', msg: 'Ha finalizado su sesión' }));
- 
 
 79 
    } catch (error) {
- 
 
 80 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
- 
 
 81 
    }
- 
 
 82 
  };
65 
      dispatch(addNotification({ style: 'success', msg: 'Ha finalizado su sesión' }));
 83 
 
66 
    } catch (error) {
 84 
  const handleNavigate = (path) => {
67 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
 - 
 
68 
    }
 - 
 
69 
  };
 85 
    handleClose();
70 
 
 - 
 
71 
  useEffect(() => {
 86 
    navigate(path);
Línea 72... Línea 87...
72 
    const timer = setInterval(checkUserImage, 2000);
 87 
  };
73 
 
 88 
 
74 
    return () => {
 89 
  useEffect(() => {
Línea 75... Línea 90...
75 
      clearInterval(timer);
 90 
    const timer = setInterval(checkUserImage, 2000);
76 
    };
 91 
    return () => clearInterval(timer);
77 
  }, []);
 92 
  }, []);
78 
 
 93 
 
79 
  useEffect(() => {
 - 
 
80 
    setUserImage(image);
 94 
  useEffect(() => {
81 
  }, [image]);
 95 
    setUserImage(image);
82 
 
 96 
  }, [image]);
83 
  return (
 97 
 
- 
 
 98 
  return (
84 
    <li ref={userDropdownContainer}>
 99 
    <li>
85 
      <NavItem to='/' onClick={handleDisplay}>
 100 
      <NavItem onClick={handleClick}>
86 
        <Avatar src={userImage} alt={`${name} profile image`} />
 101 
        <Avatar src={userImage} alt={`${name} profile image`} />
- 
 
 102 
        <ArrowDropDown sx={{ fontSize: '1rem' }} />
87 
 
 103 
      </NavItem>
88 
        <ArrowDropDown sx={{ fontSize: '1rem' }} />
 104 
      <Menu
89 
      </NavItem>
 105 
        anchorEl={anchorEl}
90 
 
 106 
        open={open}
91 
      <div className={`user__options-dropdown ${displayOptions ? 'fadeIn' : 'fadeOut'}`}>
 107 
        onClose={handleClose}
92 
        <div className='user__options-description'>
 108 
        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
93 
          <div className='user__options-info'>
 109 
        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
94 
            <Avatar src={userImage} alt={`${name} profile image`} />
 110 
        MenuListProps={{
- 
 
 111 
          'aria-labelledby': 'user-options-button'
95 
            <Typography variant='h3'>{name}</Typography>
 112 
        }}
- 
 
 113 
      >
96 
          </div>
 114 
        <Box sx={{ padding: 2, display: 'flex', alignItems: 'center', gap: 1 }}>
97 
        </div>
 115 
          <Avatar src={userImage} alt={`${name} profile image`} />
- 
 
 116 
          <Typography variant='h3' sx={{ fontSize: '1rem' }}>
98 
        {(adminUrl || impersonateUrl || knowledgeAuth) && (
 117 
            {name}
99 
          <div className='user__options-item'>
 118 
          </Typography>
100 
            <Typography variant='h3'>Admin</Typography>
 119 
        </Box>
101 
            <ul>
 120 
        <Divider />
102 
              {adminUrl && (
 - 
 
103 
                <li>
 121 
        {(adminUrl || impersonateUrl || knowledgeAuth) && [
104 
                  <Link to='/admin' onClick={getAdminUrl}>
 122 
          <ListSubheader key='admin-header'>Admin</ListSubheader>,
105 
                    Administración
 123 
          adminUrl && (
106 
                  </Link>
 124 
            <MenuItem key='admin-url' onClick={handleGetAdminUrl}>
107 
                </li>
 125 
              Administración
108 
              )}
 126 
            </MenuItem>
109 
              {impersonateUrl && (
 127 
          ),
110 
                <li>
 128 
          impersonateUrl && (
111 
                  <Link to={routeImpersonate}>Personificar otro usuario</Link>
 - 
 
112 
                </li>
 - 
 
113 
              )}
 129 
            <MenuItem key='impersonate-url' onClick={() => handleNavigate(routeImpersonate)}>
114 
            </ul>
 130 
              Personificar otro usuario
115 
          </div>
 - 
 
116 
        )}
 131 
            </MenuItem>
117 
        <div className='user__options-item'>
 - 
 
118 
          <Typography variant='h3'>Cuenta</Typography>
 132 
          ),
119 
          <ul>
 - 
 
120 
            <li>
 - 
 
121 
              <Link to='/account-settings'>Configuración de la cuenta</Link>
 133 
          <Divider key='admin-divider' />
122 
            </li>
 134 
        ]}
123 
            <li>
 135 
        <ListSubheader>Cuenta</ListSubheader>
124 
              <Link to='/abuse-report'>Reportes</Link>
 136 
        <MenuItem onClick={() => handleNavigate('/account-settings')}>
125 
            </li>
 137 
          Configuración de la cuenta
126 
            {defaultNetwork === 'y' && (
 138 
        </MenuItem>
127 
              <>
 139 
        <MenuItem onClick={() => handleNavigate('/abuse-report')}>Reportes</MenuItem>
128 
                <li>
 - 
 
129 
                  <Link to='/privacy-policy'>Política de privacidad</Link>
 140 
        {defaultNetwork === 'y' && [
130 
                </li>
 - 
 
131 
                <li>
 - 
 
132 
                  <Link to='/cookies'>Política de cookies</Link>
 141 
          <MenuItem key='privacy' onClick={() => handleNavigate('/privacy-policy')}>
133 
                </li>
 - 
 
134 
              </>
 - 
 
135 
            )}
 - 
 
136 
          </ul>
 - 
 
137 
        </div>
 - 
 
138 
        <div className='user__options-item'>
 - 
 
139 
          <ul>
 142 
            Política de privacidad
140 
            <li className='logOutContainer'>
 143 
          </MenuItem>,
141 
              <Link className='logOutContainer__a' to='/signout' onClick={handleLogout}>
 144 
          <MenuItem key='cookies' onClick={() => handleNavigate('/cookies')}>
142 
                Cerrar sesión
 145 
            Política de cookies
Línea 143... Línea 146...
143 
              </Link>
 146 
          </MenuItem>