Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { Avatar, styled, Typography } from '@mui/material';
import ArrowDropDown from '@mui/icons-material/ArrowDropDown';

import { useOutsideClick } from '@hooks';

import { axios } from '@app/utils';
import { asyncLogout } from '@app/redux/auth/auth.actions';
import { addNotification } from '@app/redux/notification/notification.actions';

const NavItem = styled(Link)(({ theme }) => ({
  position: 'relative',
  display: 'flex',
  alignItems: 'center',
  padding: theme.spacing(1, 0),
  height: '100%'
}));

const UserOptions = ({
  image = '',
  name = '',
  adminUrl = '',
  impersonateUrl = '',
  defaultNetwork = 'y',
  knowledgeAuth,
  routeAdmin = '',
  routeImpersonate = ''
}) => {
  const [userImage, setUserImage] = useState(
    '/storage/type/user/code/f3df3718-37d9-4e4d-bd84-71f7924a858d/'
  );
  const [displayOptions, setDisplayOptions] = useState(false);
  const dispatch = useDispatch();

  const [userDropdownContainer] = useOutsideClick(() => setDisplayOptions(false));

  const checkUserImage = () => {
    const session_image = sessionStorage.getItem('user_session_image');
    if (!session_image) return;
    setUserImage(session_image);
    sessionStorage.removeItem('user_session_image');
  };

  const handleDisplay = async (e) => {
    e.preventDefault();
    setDisplayOptions(!displayOptions);
  };

  const getAdminUrl = async (e) => {
    e.preventDefault();
    try {
      const { data } = await axios.get(routeAdmin);
      if (data.success) return window.open(data.data);
    } catch (error) {
      console.log('>>: error > ', error);
    }
  };

  const handleLogout = async (e) => {
    e.preventDefault();
    try {
      await dispatch(asyncLogout());
      dispatch(addNotification({ style: 'success', msg: 'Ha finalizado su sesión' }));
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  useEffect(() => {
    const timer = setInterval(checkUserImage, 2000);

    return () => {
      clearInterval(timer);
    };
  }, []);

  useEffect(() => {
    setUserImage(image);
  }, [image]);

  return (
    <li ref={userDropdownContainer}>
      <NavItem to='/' onClick={handleDisplay}>
        <Avatar src={userImage} alt={`${name} profile image`} />

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

      <div className={`user__options-dropdown ${displayOptions ? 'fadeIn' : 'fadeOut'}`}>
        <div className='user__options-description'>
          <div className='user__options-info'>
            <Avatar src={userImage} alt={`${name} profile image`} />
            <Typography variant='h3'>{name}</Typography>
          </div>
        </div>
        {(adminUrl || impersonateUrl || knowledgeAuth) && (
          <div className='user__options-item'>
            <Typography variant='h3'>Admin</Typography>
            <ul>
              {adminUrl && (
                <li>
                  <Link to='/admin' onClick={getAdminUrl}>
                    Administración
                  </Link>
                </li>
              )}
              {impersonateUrl && (
                <li>
                  <Link to={routeImpersonate}>Personificar otro usuario</Link>
                </li>
              )}
            </ul>
          </div>
        )}
        <div className='user__options-item'>
          <Typography variant='h3'>Cuenta</Typography>
          <ul>
            <li>
              <Link to='/account-settings'>Configuración de la cuenta</Link>
            </li>
            <li>
              <Link to='/abuse-report'>Reportes</Link>
            </li>
            {defaultNetwork === 'y' && (
              <>
                <li>
                  <Link to='/privacy-policy'>Política de privacidad</Link>
                </li>
                <li>
                  <Link to='/cookies'>Política de cookies</Link>
                </li>
              </>
            )}
          </ul>
        </div>
        <div className='user__options-item'>
          <ul>
            <li className='logOutContainer'>
              <Link className='logOutContainer__a' to='/signout' onClick={handleLogout}>
                Cerrar sesión
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </li>
  );
};

export default UserOptions;