Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import {
  Box,
  Drawer as MuiDrawer,
  List,
  ListItem,
  ListItemButton,
  ListItemText,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  Typography
} from '@mui/material';
import ExpandMore from '@mui/icons-material/ExpandMore';

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

export const Drawer = ({ show = false, items = [], onClose = () => {} }) => {
  return (
    <MuiDrawer anchor='right' open={show} onClose={onClose}>
      <Box role='presentation' onClick={onClose}>
        <List>
          {items.map((item) => (
            <ListItem key={item.href}>
              <RenderMenuItem item={item} onClose={onClose} />
            </ListItem>
          ))}
        </List>
      </Box>
    </MuiDrawer>
  );
};

const RenderMenuItem = ({ item, onClose }) => {
  if (item.childs && item.childs.length > 0) {
    return <AccordionItem item={item} onClose={onClose} />;
  }

  return <MenuDrawerItem item={item} onClose={onClose} />;
};

const MenuDrawerItem = ({ item: { label, href, ajax }, onClose }) => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const asyncNavigate = async (url) => {
    try {
      const { data } = await axios.get(url);
      if (!data.success) throw new Error('Ha ocurrido un error. Por favor, intente nuevamente.');
      navigate(data.data);
    } catch (error) {
      dispatch(addNotification({ style: 'danger', msg: error.message }));
    }
  };

  const handleClick = (e) => {
    e.stopPropagation();
    onClose();

    if (ajax) {
      e.preventDefault();
      asyncNavigate(href);
    } else {
      navigate(href);
    }
  };

  return (
    <ListItemButton onClick={handleClick}>
      <ListItemText primary={label} />
    </ListItemButton>
  );
};

const AccordionItem = ({ item: { label, childs }, onClose }) => {
  const handleAccordionClick = (e) => {
    e.stopPropagation();
  };

  return (
    <Accordion sx={{ width: '100%' }}>
      <AccordionSummary expandIcon={<ExpandMore />} onClick={handleAccordionClick}>
        <Typography>{label}</Typography>
      </AccordionSummary>

      <AccordionDetails>
        <List>
          {childs.map((child) => (
            <ListItem key={child.href}>
              <RenderMenuItem item={child} onClose={onClose} />
            </ListItem>
          ))}
        </List>
      </AccordionDetails>
    </Accordion>
  );
};

export default Drawer;