start proyect clean

package.json

         "bootstrap": "^5.2.0-beta1",
         "date-fns": "^2.29.3",
         "formik": "^2.2.9",
-        "jquery": "^3.6.0",
-        "js-cookie": "^3.0.1",
         "jwt-decode": "^3.1.2",
         "mui-datatables": "^4.2.2",
         "react": "^17.0.2",

src/App.js

 import { createContext } from 'react'
 import { BrowserRouter as Router } from "react-router-dom";
 import { Container } from 'react-bootstrap'
-import { AuthProvider } from './Auth/AuthProvider'
+// import { AuthProvider } from './Auth/AuthProvider'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 import Routes from './Components/Routes'
   return (
     <QueryClientProvider client={queryClient}>
       <Router>
-        <AuthProvider>
-          <API_GATEWAY.Provider value={GATEWAY.dev}>
-            <Container fluid>
-              <Routes />
-            </Container>
-          </API_GATEWAY.Provider>
-        </AuthProvider>
+        <API_GATEWAY.Provider value={GATEWAY.dev}>
+          <Container fluid>
+            <Routes />
+          </Container>
+        </API_GATEWAY.Provider>
       </Router>
     </QueryClientProvider>
   );

src/Auth/AuthProvider.js

 import React from 'react'
-import Cookies from 'js-cookie'
 
 export const AuthContext = React.createContext(null);
 
 export function AuthProvider({ children }) {
-
-    let [user, setUser] = React.useState(Cookies.get('token'));
-
-    const context = {
-        user,
-        login: (token) => {
-            try {
-                Cookies.set('token', token, { expires: 7 })
-                setUser(Cookies.get('token'))
-            } catch (e) {
-                console.log('Login Error >> ', e)
-                Cookies.set('token', undefined)
-            }
-        },
-        logout: () => {
-            Cookies.set('token', undefined)
-            setUser(undefined)
-        },
-        getToken: () => Cookies.get('token'),
-        isLogged: () => {
-            try {
-                let CookiesUser = Cookies.get('token')
-                if (!CookiesUser || CookiesUser === 'undefined') {
-                    return false
-                }
-                // TODO:
-                // add an method implmentation for 
-                // check if cockie jwt is valid
-                let logged = CookiesUser.length > 5
-                console.log("is login? >>", logged)
-                return logged
-
-            } catch (e) {
-                console.log("Error checking user ", e)
-                return false
-            }
-        },
-        setProfile: (obj) => Cookies.set('profile', JSON.stringify(obj)),
-        getProfile: () => {
-            let CookieProfile = Cookies.get('profile');
-            if (CookieProfile) {
-                return JSON.parse(CookieProfile);
-            } else {
-                return {}
-            }
-        },
-        setRole: (role) => Cookies.set('role', JSON.stringify((role))),
-        getRole: () => {
-            let CookieRole = Cookies.get('role');
-            if (CookieRole) {
-                return JSON.parse(CookieRole);
-            } else {
-                return {}
-            }
-        }
-    }
-
-    return (
-        <AuthContext.Provider value={context}>
-            {children}
-        </AuthContext.Provider>
-    )
 }
 
 

src/Components/Modal/AyudaAsignar.jsx

 import React from 'react';
 import { Modal } from 'react-bootstrap'
-import $ from 'jquery'
 
 export default function Mostrar(props) {
 
 }
 
 export function ShowComportamiento() {
-    $("#comportamiento_body").css('display', 'block');
-    $("#personalidad_body").css('display', 'none');
-    $("#inteligencia_body").css('display', 'none');
-    $("#personalidad").removeClass("active");
-    $("#inteligencia").removeClass("active");
-    $("#comportamiento").addClass("active");
+    // $("#comportamiento_body").css('display', 'block');
+    // $("#personalidad_body").css('display', 'none');
+    // $("#inteligencia_body").css('display', 'none');
+    // $("#personalidad").removeClass("active");
+    // $("#inteligencia").removeClass("active");
+    // $("#comportamiento").addClass("active");
 };
 
 export function ShowPersonalidad() {
-    $("#comportamiento_body").css('display', 'none');
-    $("#personalidad_body").css('display', 'block');
-    $("#inteligencia_body").css('display', 'none');
-    $("#comportamiento").removeClass("active");
-    $("#inteligencia").removeClass("active");
-    $("#personalidad").addClass("active");
+    // $("#comportamiento_body").css('display', 'none');
+    // $("#personalidad_body").css('display', 'block');
+    // $("#inteligencia_body").css('display', 'none');
+    // $("#comportamiento").removeClass("active");
+    // $("#inteligencia").removeClass("active");
+    // $("#personalidad").addClass("active");
 };
 
 export function ShowInteligencia() {
-    $("#comportamiento_body").css('display', 'none');
-    $("#personalidad_body").css('display', 'none');
-    $("#inteligencia_body").css('display', 'block');
-    $("#comportamiento").removeClass("active");
-    $("#personalidad").removeClass("active");
-    $("#inteligencia").addClass("active");
+    // $("#comportamiento_body").css('display', 'none');
+    // $("#personalidad_body").css('display', 'none');
+    // $("#inteligencia_body").css('display', 'block');
+    // $("#comportamiento").removeClass("active");
+    // $("#personalidad").removeClass("active");
+    // $("#inteligencia").addClass("active");
 };

