list item refactor and use node v16

Jenkinsfile

@@ -12,14 +12,14 @@ pipeline {
         }
         stage('install dependencies') {
             steps {
-                nvm( version : '14.18.3' ){
+                nvm( version : '16.13.2' ){
                     sh 'npm install'
                 }
             }
         }
         stage('build') {
             steps {
-                nvm( version : '14.18.3' ){
+                nvm( version : '16.13.2' ){
                     sh 'npm run build'
                 }
             }

package.json

@@ -1,5 +1,4 @@
 {
-  "homepage": "http://clubdit.ditca.org/psicoadmin/",
   "name": "psicoadmin",
   "version": "0.1.0",
   "private": true,
@@ -22,10 +21,13 @@
     "react-dom": "^17.0.2",
     "react-router": "6.2.1",
     "react-router-dom": "6.2.1",
-    "react-scripts": "4.0.3",
+    "react-scripts": "^5.0.0",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.11"
   },
+  "resolutions": {
+    "react-error-overlay": "6.0.9"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

src/Components/Dashboard.js

@@ -250,7 +250,10 @@ function DashboardContent() {
                     </Toolbar>
                     <Divider />
                     <List>
-                        <MainListItems AppBarVisible={open}  setAppBarVisible={setOpen} />
+                        <MainListItems 
+                            AppBarVisible={open}  
+                            setAppBarVisible={setOpen} 
+                        />
                     </List>
                     <Divider />
                     <List>

src/Components/PrivateRoute.js

@@ -4,13 +4,9 @@ import useAuth from '../Auth/useAuth';
 export default function RequireAuth({ children }) {
     let auth = useAuth();
     let location = useLocation();
-
-    console.log('check if is logged in private route ')
-
     if (!auth.isLogged()) {
         return <Navigate to="/login" state={{ from: location }} replace />;
     }
-
     return children;
 }
 

src/Components/Routes.js

@@ -1,5 +1,5 @@
-import React, {useEffect} from 'react'
-import { Routes, Route,useNavigate, Navigate } from "react-router-dom";
+import React from 'react'
+import { Routes, Route, Navigate } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
 import { Login } from '../Pages/Login'

src/Components/listItems.js

@@ -25,28 +25,19 @@ import SupportAgentIcon from '@mui/icons-material/SupportAgent';
 import Collapse from '@mui/material/Collapse';
 import ExpandLess from '@mui/icons-material/ExpandLess';
 import ExpandMore from '@mui/icons-material/ExpandMore';
-import { useNavigate } from 'react-router-dom'
-
-const SubMenuList = [5,6,7,8,9]
+import { useNavigate, useResolvedPath, useMatch } from 'react-router-dom'
 
 function SubMenuItem (props) {
 
     let navigate = useNavigate()
-
-    function change (event){
-        props.change(event, props.index)
-        if(props.route){
-            navigate(props.route)
-        }
-    } 
-
-    let isOn = props.selected === props.index
+    let resolved = useResolvedPath(props.route);
+    let match = useMatch({ path: resolved.pathname, end: true });
 
     return(
         <ListItem 
-            sx={{ pl: 9}}
-            selected={isOn}
-            onClick={change} 
+            sx={{ pl: 9,  color : '#25344f'}}
+            selected={match}
+            onClick={() => navigate(props.route)} 
             button
         >
             <ListItemText 
@@ -62,27 +53,21 @@ function SubMenuItem (props) {
     )
 }
 
-function Item (props) {
-
+function NavItem (props) {
+    
     let navigate = useNavigate()
-
-    function change (event){
-        console.log('change >>> ', props)
-        props.change(event, props.index)
-        navigate(props.route)
-    } 
-
-    let isOn = props.selected === props.index
+    let resolved = useResolvedPath(props.route);
+    let match = useMatch({ path: resolved.pathname, end: true });
 
     return(
         <ListItem
             sx={{ color : '#25344f'}}
-            selected={isOn}
-            onClick={change} 
+            selected={match}
+            onClick={() => navigate(props.route) } 
             button
         >
             <ListItemIcon>
-                {props.icon}
+                {props.icon && props.icon}
             </ListItemIcon>
             <ListItemText 
                 sx={{
@@ -100,36 +85,9 @@ function Item (props) {
 
 export const MainListItems = (props) =>  {
 
-    const [selectedIndex, setSelectedIndex] = React.useState(0);
-
-
-    const handleListItemClick = (event, index) => {
-        setSelectedIndex(index);
-    };
 
     const [open, setOpen] = React.useState(false);
 
-    React.useEffect( () => {
-
-        if(!props.AppBarVisible ){
-            return setOpen(false)
-        }
-
-        if( SubMenuList.includes(selectedIndex) && !open ){
-            if(props.AppBarVisible){
-                return setOpen(false)
-            }else{
-                return setOpen(true)
-            }
-        }
-
-        if( !SubMenuList.includes(selectedIndex) && !props.AppBarVisible ){
-            return setOpen(false)
-        }
-
-
-    }, [props, selectedIndex, open])
-
     const showPruebas = () => {
         if(!props.AppBarVisible){
             props.setAppBarVisible(true);
@@ -139,14 +97,17 @@ export const MainListItems = (props) =>  {
 
     return(
         <List>
+
             <ListSubheader inset>MENÚ</ListSubheader>
-            <Item icon={<HomeIcon/>} index={0} selected={selectedIndex} change={handleListItemClick} title="Inicio" route="home" />
-            <Item icon={<WorkIcon/>} index={1} selected={selectedIndex} change={handleListItemClick} title="Puestos" route="puestos" />
-            <Item icon={<VisibilityOffIcon/>} selected={selectedIndex}  change={handleListItemClick} index={2} title="Contraseñas" route="contrasenas" />
-            <Item icon={<PeopleAltIcon/>} selected={selectedIndex}  change={handleListItemClick} index={3} title="Expedientes" route="expedientes" />
-            <Item icon={<EqualizerIcon/>} selected={selectedIndex}  change={handleListItemClick} index={4} title="Resultados" route="resultados" />
 
-            <ListItem selected={ SubMenuList.includes(selectedIndex) } onClick={showPruebas}>
+            <NavItem icon={<HomeIcon/>} title="Inicio" route="home" />
+            <NavItem icon={<WorkIcon/>} title="Puestos" route="puestos" />
+            <NavItem icon={<VisibilityOffIcon/>}   index={2} title="Contraseñas" route="contrasenas" />
+            <NavItem icon={<PeopleAltIcon/>}  title="Expedientes" route="expedientes" />
+            <NavItem icon={<EqualizerIcon/>} title="Resultados" route="resultados" />
+
+            {/*<ListItem selected={false} onClick={showPruebas}>*/}
+            <ListItem onClick={showPruebas}>
                 <ListItemIcon>
                     <FingerprintIcon />
                 </ListItemIcon>
@@ -168,17 +129,17 @@ export const MainListItems = (props) =>  {
             <Collapse in={open} timeout="auto" unmountOnExit>
                 <List component="div" disablePadding>
 
-                    <SubMenuItem route="pruebas/crear" selected={selectedIndex} index={5} change={handleListItemClick} title="Crear Prueba" />
-                    <SubMenuItem route="pruebas/listar" change={handleListItemClick} selected={selectedIndex} index={6} title="Listado de pruebas" />
-                    <SubMenuItem route="pruebas/aplicar"  selected={selectedIndex} index={7} change={handleListItemClick} title="Aplicar" />
-                    <SubMenuItem selected={selectedIndex} index={8} change={handleListItemClick} title="Respuestas" />
-                    <SubMenuItem selected={selectedIndex} index={9} change={handleListItemClick} title="Calificaciones" />
+                    <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" />
 
                 </List>
             </Collapse>
 
-            <Item icon={<MiscellaneousServicesIcon/>} selected={selectedIndex}  change={handleListItemClick} index={10} title="Configuraciones" route="configuraciones" />
-            <Item icon={<HistoryIcon/>} selected={selectedIndex}  change={handleListItemClick} index={11} title="Historial" route="historial" />
+            <NavItem icon={<MiscellaneousServicesIcon/>} title="Configuraciones" route="configuraciones" />
+            <NavItem icon={<HistoryIcon/>} title="Historial" route="historial" />
         </List>
     )
 };
@@ -186,8 +147,8 @@ export const MainListItems = (props) =>  {
 export const secondaryListItems = (
     <Nav>
         <ListSubheader inset>EXTRAS</ListSubheader>
-        <Item selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
-        <Item selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
-        <Item selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
+        <NavItem selected={false} icon={<StarIcon/>} title="Elementos" route="/work" />
+        <NavItem selected={false} icon={<OndemandVideoIcon/>} title="Tutoriales" route="/work" />
+        <NavItem selected={false} icon={<SupportAgentIcon/>} title="Asistencia Técnica" route="/work" />
     </Nav>
 );

src/Pages/Login.jsx

@@ -47,10 +47,11 @@ export function Login() {
     };
 
     React.useEffect(() => {
+        console.log(auth)
         if(auth.isLogged()){
             return navigate('/dashboard/home')
         }    
-    }, [])
+    }, [auth,navigate])
 
 
     return (

src/Pages/PruebaNueva.jsx

@@ -153,9 +153,9 @@ export function PruebaNueva() {
                                             <div className="respuesta_pregunta">
                                                 <div className="radio">
                                                         <input onChange={(event)=> console.log(event.target.value)} id="true" type="radio" name="gender" value="true" />
-                                                        <label for="true">Verdadero</label>
+                                                        <label htmlFor="true">Verdadero</label>
                                                         <input id="false" type="radio" name="gender" value="false"/>
-                                                        <label for="false">Falso</label>
+                                                        <label htmlFor="false">Falso</label>
                                                 </div>
                                             </div>
                                         </div>
@@ -166,15 +166,15 @@ export function PruebaNueva() {
                                             <div className="respuesta_pregunta">
                                                 <div className="radio">
                                                         <input id="opcion1" type="radio" name="gender" value="opcion1"/>
-                                                        <label for="opcion1">Opción 1</label>
+                                                        <label htmlFor="opcion1">Opción 1</label>
                                                         <input id="opcion2" type="radio" name="gender" value="opcion2" />
-                                                        <label for="opcion2">Opción 2</label>
+                                                        <label htmlFor="opcion2">Opción 2</label>
                                                         <input id="opcion3" type="radio" name="gender" value="opcion3"/>
-                                                        <label for="opcion3">Opción 3</label>
+                                                        <label htmlFor="opcion3">Opción 3</label>
                                                         <input id="opcion4" type="radio" name="gender" value="opcion4"/>
-                                                        <label for="opcion4">Opción 4</label>
+                                                        <label htmlFor="opcion4">Opción 4</label>
                                                         <input id="opcion5" type="radio" name="gender" value="opcion5"/>
-                                                        <label for="opcion5">Opción 5</label>
+                                                        <label htmlFor="opcion5">Opción 5</label>
                                                 </div>
                                             </div>
                                         </div>
@@ -183,7 +183,7 @@ export function PruebaNueva() {
                                                 <span>Pregunta 4</span><input type="text" name="pregunta" placeholder="Ve la siguiente imagen y encuentra la faltante" className="input_pregunta"/>
                                                 <div className="button_subir_foto_pregunta">
                                                         <div className="form-group">
-                                                            <label style={{ color : 'white' }} for="upload" className="btn d-inline-block btn-info">Subir imagen</label>
+                                                            <label style={{ color : 'white' }} htmlFor="upload" className="btn d-inline-block btn-info">Subir imagen</label>
                                                             <input type="file" name="" id="upload" />
                                                         </div>
                                                 </div>
@@ -194,17 +194,17 @@ export function PruebaNueva() {
                                             <div className="respuesta_pregunta">
                                                 <div className="button_subir_foto_pregunta">
                                                         <div className="form-group">
-                                                            <label style={{  color : 'white' }} for="upload" className="btn d-inline-block btn-info">Añadir respuesta</label>
+                                                            <label style={{  color : 'white' }} htmlFor="upload" className="btn d-inline-block btn-info">Añadir respuesta</label>
                                                             <input type="file" name="" id="upload" />
                                                         </div>
                                                 </div>
                                                     <div id="sites">
-                                                        <input type="radio" name="site" id="option1" value="option1" />A.<label for="option1"><img src={Respuesta1} alt="Opción 1" /></label>
-                                                        <input type="radio" name="site" id="option2" value="option2" />B.<label for="option2"><img src={Respuesta2} alt="Opción 2" /></label>
-                                                        <input type="radio" name="site" id="option3" value="option3" />C.<label for="option3"><img src={Respuesta3} alt="Opción 3" /></label>
-                                                        <input type="radio" name="site" id="option1" value="option1" />D.<label for="option1"><img src={Respuesta1} alt="Opción 1" /></label>
-                                                        <input type="radio" name="site" id="option2" value="option2" />E.<label for="option2"><img src={Respuesta2} alt="Opción 2" /></label>
-                                                        <input type="radio" name="site" id="option3" value="option3" />F.<label for="option3"><img src={Respuesta3} alt="Opción 3" /></label>
+                                                        <input type="radio" name="site" id="option1" value="option1" />A.<label htmlFor="option1"><img src={Respuesta1} alt="Opción 1" /></label>
+                                                        <input type="radio" name="site" id="option2" value="option2" />B.<label htmlFor="option2"><img src={Respuesta2} alt="Opción 2" /></label>
+                                                        <input type="radio" name="site" id="option3" value="option3" />C.<label htmlFor="option3"><img src={Respuesta3} alt="Opción 3" /></label>
+                                                        <input type="radio" name="site" id="option1" value="option1" />D.<label htmlFor="option1"><img src={Respuesta1} alt="Opción 1" /></label>
+                                                        <input type="radio" name="site" id="option2" value="option2" />E.<label htmlFor="option2"><img src={Respuesta2} alt="Opción 2" /></label>
+                                                        <input type="radio" name="site" id="option3" value="option3" />F.<label htmlFor="option3"><img src={Respuesta3} alt="Opción 3" /></label>
                                                     </div>
                                             </div>
                                             <div className="form-group-guardar-prueba">