test from produccion

src/Components/Dashboard.js

 import React, { useEffect, useState, useRef } from 'react';
 import { styled, createTheme, ThemeProvider } from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import MuiDrawer from '@mui/material/Drawer';
-import Box from '@mui/material/Box';
-import MuiAppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import List from '@mui/material/List';
-import Typography from '@mui/material/Typography';
-import Divider from '@mui/material/Divider';
-import IconButton from '@mui/material/IconButton';
-import Badge from '@mui/material/Badge';
-import Container from '@mui/material/Container';
-import Avatar from '@mui/material/Avatar';
-
-import MenuIcon from '@mui/icons-material/Menu';
-import FullscreenIcon from '@mui/icons-material/Fullscreen';
-
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import { MainListItems, secondaryListItems } from './listItems';
-
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 
+import { MainListItems, secondaryListItems } from './listItems';
+import { 
+    Menu,MenuItem,Container,Avatar, Badge,IconButton,Divider,
+    Typography, List, Toolbar, AppBar as MuiAppBar, Box, Drawer as MuiDrawer,
+    CssBaseline
+} from '@mui/material'
 
-import MailIcon from '@mui/icons-material/Mail';
+import {
+    Mail as MailIcon, Notifications as NotificationsIcon, Fullscreen as FullscreenIcon,
+    Menu as MenuIcon,
+} from '@mui/icons-material'
 
 import Logo from '../Images/logo.png';
 import ProfilePicture from '../Images/man.png';
 
 import useAuth from '../Auth/useAuth';
 import { Outlet, useNavigate} from "react-router-dom";
+import { MenuMovil } from '../Components/MenuMovil';
 import Footer from "../Components/Footer";
 
 
                     <Toolbar sx={{ pr: '24px' ,  borderBottom : "1px solid #ec5e69"}} >
 
                         <div ref={elRef}>
+
                             <IconButton 
                                 edge="start" 
                                 color="inherit" 
                                 }}/>
                             </IconButton>
 
-                            <Menu
+
+
+                            <MenuMovil
                                 id="basic-menu"
                                 anchorEl={anchorElMovil}
                                 open={openMov}
                                 onClose={handleCloseMov}
-                                MenuListProps={{
-                                    'aria-labelledby': 'basic-button',
-                                }}>
-                                <MenuItem onClick={ () => navigate('/perfil') }>Perfil</MenuItem>
-                                <MenuItem onClick={handleCloseMov}>My account</MenuItem>
-                                <MenuItem onClick={handleCloseMov}>Logout</MenuItem>
-                            </Menu>
+                                out={CerrarSession}
+                                MenuListProps={{ 'aria-labelledby': 'basic-button', }}
+                            />
 
                         </div>
 
                                 open={open_profile}
                                 onClose={handleClose}
                                 MenuListProps={{ 'aria-labelledby': 'basic-button', }}>
-                                <MenuItem onClick={() => navigate('perfil') }>Profile</MenuItem>
+                                <MenuItem onClick={() => navigate('dashboard/perfil') }>Profile</MenuItem>
                                 <MenuItem onClick={() => console.log('opcion 2')}>My account</MenuItem>
                                 <MenuItem onClick={CerrarSession}>Logout</MenuItem>
                             </Menu>

src/Components/Home/Candidatos.js

 import React, { useState, useEffect } from 'react';
 
 import UpdateIcon from '@mui/icons-material/Update';
-import Typography from '@mui/material/Typography';
-import Pagination from '@mui/material/Pagination';
-import Stack from '@mui/material/Stack';
+
+import {
+    Typography, Pagination, Stack, CircularProgress, Box
+} from '@mui/material'
+
 import { Row, Col } from 'react-bootstrap';
 
 import { Candidato } from './Candidato'
-const USER_LENGTH = 14
+// const USER_LENGTH = 14
+const USER_LENGTH = 99
 
 
 function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 5;
-	let arregloDeArreglos = [];
+    const LONGITUD_PEDAZOS = 10;
+    let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
         arregloDeArreglos.push(pedazo);
     }
