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;