src/Components/Modal/EditPlaza.js

 import { useQuery, useMutation, useQueryClient } from 'react-query'
 
 const NewPlazaSchema = Yup.object().shape({
-    id: Yup.number(),
-    nombrepuesto:
-        Yup.string().required('El nombre es requerido')
-            .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
-            .max(100),
-    puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
-    aredepto: Yup.number().required('Escoge alguna área'),
-    fecha: Yup.date("Ingresa una fecha válida"),
-    notas: Yup.string("Ingresa una nota válida").min(5).max(150),
-    tests: Yup.array()
+  id: Yup.number(),
+  nombrepuesto:
+  Yup.string().required('El nombre es requerido')
+  .min(5, "El nombre del  puesto debe ser mayor a 5 caracteres")
+  .max(100),
+  puestosuperior: Yup.number("El puesto superior debe ser un número").required("El puesto es requerido"),
+  aredepto: Yup.number().required('Escoge alguna área'),
+  fecha: Yup.date("Ingresa una fecha válida"),
+  notas: Yup.string("Ingresa una nota válida").min(5).max(150),
+  tests: Yup.array()
 })
 
 
 
 function Edit(props) {
 
+  console.log("EDIT : ", props)
+
   const now = useMemo(() => new Date(), [])
   const auth = useSelector((state) => state.token)
   const queryClient = useQueryClient()
-  let { visible, toggle, puesto } = props
+  let { visible, toggle } = props
 
   const [departamento, setDepartamento] = React.useState('');
   const [open, setOpen] = React.useState(false);
   const { errors, touched, handleSubmit, getFieldProps, setValues, values } = formik;
 
   useEffect(() => {
-    if (puesto) {
-      setValues({
-        id: puesto.id,
-        nombrepuesto: puesto.nombrepuesto,
-        puestosuperior: puesto.puestosuperior,
-        aredepto: puesto.areadeptoplz_id,
-        fecha: new Date(puesto.create_day),
-        notas: puesto.notas,
-        tests : puesto.tests
-      })
-      setChecklist(puesto.tests.map(( {id} ) => id))
-    }
-  }, [puesto, now, setValues])
+    console.log('rendreindg edit')
+  },[])
+
+  // useEffect(() => {
+  //   if (puesto) {
+  //     setValues({
+  //       id: puesto.id,
+  //       nombrepuesto: puesto.nombrepuesto,
+  //       puestosuperior: puesto.puestosuperior,
+  //       aredepto: puesto.areadeptoplz_id,
+  //       fecha: new Date(puesto.create_day),
+  //       notas: puesto.notas,
+  //       tests : puesto.tests
+  //     })
+  //     setChecklist(puesto.tests.map(( {id} ) => id))
+  //   }
+  // }, [puesto, now, setValues])
 
   const changeTab = (_event, newValue) => {
     setTab(newValue);

src/Components/Navigation/MenuMovil.jsx

     ListItem, ListItemIcon,ListItemText,
     SwipeableDrawer
 } from '@mui/material/'
-import useAuth from '../../Auth/useAuth'
+
+import { useSelector } from 'react-redux';
+
+// import useAuth from '../../Auth/useAuth'
 
 export function MenuMovil(props) {
 
-    let { anchor, control } = props;
-    const auth = useAuth();
+  let { anchor, control } = props;
+  const auth = useSelector((state) => state.token)
+  console.log(auth.token)
 
-    return (
-        <React.Fragment >
-            <SwipeableDrawer 
-                disableBackdropTransition={true}
-                anchor="left" 
-                open={anchor} 
-                onOpen={() => control(true)}
-                onClose={() => control(false)}
-                sx={{
-                    '& .MuiDrawer-paper': {
-                        width : '67%'
-                    }
-                }}>
-                <List style={{ paddingTop : 64 }}>
-                    <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
-                </List>
-                <Divider />
-                <List>
-                    {SecondaryListItems}
-                </List>
-                <Divider />
-                <List>
-                    <Nav onClick ={auth.logout}>
-                        <ListItem>
-                            <ListItemIcon>
-                                <Logout/>
-                            </ListItemIcon>
-                            <ListItemText>
-                                Cerrar sesion
-                            </ListItemText>
-                        </ListItem>
-                    </Nav>
-                </List>
-            </SwipeableDrawer>
-        </React.Fragment>
-    );
+  return (
+    <React.Fragment >
+      <SwipeableDrawer 
+        disableBackdropTransition={true}
+        anchor="left" 
+        open={anchor} 
+        onOpen={() => control(true)}
+        onClose={() => control(false)}
+        sx={{
+          '& .MuiDrawer-paper': {
+            width : '67%'
+          }
+        }}>
+        <List style={{ paddingTop : 64 }}>
+          <MainListItems AppBarVisible={anchor} setAppBarVisible={() => console.log('cerrar la vision')} />
+        </List>
+        <Divider />
+        <List>
+          {SecondaryListItems}
+        </List>
+        <Divider />
+        <List>
+          <Nav onClick ={() => console.log('logout')}>
+            <ListItem>
+              <ListItemIcon>
+                <Logout/>
+              </ListItemIcon>
+              <ListItemText>
+                Cerrar sesion
+              </ListItemText>
+            </ListItem>
+          </Nav>
+        </List>
+      </SwipeableDrawer>
+    </React.Fragment>
+  );
 }

