implement redux

src/Actions/index.js

@@ -0,0 +1,9 @@
+import { SET_TOKEN } from "./types";
+
+// NOTE:
+// lista de acciones -> as reducer
+
+export const setToken = (payload) =>  ({
+  type : SET_TOKEN,
+  payload
+})

src/App.js

@@ -8,39 +8,38 @@ import { AuthProvider } from './Auth/AuthProvider'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 import Routes from './Components/Routes'
+
 const queryClient = new QueryClient({
-    defaultOptions: {
-        queries: {
-            refetchOnWindowFocus: false,
-        },
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
     },
+  },
 })
 
 const GATEWAY = {
-    dev: {
-        API: 'http://localhost:8000',
-    },
-    pro: {
-        API: '',
-    }
+  dev: {
+    API: 'http://localhost:8000',
+  },
+  pro: {
+    API: '',
+  }
 }
 
 export const API_GATEWAY = createContext(GATEWAY)
 
-function App() {
-    return (
-        <QueryClientProvider client={queryClient}>
-            <Router>
-                <AuthProvider>
-                    <API_GATEWAY.Provider value={GATEWAY.dev}>
-                        <Container fluid>
-                            <Routes />
-                        </Container>
-                    </API_GATEWAY.Provider>
-                </AuthProvider>
-            </Router>
-        </QueryClientProvider>
-    );
+export default function App() {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Router>
+        <AuthProvider>
+          <API_GATEWAY.Provider value={GATEWAY.dev}>
+            <Container fluid>
+              <Routes />
+            </Container>
+          </API_GATEWAY.Provider>
+        </AuthProvider>
+      </Router>
+    </QueryClientProvider>
+  );
 }
-
-export default App;

src/Pages/HomeUser.jsx

@@ -5,6 +5,7 @@ import useAuth from '../Auth/useAuth.js'
 import { Service } from '../Utils/HTTP.js';
 
 import { TestCard } from '../Components/HomeUser/TestCard';
+import { useSelector } from 'react-redux';
 
 export function HomeUser(){
 
@@ -12,6 +13,8 @@ export function HomeUser(){
     const token = useRef(auth.getToken());
     const [tests, setTests] = useState([]);
     const [password, setPasword] = useState({});
+    const R_token = useSelector( state => state.token);
+    console.log("Redux Token: ", R_token)
 
     useEffect(() => {
 

src/Pages/Logincs.jsx

@@ -2,25 +2,27 @@ import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom'
 import jwt_decode from "jwt-decode";
+import { 
+  // useSelector,
+  useDispatch } from "react-redux";
+// import { connect } from 'react-redux';
 
 import {
-  Paper, Box, Grid, Typography,
-  TextField, Button, Avatar,
+  Paper, Box, Grid, Typography, TextField, Button, Avatar,
   Backdrop, CircularProgress,
 } from '@mui/material'
 
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 import PersonIcon from '@mui/icons-material/Person';
-// import { useNavigate } from 'react-router-dom'
 import { Copyright } from '../Components/Footer.js'
-// import { Link } from 'react-router-dom'
 import useAuth from '../Auth/useAuth';
 
 import { useFormik } from 'formik';
 import * as Yup from 'yup';
 
 import { Service } from '../Utils/HTTP.js'
+import { setToken } from '../Actions/index.js';
 
 const LoginSchema = Yup.object().shape({
   email: Yup
@@ -41,6 +43,8 @@ export function LoginCs() {
   let navigate = useNavigate()
 
   const [open, setOpen] = React.useState(false);
+  // const token = useSelector(state => state.token)
+  const dispatch = useDispatch();
   const handleClose = () => false
 
   const formik = useFormik({
@@ -74,6 +78,7 @@ export function LoginCs() {
           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();
 
@@ -190,3 +195,6 @@ export function LoginCs() {
 
   );
 }
+
+
+// export default connect(mapStateToProps, mapDispatchToProps)(LoginCs);

src/Reducers/token.js

@@ -0,0 +1,12 @@
+import { SET_TOKEN } from "../Actions/types"
+
+const initialState = { token : null }
+
+export const TokenReducer  = (state = initialState, action) => {
+  switch(action.type){
+    case SET_TOKEN:
+      return {...state, token: action.payload }
+    default:
+    return state;
+  }
+}

src/index.js

@@ -3,10 +3,18 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
+import { TokenReducer  } from '../src/Reducers/token.js';
+import { Provider } from 'react-redux';
+import { legacy_createStore as createStore } from 'redux';
+
+const store = createStore(TokenReducer)
+
 ReactDOM.render(
-    <React.StrictMode>
-        <App />
-    </React.StrictMode>,
-    document.getElementById('root')
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>,
+  document.getElementById('root')
 );