Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { Badge, styled } from '@mui/material';

import { useOutsideClick } from '@hooks';

import ListItemDropdown from './ListItemDropdown';

import { getAdminUrl } from '@app/services/admin';
import { useDispatch } from 'react-redux';
import { addNotification } from '@app/redux/notification/notification.actions';

const NavItem = styled(Link)(({ theme }) => ({
  position: 'relative',
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'center',
  justifyContent: 'center',
  padding: theme.spacing(1, 0),
  fontSize: '12px',
  fontWeight: 400,
  height: '100%',
  '&::after': {
    borderBottom: '2px solid var(--font-color)',
    content: '""',
    bottom: '-1px',
    left: 0,
    position: 'absolute',
    transform: 'scaleX(0)',
    transition: 'transform 0.2s ease-in-out',
    width: '100%'
  },
  '&.active::after, &:hover::after': {
    transform: 'scaleX(1)'
  },
  [theme.breakpoints.up('lg')]: {
    minWidth: '60px'
  },
  [theme.breakpoints.down('md')]: {
    fontSize: 0
  }
}));

const NavigationItem = ({ ajax = 0, url = '', childs = [], count = 0, onClick, children }) => {
  const [displayMenu, setDisplayMenu] = useState(false);

  const navigate = useNavigate();
  const dispatch = useDispatch();

  const [menu] = useOutsideClick(() => setDisplayMenu(false));

  const toggleMenu = () => setDisplayMenu(!displayMenu);

  const openAdmin = async () => {
    try {
      const adminUrl = await getAdminUrl(url);
      window.open(adminUrl, '_blank');
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  const handleClick = async (e) => {
    e.preventDefault();

    if (ajax) {
      openAdmin();
      return;
    }

    if (onClick) {
      onClick();
      return;
    }

    if (childs.length) {
      toggleMenu();
      return;
    }

    navigate(`/${url}`);
  };

  return (
    <li ref={menu}>
      <NavItem to={url} onClick={handleClick} className={displayMenu ? 'active' : ''}>
        {children}

        <Badge
          badgeContent={count}
          color='error'
          sx={{ position: 'absolute', top: '1rem', right: '1rem' }}
        />
      </NavItem>

      <ListItemDropdown isShow={displayMenu} options={childs} onSelect={toggleMenu} />
    </li>
  );
};

export default NavigationItem;