Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev 3408 Rev 3694
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 { Link } from 'react-router-dom';
3 
import { useDispatch } from 'react-redux'
 3 
import { useDispatch } from 'react-redux';
4 
import { Avatar, styled, Typography } from '@mui/material'
 4 
import { Avatar, styled, Typography } from '@mui/material';
5 
import { ArrowDropDown } from '@mui/icons-material'
 5 
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
6 
 
 6 
 
7 
import { useOutsideClick } from '@hooks'
 7 
import { useOutsideClick } from '@hooks';
8 
 
 8 
 
9 
import { axios } from '@app/utils'
 9 
import { axios } from '@app/utils';
10 
import { asyncLogout } from '@app/redux/auth/auth.actions'
 10 
import { asyncLogout } from '@app/redux/auth/auth.actions';
11 
import { addNotification } from '@app/redux/notification/notification.actions'
 11 
import { addNotification } from '@app/redux/notification/notification.actions';
Línea 12... Línea 12...
12 
 
 12 
 
13 
const NavItem = styled(Link)(({ theme }) => ({
 13 
const NavItem = styled(Link)(({ theme }) => ({
14 
  position: 'relative',
 14 
  position: 'relative',
15 
  display: 'flex',
 15 
  display: 'flex',
16 
  alignItems: 'center',
 16 
  alignItems: 'center',
17 
  padding: theme.spacing(1, 0),
 17 
  padding: theme.spacing(1, 0),
18 
  height: '100%'
 18 
  height: '100%'
Línea 19... Línea 19...
19 
}))
 19 
}));
20 
 
 20 
 
