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;