[REF] custom private route

package.json

@@ -20,7 +20,8 @@
     "react": "^17.0.2",
     "react-bootstrap": "^2.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^6.0.2",
+    "react-router": "6.2.1",
+    "react-router-dom": "6.2.1",
     "react-scripts": "4.0.3",
     "web-vitals": "^1.0.1",
     "yup": "^0.32.11"

src/Auth/AuthProvider.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import Cookies from 'js-cookie'
 
-export const AuthContext = React.createContext();
+export const AuthContext = React.createContext(null);
 
 export function AuthProvider ({ children }){
 

src/Components/Candidatos.js

@@ -23,7 +23,7 @@ export default function Candidatos () {
 
     const [page, setPage] = useState(1);
     const handleChange = ( _ , value) => {
-        console.log("INDEX => ", value)
+        console.log("INDEX => ", _ ,value)
         setPage(value);
     };
 

src/Components/Routes.js

@@ -1,5 +1,5 @@
 import React, {useEffect} from 'react'
-import { Routes, Route, Navigate, useNavigate } from "react-router-dom";
+import { Routes, Route, Navigate, useNavigate, useLocation } from "react-router-dom";
 
 import { Dashboard } from "./Dashboard";
 import { Login } from '../Pages/Login'
@@ -18,45 +18,62 @@ import { Profile } from '../Pages/Profile'
 
 import useAuth from '../Auth/useAuth'
 
+export function RequireAuth({ children }) {
+    let auth = useAuth();
+    let location = useLocation();
+
+    console.log('requier auth >> ', auth)
+
+
+    if (!auth.isLogged()) {
+        // Redirect them to the /login page, but save the current location they were
+        // trying to go to when they were redirected. This allows us to send them
+        // along to that page after they login, which is a nicer user experience
+        // than dropping them off on the home page.
+        return <Navigate to="/login" state={{ from: location }} replace />;
+    }
+
+    return children;
+}
+
+
 export default function MyRoutes () {
 
     let auth = useAuth();
     let navigate = useNavigate()
 
     useEffect(() => {
-        if(!auth.isLogged(0)){
-            return navigate('/')
+        console.log('usse fec check user')
+        if(!auth.isLogged()){
+            return navigate('login')
+        }else{
+            return navigate('dashboard/home')
         }
     },[auth,navigate])
-    
 
     return(
         <Routes>
-
-            <Route path="/" element={auth.isLogged() ? <Navigate to='dashboard/home'/> : <Login/>}/>
-
-            {
-                auth.isLogged() ? 
-                    (
-                        <Route path="dashboard" element={<Dashboard/>}>
-                            <Route path="home" element={<Home/>} />
-                            <Route path="puestos" element={<Puestos/>} />
-                            <Route path="perfil" element={<Profile/>} />
-                            <Route path="contrasenas" element={<Contras/>} />
-                            <Route path="expedientes" element={<Expedientes/>} />
-                            <Route path="resultados" element={<Resultados/>} />
-                            <Route path="configuraciones" element={<Configuracion/>} />
-                            <Route path="historial" element={<Historial/>} />
-                            <Route path="pruebas/listar" element={<Pruebas/>} />
-                            <Route path="pruebas/crear" element={<PruebaNueva/>} />
-                            <Route path="pruebas/aplicar" element={<PruebaAsignar/>} />
-                        </Route>
-                    )
-                : ( <Route path="dashboard" element={<Navigate to='/'/>} />)
-            }
-
-
-
+            <Route path="/login" element={<Login/>} />
+            <Route 
+                path="dashboard" 
+                element={
+                    <RequireAuth>
+                        <Dashboard/>
+                    </RequireAuth>
+                }
+            >
+                <Route path="home" element={<Home/>} />
+                <Route path="puestos" element={<Puestos/>} />
+                <Route path="perfil" element={<Profile/>} />
+                <Route path="contrasenas" element={<Contras/>} />
+                <Route path="expedientes" element={<Expedientes/>} />
+                <Route path="resultados" element={<Resultados/>} />
+                <Route path="configuraciones" element={<Configuracion/>} />
+                <Route path="historial" element={<Historial/>} />
+                <Route path="pruebas/listar" element={<Pruebas/>} />
+                <Route path="pruebas/crear" element={<PruebaNueva/>} />
+                <Route path="pruebas/aplicar" element={<PruebaAsignar/>} />
+            </Route>
             <Route path="*" element={<NotFound/>}/>
 
         </Routes>

src/Components/listItems.js

@@ -26,8 +26,7 @@ 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'
-import useAuth from '../Auth/useAuth'
-    
+
 const SubMenuList = [5,6,7,8,9]
 
 function SubMenuItem (props) {
@@ -66,29 +65,22 @@ function SubMenuItem (props) {
 function Item (props) {
 
     let navigate = useNavigate()
-    let auth = useAuth()
 
     function change (event){
+        console.log('change >>> ', props)
         props.change(event, props.index)
-        // console.log('is logged', auth.isLogged())
-
-        if(!auth.isLogged()){
-            return navigate('/')
-        }
-
         navigate(props.route)
     } 
 
     let isOn = props.selected === props.index
 
-    //.css-10oikv1-MuiButtonBase-root-MuiListItem-root.Mui-selected
     return(
         <ListItem
             sx={{ color : '#25344f'}}
             selected={isOn}
             onClick={change} 
             button
-            >
+        >
             <ListItemIcon>
                 {props.icon}
             </ListItemIcon>
@@ -125,10 +117,8 @@ export const MainListItems = (props) =>  {
 
         if( SubMenuList.includes(selectedIndex) && !open ){
             if(props.AppBarVisible){
-                console.log('yes show')
                 return setOpen(false)
             }else{
-                console.log('not show')
                 return setOpen(true)
             }
         }
@@ -136,7 +126,7 @@ export const MainListItems = (props) =>  {
         if( !SubMenuList.includes(selectedIndex) && !props.AppBarVisible ){
             return setOpen(false)
         }
-        
+
 
     }, [props, selectedIndex, open])
 
@@ -155,23 +145,21 @@ export const MainListItems = (props) =>  {
             <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" />
-            {/* <Item icon={<FingerprintIcon/>} selected={selectedIndex}  change={handleListItemClick} index={5} title="Pruebas" route="/pruebas" /> */}
 
-           <ListItem selected={ SubMenuList.includes(selectedIndex) } onClick={showPruebas}>
-           {/* <ListItem selected={  SubMenuIndex.includes(selectedIndex) && !open } onClick={showPruebas}> */}
+            <ListItem selected={ SubMenuList.includes(selectedIndex) } onClick={showPruebas}>
                 <ListItemIcon>
                     <FingerprintIcon />
                 </ListItemIcon>
 
 
                 <ListItemText 
-                sx={{
-                    fontSize: 12,
-                    ' .css-10hburv-MuiTypography-root' : {
-                        fontSize : '.875rem'
-                    },
-                }}
-                primary="Pruebas" 
+                    sx={{
+                        fontSize: 12,
+                        ' .css-10hburv-MuiTypography-root' : {
+                            fontSize : '.875rem'
+                        },
+                    }}
+                    primary="Pruebas" 
                 />
                 {open ? <ExpandLess /> : <ExpandMore />}
             </ListItem>
@@ -179,7 +167,7 @@ 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" />

src/Pages/404.jsx

@@ -2,9 +2,9 @@ import { Col, Row }  from 'react-bootstrap'
 
 export function NotFound() {
     return(
-        <section class="error_page">
-            <div class="page_notfound">
-                <Row class="row">
+        <section className="error_page">
+            <div className="page_notfound">
+                <Row className="row">
                     <Col md="12">
                         <h1>404</h1>
                         <h3>Upss!.. Algo salió mal</h3>