21 
const UserOptions = ({
 21 
const UserOptions = ({
22 
  image = '',
 22 
  image = '',
Línea 28... Línea 28...
28 
  routeAdmin = '',
 28 
  routeAdmin = '',
29 
  routeImpersonate = ''
 29 
  routeImpersonate = ''
30 
}) => {
 30 
}) => {
31 
  const [userImage, setUserImage] = useState(
 31 
  const [userImage, setUserImage] = useState(
32 
    '/storage/type/user/code/f3df3718-37d9-4e4d-bd84-71f7924a858d/'
 32 
    '/storage/type/user/code/f3df3718-37d9-4e4d-bd84-71f7924a858d/'
33 
  )
 33 
  );
34 
  const [displayOptions, setDisplayOptions] = useState(false)
 34 
  const [displayOptions, setDisplayOptions] = useState(false);
35 
  const dispatch = useDispatch()
 35 
  const dispatch = useDispatch();
36 
 
 36 
 
37 
  const [userDropdownContainer] = useOutsideClick(() =>
 37 
  const [userDropdownContainer] = useOutsideClick(() => setDisplayOptions(false));
38 
    setDisplayOptions(false)
 - 
 
39 
  )
 - 
 
Línea 40... Línea 38...
40 
 
 38 
 
41 
  const checkUserImage = () => {
 39 
  const checkUserImage = () => {
42 
    const session_image = sessionStorage.getItem('user_session_image')
 40 
    const session_image = sessionStorage.getItem('user_session_image');
43 
    if (!session_image) return
 41 
    if (!session_image) return;
44 
    setUserImage(session_image)
 42 
    setUserImage(session_image);
45 
    sessionStorage.removeItem('user_session_image')
 43 
    sessionStorage.removeItem('user_session_image');
Línea 46... Línea 44...
46 
  }
 44 
  };
47 
 
 45 
 
48 
  const handleDisplay = async (e) => {
 46 
  const handleDisplay = async (e) => {
49 
    e.preventDefault()
 47 
    e.preventDefault();
Línea 50... Línea 48...
50 
    setDisplayOptions(!displayOptions)
 48 
    setDisplayOptions(!displayOptions);
51 
  }
 49 
  };
52 
 
 50 
 
53 
  const getAdminUrl = async (e) => {
 51 
  const getAdminUrl = async (e) => {
54 
    e.preventDefault()
 52 
    e.preventDefault();
55 
    try {
 53 
    try {
56 
      const { data } = await axios.get(routeAdmin)
 54 
      const { data } = await axios.get(routeAdmin);
57 
      if (data.success) return window.open(data.data)
 55 
      if (data.success) return window.open(data.data);
58 
    } catch (error) {
 56 
    } catch (error) {
Línea 59... Línea 57...
59 
      console.log('>>: error > ', error)
 57 
      console.log('>>: error > ', error);
60 
    }
 58 
    }
61 
  }
 59 
  };
62 
 
 60 
 
63 
  const handleLogout = async (e) => {
 - 
 
64 
    e.preventDefault()
 61 
  const handleLogout = async (e) => {
65 
    try {
 - 
 
66 
      await dispatch(asyncLogout())
 62 
    e.preventDefault();
67 
      dispatch(
 63 
    try {
68 
        addNotification({ style: 'success', msg: 'Ha finalizado su sesión' })
 64 
      await dispatch(asyncLogout());
69 
      )
 65 
      dispatch(addNotification({ style: 'success', msg: 'Ha finalizado su sesión' }));
Línea 70... Línea 66...
70 
    } catch (error) {
 66 
    } catch (error) {
71 
      dispatch(addNotification({ style: 'danger', msg: error.message }))
 67 
      dispatch(addNotification({ style: 'danger', msg: error.message }));
Línea 72... Línea 68...
72 
    }
 68 
    }
73 
  }
 69 
  };
74 
 
 70 
 
75 
  useEffect(() => {
 71 
  useEffect(() => {
Línea 76... Línea 72...
76 
    const timer = setInterval(checkUserImage, 2000)
 72 
    const timer = setInterval(checkUserImage, 2000);
77 
 
 73 
 
78 
    return () => {
 74 
    return () => {
Línea 79... Línea 75...
79 
      clearInterval(timer)
 75 
      clearInterval(timer);
80 
    }
 76 
    };
81 
  }, [])
 77 
  }, []);
82 
 
 78 
 
Línea 83... Línea 79...
83 
  useEffect(() => {
 79 
  useEffect(() => {
84 
    setUserImage(image)
 80 
    setUserImage(image);
Línea 85... Línea -...
85 
  }, [image])
 - 
 
86 
 
 - 
 
87 
  return (
 81 
  }, [image]);
88 
    <li ref={userDropdownContainer}>
 - 
 
89 
      <NavItem to='/' onClick={handleDisplay}>
 - 
 
90 
        <Avatar src={userImage} alt={`${name} profile image`} />
 82 
 
91 
 
 83 
  return (
92 
        <ArrowDropDown sx={{ fontSize: '1rem' }} />
 84 
    <li ref={userDropdownContainer}>
93 
      </NavItem>
 85 
      <NavItem to='/' onClick={handleDisplay}>
94 
 
 86 
        <Avatar src={userImage} alt={`${name} profile image`} />
Línea 144... Línea 136...
144 
          </ul>
 136 
          </ul>
145 
        </div>
 137 
        </div>
146 
        <div className='user__options-item'>
 138 
        <div className='user__options-item'>
147 
          <ul>
 139 
          <ul>
148 
            <li className='logOutContainer'>
 140 
            <li className='logOutContainer'>
149 
              <Link
 - 
 
150 
                className='logOutContainer__a'
 141 
              <Link className='logOutContainer__a' to='/signout' onClick={handleLogout}>
151 
                to='/signout'
 - 
 
152 
                onClick={handleLogout}
 - 
 
153 
              >
 - 
 
154 
                Cerrar sesión
 142 
                Cerrar sesión
155 
              </Link>
 143 
              </Link>
156 
            </li>
 144 
            </li>
157 
          </ul>
 145 
          </ul>
158 
        </div>
 146 
        </div>
159 
      </div>
 147 
      </div>
160 
    </li>
 148 
    </li>
161 
  )
 149 
  );
162 
}
 150 
};
Línea 163... Línea 151...
163 
 
 151