Estado Global (#75)

* Estado Global

Franco, esto medio que ya quedó, pero estoy teniendo unos problemas. La página no se está renderizando correctamente.

* Nombre de variable cambiado

{contenido} por {children}

frontend/src/API/Api.js

@@ -3,14 +3,6 @@ const api = axios.create();
 
 const token = import.meta.env.VITE_JWT;
 
-// const tokenSesion = () => {
-//   const obtenerToken = localStorage.getItem("token");
-//   const tokenn = JSON.parse(obtenerToken);
-//   return tokenn;
-// };
-// const lol = tokenSesion();
-// console.log(lol.token);
-
 const headers = {
   "Content-Type": "application/json",
   Authorization: `Bearer ${token}`,

frontend/src/App.css

@@ -171,6 +171,7 @@ span {
   max-width: 500px;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 1.5rem;
 }
 .ListaTitulos:hover {
   color: var(--hoverTexto);

frontend/src/App.jsx

@@ -1,17 +1,17 @@
+import { EstadoGlobal } from "./Context/EstadoGlobal";
 import "./App.css";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "bootstrap/dist/js/bootstrap.min.js";
 import NavBar from "./Componentes/NavBar/NavBar";
 import Estructura from "./Componentes/Estructura";
-import { PruebaContext } from "./Context/Context";
 
 function App() {
   return (
     <>
-      <PruebaContext.Provider value="yoooo">
+      <EstadoGlobal>
         <NavBar />
         <Estructura />
-      </PruebaContext.Provider>
+      </EstadoGlobal>
     </>
   );
 }

frontend/src/Context/Context.js

@@ -1,3 +1,5 @@
-import { createContext } from "react";
+import { createContext, useContext } from "react";
 
-export const PruebaContext = createContext(null);
+export const TContext = createContext();
+
+export const useEstadoGlobal = () => useContext(TContext);

frontend/src/Context/EstadoGlobal.jsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from "react";
+import { TContext } from "./Context";
+
+const tokenSesion = () => {
+  const obtenerToken = localStorage.getItem("token");
+  const tokenn = JSON.parse(obtenerToken);
+  return tokenn;
+};
+
+export const EstadoGlobal = ({ children }) => {
+  const [token, setToken] = useState(null);
+  console.log("token actual", token)
+
+  useEffect(() => {
+    setToken(tokenSesion());
+  },[]);
+
+  return (
+    <TContext.Provider value={{ token, setToken }}>
+      {children}
+    </TContext.Provider>
+  );
+};

frontend/src/Pagina/Inicio.jsx

@@ -3,23 +3,10 @@ import { useCowboyDelDia } from "../Hooks/useCowboyDelDia";
 import Tarjeta from "../Componentes/Tarjeta/Tarjeta";
 import Carga from "../Pagina/Errores/Carga";
 
-
-import { useContext } from "react";
-import { PruebaContext } from "../Context/Context";
-
-
-
 const Inicio = () => {
   const { tonto, carga, errorTonto } = useObtenerTonto();
   const { cowboy, errorCowboy } = useCowboyDelDia();
 
-
-  const compartida = useContext(PruebaContext);
-  console.log(compartida);
-
-
-
-
   if (carga) {
     return <Carga />;
   }