change auth provider by redux

src/Components/PrivateRoute.js

@@ -1,5 +1,6 @@
 import { Navigate, useLocation } from 'react-router-dom';
 import useAuth from '../Auth/useAuth';
+import { useSelector } from 'react-redux';
 
 export default function RequireAuth({ children }) {
 
@@ -21,3 +22,17 @@ export default function RequireAuth({ children }) {
     return children;
 }
 
+export function RequireToken({ children }) {
+
+    let token = useSelector((state) => state.token.token)
+    let location = useLocation();
+    // let { authorities } = auth.getRole();
+    // authorities = authorities ? authorities.map( e => e.toUpperCase()) : [] ;
+
+    if (!token) {
+      console.log('falta authorizacion user')
+      return <Navigate to="/logincd" state={{ from: location }} replace />;
+    }
+
+    return children;
+}

src/Components/Routes.js

@@ -23,7 +23,7 @@ import { RestorePassword } from '../Pages/RestorePassword'
 import { HomeUser } from '../Pages/HomeUser'
 import { Prueba } from '../Pages/Prueba.jsx'
 
-import RequireAuth from '../Components/PrivateRoute'
+import RequireAuth, { RequireToken } from '../Components/PrivateRoute'
 
 export default function MyRoutes() {
 
@@ -39,9 +39,9 @@ export default function MyRoutes() {
       <Route
         path="user"
         element={
-          <RequireAuth>
-            <User />
-          </RequireAuth>
+          <RequireToken>
+            <User/>
+          </RequireToken>
         }
       >
         <Route path="home" element={<HomeUser />} />

src/Components/User.jsx

@@ -81,7 +81,7 @@ export function User() {
 
     const [open, setOpen] = React.useState(true);
 
-    const isMovil = Size('(max-width:770px)');
+    const isMovil = Size('(max-width:1000px)');
     const auth = useAuth();
     const navigate = useNavigate()
     let dispatch = useDispatch()
@@ -97,6 +97,7 @@ export function User() {
     const handleClick = (event) =>  setAnchorEl(event.currentTarget);
     const handleClose = () => setAnchorEl(null)
     const toggleDrawer = () => {
+        console.log('toggle drawer')
         if(isMovil){
             setAnchorElMov(!anchorElMovil)
         }else{
@@ -104,6 +105,7 @@ export function User() {
         }
     }
     const [anchorElMovil, setAnchorElMov] = React.useState(false);
+    React.useEffect(() => isMovil ? setOpen(false) : null , [isMovil])
 
     return (
         <ThemeProvider theme={mdTheme}>
@@ -119,7 +121,7 @@ export function User() {
                             color="inherit"
                             aria-label="open drawer"
                             onClick={toggleDrawer}
-                            sx={{ marginRight: '36px', ...( open && { display: 'none' }), }} >
+                            sx={{ marginRight: '36px', ...( open  && { display: 'none' }), }} >
                             <MenuIcon style={{
                                 background: 'var(--main)',
                                 fontSize: "40",

src/Pages/Logincs.jsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
-import { useNavigate } from 'react-router-dom'
+import { Navigate, useNavigate } from 'react-router-dom'
 import jwt_decode from "jwt-decode";
-import { useDispatch } from "react-redux";
+import { useDispatch , useSelector } from "react-redux";
 
 import { setToken } from '../Slices/tokenSlice'
+import { setProfile, setRole } from '../Slices/userSlice.js'
 
 import {
   Paper, Box, Grid, Typography, TextField, Button, Avatar,
@@ -15,7 +16,6 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import PersonIcon from '@mui/icons-material/Person';
 import { Copyright } from '../Components/Footer.js'
-import useAuth from '../Auth/useAuth';
 
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
@@ -37,12 +37,18 @@ const theme = createTheme();
 
 export function LoginCs() {
 
-  let auth = useAuth();
-  let navigate = useNavigate()
-
   const [open, setOpen] = React.useState(false);
   const dispatch = useDispatch();
   const handleClose = () => false
+  const navigate = useNavigate();
+  let token = useSelector((state) => state.token.token)
+
+  React.useEffect(() => {
+    if(token){
+      navigate('/user/home')
+    }
+  }, [token, navigate])
+
 
   const formik = useFormik({
     initialValues: {
@@ -52,14 +58,11 @@ export function LoginCs() {
     validationSchema: LoginSchema,
     onSubmit: async (values) => {
 
-      //
-      // QW5hbGlzdGEgZGUgY29tcHJhcw==
-      //
-
       let { email, password } = values
       setOpen(true)
 
-      let request = new Service(`/user?user=${email}&password=${password}&typeusr=iscandidato`)
+      let url = `/user?user=${email}&password=${password}&typeusr=iscandidato`
+      let request = new Service(url);
       request
         .post({})
         .then(response => {
@@ -68,30 +71,26 @@ export function LoginCs() {
           let { token, nombre, apelidos, id: pass_id } = response;
           toast.success(`Bienvenido ${nombre} ${apelidos}!!`)
           token = token.replace("Bearer ", "")
-          // console.log(token);
-
-          // let { exp } = jwt_decode(token);
+          let { exp } = jwt_decode(token);
           let body_token = jwt_decode(token);
           body_token['pass'] = password;
           body_token['passid'] = pass_id;
-          console.log("BODY TOKEN: ", body_token)
-          dispatch(setToken(token))
-          // let timestamp = exp * 1000;
-          // let restante = timestamp - Date.now();
 
-          // setTimeout(() => alert("Token Expirado"), restante)
-          auth.setProfile({
+          let timestamp = exp * 1000;
+          let exp_in = timestamp - Date.now();
+          let profile = {
             email,
             password,
             passid: pass_id,
             pass: password,
             assingid: 'ok'
-          })
-          auth.setRole(body_token)
-
+          }
+          setTimeout(() => alert("Token Expirado"), exp_in)
           setTimeout(() => {
             setOpen(false)
-            auth.login(token)
+            dispatch(setRole(body_token))
+            dispatch(setProfile(profile))
+            dispatch(setToken({ token : token, exp : exp_in }))
           }, 2000)
 
         })
@@ -104,12 +103,6 @@ export function LoginCs() {
     },
   });
 
-  React.useEffect(() => {
-    if (auth.isLogged()) {
-      return navigate('/user/home')
-    }
-  }, [auth, navigate])
-
   return (
     <ThemeProvider theme={theme}>
       <Grid container component="main" sx={{ height: '100vh' }}>
@@ -192,6 +185,3 @@ export function LoginCs() {
 
   );
 }
-
-
-// export default connect(mapStateToProps, mapDispatchToProps)(LoginCs);

src/Reducers/index.js

@@ -1,8 +1,10 @@
 import { combineReducers } from '@reduxjs/toolkit'
 import tokenReducer from '../Slices/tokenSlice.js';
+import userReducer from '../Slices/userSlice.js';
 
 const rootReducer = combineReducers({
-  token : tokenReducer
+  token : tokenReducer,
+  user: userReducer
 });
 
 export default rootReducer;

src/Slices/tokenSlice.js

@@ -1,8 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-// import Cookies from 'js-cookie'
-
-// let token = Cookies.get('token') ? Cookies.get('token') : null;
-const initialState = { token : null };
+const initialState = { token : null, exp : 0 };
 
 export const tokenSlice = createSlice({
   name: "token",

src/Slices/userSlice.js

@@ -0,0 +1,19 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const initialState = { profile : null, role :null }
+
+export const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setProfile: (state, action) => {
+      state.data = action.payload;
+    },
+    setRole : (state, action ) => {
+      state.role = action.payload;
+    }
+  }
+})
+
+export const { setProfile, setRole } = userSlice.actions;
+export default userSlice.reducer;

src/Utils/state.js

@@ -5,7 +5,6 @@ export const loadState = () => {
       return undefined
     }
     let data = JSON.parse(serializedData)
-    console.log('data serializada', data)
     return data
   } catch (error) {
     return undefined