Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3267 | Ir a la última revisión | | 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'
10 
import { logout } from '@app/redux/auth/auth.actions'
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')
43 
 
44 
    if (!session_image) {
45 
      return
46 
    }
47 
 
48 
    setUserImage(session_image)
49 
    sessionStorage.removeItem('user_session_image')
50 
  }
51 
 
52 
  const handleDisplay = async (e) => {
53 
    e.preventDefault()
54 
    setDisplayOptions(!displayOptions)
55 
  }
56 
 
57 
  const getAdminUrl = async (e) => {
58 
    e.preventDefault()
59 
    try {
60 
      const { data } = await axios.get(routeAdmin)
61 
      if (data.success) return window.open(data.data)
62 
    } catch (error) {
63 
      console.log('>>: error > ', error)
64 
    }
65 
  }
66 
 
67 
  const handleLogout = (e) => {
68 
    e.preventDefault()
69 
    axios
70 
      .get('/signout')
71 
      .then((response) => {
72 
        const { success, data } = response.data
73 
        if (!success) {
74 
          throw new Error(data)
75 
        }
76 
 
77 
        dispatch(addNotification({ style: 'success', msg: data.message }))
78 
      })
79 
      .then(() => dispatch(logout()))
80 
      .catch((error) => {
81 
        dispatch(addNotification({ style: 'danger', msg: error.message }))
82 
      })
83 
  }
84 
 
85 
  useEffect(() => {
86 
    const timer = setInterval(() => checkUserImage(), 2000)
87 
 
88 
    return () => {
89 
      clearInterval(timer)
90 
    }
91 
  }, [])
92 
 
93 
  useEffect(() => {
94 
    setUserImage(image)
95 
  }, [image])
96 
 
97 
  return (
98 
    <li ref={userDropdownContainer}>
99 
      <NavItem to='/' onClick={handleDisplay}>
100 
        <Avatar src={userImage} alt={`${name} profile image`} />
101 
 
102 
        <ArrowDropDown sx={{ fontSize: '1rem' }} />
103 
      </NavItem>
104 
 
105 
      <div
106 
        className={`user__options-dropdown ${
107 
          displayOptions ? 'fadeIn' : 'fadeOut'
108 
        }`}
109 
      >
110 
        <div className='user__options-description'>
111 
          <div className='user__options-info'>
112 
            <Avatar src={userImage} alt={`${name} profile image`} />
113 
            <Typography variant='h3'>{name}</Typography>
114 
          </div>
115 
        </div>
116 
        {(adminUrl || impersonateUrl || knowledgeAuth) && (
117 
          <div className='user__options-item'>
118 
            <Typography variant='h3'>Admin</Typography>
119 
            <ul>
120 
              {adminUrl && (
121 
                <li>
122 
                  <Link to='/admin' onClick={getAdminUrl}>
123 
                    Administración
124 
                  </Link>
125 
                </li>
126 
              )}
127 
              {impersonateUrl && (
128 
                <li>
129 
                  <Link to={routeImpersonate}>Personificar otro usuario</Link>
130 
                </li>
131 
              )}
132 
            </ul>
133 
          </div>
134 
        )}
135 
        <div className='user__options-item'>
136 
          <Typography variant='h3'>Cuenta</Typography>
137 
          <ul>
138 
            <li>
139 
              <Link to='/account-settings'>Configuración de la cuenta</Link>
140 
            </li>
141 
            <li>
142 
              <Link to='/abuse-report'>Reportes</Link>
143 
            </li>
144 
            {defaultNetwork === 'y' && (
145 
              <>
146 
                <li>
147 
                  <Link to='/privacy-policy'>Política de privacidad</Link>
148 
                </li>
149 
                <li>
150 
                  <Link to='/cookies'>Política de cookies</Link>
151 
                </li>
152 
              </>
153 
            )}
154 
          </ul>
155 
        </div>
156 
        <div className='user__options-item'>
157 
          <ul>
158 
            <li className='logOutContainer'>
159 
              <Link
160 
                className='logOutContainer__a'
161 
                to='/signout'
162 
                onClick={handleLogout}
163 
              >
164 
                Cerrar sesión
165 
              </Link>
166 
            </li>
167 
          </ul>
168 
        </div>
169 
      </div>
170 
    </li>
171 
  )
172 
}
173 
 
174 
export default UserOptions