Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3267 | Rev 3406 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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