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;