Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';

import { useNavigate } from 'react-router-dom';

import { useDispatch } from 'react-redux';

import {

  Avatar,

  styled,

  Typography,

  Menu,

  MenuItem,

  Divider,

  Box,

  ListSubheader

} from '@mui/material';

import ArrowDropDown from '@mui/icons-material/ArrowDropDown';

import { axios } from '@app/utils';

import { asyncLogout } from '@app/redux/auth/auth.actions';

import { addNotification } from '@app/redux/notification/notification.actions';

const NavItem = styled(Box)(({ theme }) => ({

  position: 'relative',

  display: 'flex',

  alignItems: 'center',

  padding: theme.spacing(1, 0),

  height: '100%',

  cursor: 'pointer'

}));

const UserOptions = ({

  image = '',

  name = '',

  adminUrl = '',

  impersonateUrl = '',

  defaultNetwork = 'y',

  knowledgeAuth,

  routeAdmin = '',

  routeImpersonate = ''

}) => {

  const [userImage, setUserImage] = useState('');

  const [anchorEl, setAnchorEl] = useState(null);

  const open = Boolean(anchorEl);

  const dispatch = useDispatch();

  const navigate = useNavigate();

  const handleClick = (event) => {

    setAnchorEl(event.currentTarget);

  };

  const handleClose = () => {

    setAnchorEl(null);

  };

  const checkUserImage = () => {

    const session_image = sessionStorage.getItem('user_session_image');

    if (session_image) {

      setUserImage(session_image);

      sessionStorage.removeItem('user_session_image');

    }

  };

  const handleGetAdminUrl = async () => {

    handleClose();

    try {

      const { data } = await axios.get(routeAdmin);

      if (data.success) {

        window.open(data.data);

      }

    } catch (error) {

      console.log('>>: error > ', error);

      dispatch(addNotification({ style: 'danger', msg: 'Error al obtener la URL de admin' }));

    }

  };

  const handleLogout = async () => {

    handleClose();

    try {

      await dispatch(asyncLogout());

      dispatch(addNotification({ style: 'success', msg: 'Ha finalizado su sesión' }));

    } catch (error) {

      dispatch(addNotification({ style: 'danger', msg: error.message }));

    }

  };

  const handleNavigate = (path) => {

    handleClose();

    navigate(path);

  };

  useEffect(() => {

    const timer = setInterval(checkUserImage, 2000);

    return () => clearInterval(timer);

  }, []);

  useEffect(() => {

    setUserImage(image);

  }, [image]);

  return (

    <li>

      <NavItem onClick={handleClick}>

        <Avatar src={userImage} alt={`${name} profile image`} />

        <ArrowDropDown sx={{ fontSize: '1rem' }} />

      </NavItem>

      <Menu

        anchorEl={anchorEl}

        open={open}

        onClose={handleClose}

        transformOrigin={{ horizontal: 'right', vertical: 'top' }}

        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}

        MenuListProps={{

          'aria-labelledby': 'user-options-button'

        }}

      >

        <Box sx={{ padding: 2, display: 'flex', alignItems: 'center', gap: 1 }}>

          <Avatar src={userImage} alt={`${name} profile image`} />

          <Typography variant='h3' sx={{ fontSize: '1rem' }}>

            {name}

          </Typography>

        </Box>

        <Divider />

        {(adminUrl || impersonateUrl || knowledgeAuth) && [

          <ListSubheader key='admin-header'>Admin</ListSubheader>,

          adminUrl && (

            <MenuItem key='admin-url' onClick={handleGetAdminUrl}>

              Administración

            </MenuItem>

          ),

          impersonateUrl && (

            <MenuItem key='impersonate-url' onClick={() => handleNavigate(routeImpersonate)}>

              Personificar otro usuario

            </MenuItem>

          ),

          <Divider key='admin-divider' />

        ]}

        <ListSubheader>Cuenta</ListSubheader>

        <MenuItem onClick={() => handleNavigate('/account-settings')}>

          Configuración de la cuenta

        </MenuItem>

        <MenuItem onClick={() => handleNavigate('/abuse-report')}>Reportes</MenuItem>

        {defaultNetwork === 'y' && [

          <MenuItem key='privacy' onClick={() => handleNavigate('/privacy-policy')}>

            Política de privacidad

          </MenuItem>,

          <MenuItem key='cookies' onClick={() => handleNavigate('/cookies')}>

            Política de cookies

          </MenuItem>

        ]}

        <Divider />

        <MenuItem onClick={handleLogout}>Cerrar sesión</MenuItem>

      </Menu>

    </li>

  );

};

export default UserOptions;