Rev 4849 | Rev 6159 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
/* eslint-disable react/prop-types */
import React, { useEffect, useRef, useState } from 'react'
import Avatar from '../../../shared/Avatar/Avatar'
import axios from '../../../utils/axios'
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
const UserOptions = ({
image = '',
name = '',
adminUrl = '',
impersonateUrl = '',
defaultNetwork = 'y'
}) => {
const [displayOptions, setDisplayOptions] = useState(false)
const userDropdownContainer = useRef(null);
useEffect(() => {
const handleClickOutside = (event) => {
if (userDropdownContainer?.current && !userDropdownContainer?.current?.contains(event.target)) {
setDisplayOptions(false)
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [userDropdownContainer]);
const handleDisplay = async (e) => {
e.preventDefault()
setDisplayOptions(!displayOptions)
}
const getAdminUrl = async (e) => {
e.preventDefault()
try {
const { data } = await axios.get('/backend/signin-admin')
if (data.success) return window.open(data.data);
} catch (error) {
console.log('>>: error > ', error)
}
}
return (
<li>
<a
href="#"
className="header__option mobile"
onClick={handleDisplay}
>
<Avatar
imageUrl={image}
name={name}
size='md'
/>
<span>Me <ArrowDropDownIcon className='user__option-icon' /></span>
</a>
<div className={`user__options-dropdown ${displayOptions ? 'fadeIn' : 'fadeOut'}`} ref={userDropdownContainer}>
<div className='user__options-description'>
<div className='user__options-info'>
<Avatar
imageUrl={image}
name={name}
size='xl'
/>
<h3>{name}</h3>
</div>
{/* <a href='#' className='btn__profile'>
View profile
</a> */}
</div>
{(adminUrl || impersonateUrl) &&
<div className='user__options-item'>
<h3>Admin</h3>
<ul>
{adminUrl &&
<li>
<a href="#" onClick={getAdminUrl} >Administración</a>
</li>
}
{impersonateUrl &&
<li>
<a href="/impersonate">Personificar otro usuario</a>
</li>
}
</ul>
</div>
}
<div className='user__options-item'>
<h3>Cuenta</h3>
<ul>
<li>
<a href="/account-settings" target='secondary'>Configuración de la cuenta</a>
</li>
{defaultNetwork === 'y' &&
<>
<li>
<a href="/privacy-policy" target='secondary'>Política de privacidad</a>
</li>
<li>
<a href="/cookies" target='secondary'>Política de cookies</a>
</li>
</>
}
</ul>
</div>
<div className='user__options-item'>
<ul>
<li className='logOutContainer'>
<a className='logOutContainer__a' href="/signout">
Cerrar sesión
</a>
</li>
</ul>
</div>
</div >
</li >
)
}
export default UserOptions