From e99376ebdd4aed8a0a829b3eba690fb58acc21fe Mon Sep 17 00:00:00 2001
From: evenegas <emilio.00124e@gmail.com>
Date: Wed, 2 Jul 2025 15:46:51 -0600
Subject: [PATCH] =?UTF-8?q?Se=20hicieron=20cabios=20en=20el=20dise=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/page.tsx          | 34 ++++++++---------
 src/hooks/use-session.tsx | 79 +++++++++++++++++++--------------------
 2 files changed, 54 insertions(+), 59 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 687b067..094d281 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,17 +1,15 @@
 "use client";
 
 import "./landing/globals.css";
-
 import Header from "./landing/new_header";
 import Footer from "@/components/layout/footer";
 import LandingBody from "./landing/landing_body";
-import { useEffect, useState } from "react";
 import Dashboard from "./carga/page";
 import Consulta from "./visualizacion/page";
 import LoginPage from "@/containers/LoginPage";
-import { useSession } from "@/hooks/use-session";
 import FormularioCargaIndividual from "./alta/alta";
-import { getUserFromToken } from "@/components/Hook";
+import { useSession } from "@/hooks/use-session";
+import { useEffect, useState } from "react";
 
 export type PageKey = "landing" | "login" | "carga" | "consulta" | "carga individual";
 
@@ -23,30 +21,28 @@ export interface HeaderItem {
 
 const Home = () => {
   const [page, setPage] = useState<PageKey>("landing");
-  const { loading, error, data } = useSession();
+  const { data: user, loading } = useSession(); // El usuario tiene campos como tipo y email
+  const [isCarga, setIsCarga] = useState("Carga");
+
+  useEffect(() => {
+    if (user?.tipo === "LOAD") {
+      setIsCarga("Carga");
+    } else {
+      setIsCarga("Descarga");
+    }
+  }, [user]);
 
   const handleLogout = () => {
     localStorage.removeItem("token");
     location.reload();
   };
 
-  const [isCarga, setIsCarga] = useState<string>("Carga");
-
-  useEffect(() => {
-    const user = getUserFromToken();
-    if (user?.tipo === "LOAD") {
-      setIsCarga("Carga");
-    } else {
-      setIsCarga("Descarga");
-    }
-  }, []);
-
-  const items: HeaderItem[] = data?.id
+  const items: HeaderItem[] = user
     ? [
       { label: "Inicio", page: "landing" },
       { label: "Consulta", page: "consulta" },
       { label: isCarga, page: "carga" as PageKey },
-      ...(getUserFromToken()?.tipo === "LOAD"
+      ...(user.tipo === "LOAD"
         ? [{ label: "Carga individual", page: "carga individual" as PageKey }]
         : []),
       { label: "Cerrar sesión", onClick: handleLogout },
@@ -66,7 +62,7 @@ const Home = () => {
         {page === "login" && <LoginPage />}
         {page === "consulta" && <Consulta />}
         {page === "carga" && <Dashboard />}
-        {page === "carga individual" && getUserFromToken()?.tipo === "LOAD" && (
+        {page === "carga individual" && user?.tipo === "LOAD" && (
           <FormularioCargaIndividual />
         )}
       </div>
diff --git a/src/hooks/use-session.tsx b/src/hooks/use-session.tsx
index 82f2582..7411951 100644
--- a/src/hooks/use-session.tsx
+++ b/src/hooks/use-session.tsx
@@ -1,53 +1,52 @@
+// hooks/use-session.ts
 import { useEffect, useState } from "react";
 import { jwtDecode } from "jwt-decode";
 
-interface UserData {
-  id: string;
-  name: string;
+interface JwtPayload {
+  sub: string;
   email: string;
-  // ...otros campos que tenga tu token
+  tipo: string;
+  exp: number; // <-- Asegúrate de incluir esto
 }
 
-interface SessionState {
-  loading: boolean;
-  error: string | null;
-  data: UserData | null;
-}
-
-export function useSession(): SessionState {
-  const [state, setState] = useState<SessionState>({
-    loading: true,
-    error: null,
-    data: null,
-  });
+export const useSession = () => {
+  const [data, setData] = useState<JwtPayload | null>(null);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
+    const token = localStorage.getItem("token");
+    if (!token) {
+      setLoading(false);
+      return;
+    }
+
     try {
-      const token = localStorage.getItem("token");
-      if (!token) {
-        throw new Error("Token no encontrado");
+      const decoded = jwtDecode<JwtPayload>(token);
+      const now = Date.now() / 1000;
+
+      if (decoded.exp < now) {
+        // Token expirado
+        localStorage.removeItem("token");
+        setData(null);
+      } else {
+        setData(decoded);
+
+        // Programar logout automático al momento exacto de expiración
+        const timeout = setTimeout(() => {
+          localStorage.removeItem("token");
+          setData(null);
+          window.location.reload();
+        }, (decoded.exp - now) * 1000);
+
+        return () => clearTimeout(timeout);
       }
-
-      // Descomentar para funcionamiento real
-      /* const decoded = jwtDecode<UserData>(token); */
-
-      setState({
-        loading: false,
-        error: null,
-        data: {
-          id: "12345", // Reemplazar con decoded.id
-          name: "Usuario Ejemplo", // Reemplazar con decoded.name
-          email: ""
-        },
-      });
-    } catch (err: any) {
-      setState({
-        loading: false,
-        error: err.message || "Error al decodificar el token",
-        data: null,
-      });
+    } catch (e) {
+      console.error("Token inválido", e);
+      localStorage.removeItem("token");
+    } finally {
+      setLoading(false);
     }
   }, []);
 
-  return state;
-}
+  return { loading, data };
+};