src/Components/PrivateRoute.js

 import { Navigate, useLocation } from 'react-router-dom';
-import useAuth from '../Auth/useAuth';
+// import useAuth from '../Auth/useAuth';
 import { useSelector } from 'react-redux';
 
-export default function RequireAuth({ children }) {
-
-  let auth = useAuth();
-  let location = useLocation();
-  let { authorities } = auth.getRole();
-  authorities = authorities ? authorities.map(e => e.toUpperCase()) : [];
-
-  if (!auth.isLogged()) {
-    if (authorities.includes("CANDIDATO")) {
-      console.log("redirigir candidato")
-      return <Navigate to="/logincd" state={{ from: location }} replace />;
-    } else {
-      console.log("redirigir recluter")
-      return <Navigate to="/login" state={{ from: location }} replace />;
-    }
-  }
-
-  return children;
-}
-
 export function RequireToken({ children }) {
 
   let token = useSelector((state) => state.token.token)

src/Pages/PruebaAsignar.jsx

 import React, { useEffect , useState} from 'react'
 import {Col, Row } from 'react-bootstrap'
-import $ from 'jquery'
 import { inteligencia, comportamiento, personalidad } from '../Utils/TipoTest'
 import AyudaAsignarModal, { ShowComportamiento, ShowPersonalidad, ShowInteligencia } from '../Components/Modal/AyudaAsignar'
 
-function* idMaker() {
-    var index = 1;
-    while(true)
-        yield index++;
-}
-
-var ID = idMaker(); 
+// function* idMaker() {
+//     var index = 1;
+//     while(true)
+//         yield index++;
+// }
+// //
+// var ID = idMaker(); 
 
 function CardPrueba(props){
 
-    let id = ( parseInt( ID.next().value ) * 210598120309218301923 );
 
     return(
         <Col  md="4">
             <div className="body_prueba">
                 <div className="modern-Checkbox">
-                    <input type="checkbox"  name={`box-${id}` } id={`box-${id}` } />
-                    <label htmlFor={`box-${id}`}>{ props.name }</label>
                 </div>
             </div>
         </Col>
 
     useEffect(() => {
 
-        $(".list-unstyled").find('li').removeClass("active");
-        $("#pruebas").addClass("active");
-        $("#aplicar").addClass("active");
+        // $(".list-unstyled").find('li').removeClass("active");
+        // $("#pruebas").addClass("active");
+        // $("#aplicar").addClass("active");
 
         ShowComportamiento();
 

src/Pages/PruebaNueva.jsx

 import { Col, Row, Container } from 'react-bootstrap';
 import * as Yup from 'yup';
 import { Formik, Field, Form } from 'formik';
-import $ from 'jquery';
 
 import Logo from '../Images/logo.png'
 
 export function PruebaNueva() {
 
     useEffect(() => {
-        $('#sites input:radio').addClass('input_hidden');
-        $('#sites label').click(function() {
-            $(this).addClass('defaultValue').siblings().removeClass('defaultValue');
-        });
+        // $('#sites input:radio').addClass('input_hidden');
+        // $('#sites label').click(function() {
+        //     $(this).addClass('defaultValue').siblings().removeClass('defaultValue');
+        // });
     },[])
 
     const tipo_prueba = [ 

src/Pages/Puestos.jsx

   let [show, setShow] = React.useState(false);
 
   const toggle = useCallback((type, puesto) => {
+    console.log('usecall: ',puesto)
     setPuesto(puesto)
     switch (type) {
       case "VER": {
       <Manual visible={manual} onClose={() => setManual(false)} />
 
       <Mostrar puesto={puesto} visible={show} toggle={toggle} />
-      <Editar puesto={puesto} visible={edit} toggle={toggle} />
+      <Editar visible={edit} toggle={toggle} />
       <Eliminar visible={del} onClose={() => setDelete(false)} />
 
       <Toaster position="bottom-right" />