-    console.log(arregloDeArreglos)
     return arregloDeArreglos
 }
 
 
     useEffect(() => {
 
-        let list =  [{
-            password :'repartidor',
-            puesto : "Piloto Repartidor",
-            DPI : 0,
-            // aplicacion : "27/12/2018 12:02 PM",
-            aplicacion : new Date().toUTCString(),
-            pendientes : "No"
-        }]
-
-        let a = 1;
-        for( let _ of new Array(USER_LENGTH)  ){
-            if(_) break
-
-            let temp = {
-                ...list[0],
-                DPI : a * 1000
+        setTimeout(() => {
+
+
+            let list =  [{
+                password : 'tester',
+                puesto : "Piloto Repartidor",
+                DPI : 0,
+                // aplicacion : "27/12/2018 12:02 PM",
+                aplicacion : new Date().toUTCString(),
+                pendientes : "No"
+            }]
+
+            let a = 1;
+            for( let _ of new Array(USER_LENGTH)  ){
+                if(_) break
+
+                let temp = {
+                    ...list[0],
+                    DPI : a * 1000,
+                    password : Math.random().toString(36).slice(5), 
+                    aplicacion : new Date(10,12,a).toUTCString(),
+                }
+
+                a=a+1;
+                list.push(temp)
             }
 
-            a=a+1;
-            list.push(temp)
-        }
+            let divided = Divide(list);
 
-        let divided = Divide(list);
-        console.log('DIVDED 0 >> ',JSON.stringify( divided[0] ))
+            setUser(divided)
 
-        setUser(divided)
+        },3000)
 
     }, [])
 
                 </div>
                 {
                     users.length ?
-                    users[page - 1]
-                    .map( user => (<Candidato key={user.DPI} user={user}/>)) 
-                    : undefined
+                    users[page - 1] .map( user => (<Candidato key={user.DPI} user={user}/>)) 
+                    : 
+                        <center>
+                            <Box sx={{ display: 'flex', padding : '5%',  maginTop : 100,  }}> 
+                                <CircularProgress /> 
+                            </Box>
+                        </center>
                 }
                 <Row style={{ padding : 5 }}>
                     <Col>

src/Components/MenuMovil.js

-import * as React from 'react';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
+import { Menu,MenuItem } from '@mui/material';
+import {  useNavigate} from "react-router-dom";
 
-export default function MenuMovil(props) {
+export function MenuMovil(props) {
 
-    const [anchorEl, setAnchorEl] = React.useState(props.open);
-    const open = Boolean(anchorEl);
+    const navigate = useNavigate()
 
-    const handleClick = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClose = () => {
-        console.log('cerrando el componente')
-        // setAnchorEl(null);
-    };
-
-    return (
-        <div>
-            <Menu
-                id="basic-menu"
-                anchorEl={anchorEl}
-                open={open}
-                onClose={handleClose}
-                MenuListProps={{ 'aria-labelledby': 'basic-button', }}
-            >
-                <MenuItem onClick={handleClose}>Profile</MenuItem>
-                <MenuItem onClick={handleClose}>My account</MenuItem>
-                <MenuItem onClick={handleClose}>Logout</MenuItem>
-            </Menu>
-        </div>
-    );
+    let {onClose : handleCloseMov, anchorEl, open, out } =  props;
 
+    return(
+        <Menu
+            id="basic-menu"
+            anchorEl={anchorEl}
+            open={open}
+            onClose={handleCloseMov}
+            MenuListProps={{ 'aria-labelledby': 'basic-button' }}>
+            <MenuItem onClick={() => navigate('/')}>Home</MenuItem>
+            <MenuItem onClick={ () => navigate('perfil') }>Perfil</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={handleCloseMov}>Shit</MenuItem>
+            <MenuItem onClick={out}>Logout</MenuItem>
+        </Menu>
+    )
 }
+

src/Components/listItems.js

     let resolved = useResolvedPath(props.route);
     let match = useMatch({ path: resolved.pathname, end: true });
 
+    let { title, route, icon, open, AppBarVisible, setOpen } = props
+
+    if(route.startsWith('prueba') && match && open && !AppBarVisible ){
+        setOpen(false);
+        // setAppBarVisible(true)
+    }
+
+
     return(
         <ListItem
             sx={{ color : '#25344f'}}
             selected={ match && typeof(match) === "object" }
-            onClick={() => navigate(props.route) } 
+            onClick={() => navigate(route) } 
             button
         >
             <ListItemIcon>
-                {props.icon && props.icon}
+                {icon && icon}
             </ListItemIcon>
             <ListItemText 
                 sx={{
                         fontSize : '.875rem'
                     },
                 }}
-                primary={props.title} 
+                primary={title} 
             />
         </ListItem>
     )
 
 export const MainListItems = (props) =>  {
 
-    /* TODO
-     *   only show submenu when is complete 
-     */
-
     const [open, setOpen] = React.useState(false);
 
     const showPruebas = () => {
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
 
-                    <NavItem route="pruebas/crear" title="Crear Prueba" />
-                    <NavItem route="pruebas/listar"  title="Listado de pruebas" />
-                    <NavItem route="pruebas/aplicar"  title="Aplicar" />
-                    <NavItem route="pruebas/respuestas" title="Respuestas" />
-                    <NavItem route="pruebas/calificaciones" title="Calificaciones" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/crear" title="Crear Prueba" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/listar"  title="Listado de pruebas" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/aplicar"  title="Aplicar" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/respuestas" title="Respuestas" />
+                    <NavItem setOpen={setOpen} { ...props} open={open} route="pruebas/calificaciones" title="Calificaciones" />
 
                 </List>
             </Collapse>

src/Pages/Login.jsx

 const theme = createTheme();
 
 export function Login() {
+
     let auth = useAuth();
     let navigate = useNavigate()
 
             // toast.success('Bienvenido!!')
             // toast.error("This didn't work.")
             // return navigate('/dashboard/home')
-            // auth.login(values)
+            auth.login(values)
         },
     });