From 1e49d1ccce29086989ed8224f0170ea817542910 Mon Sep 17 00:00:00 2001
From: Alexis <isalexis.design@gmail.com>
Date: Thu, 28 May 2026 10:44:22 +0200
Subject: [PATCH] Refactor Header and AppRouter components for improved
 navigation and authentication handling. Introduced ProtectedHistoryRoute to
 restrict access to the History page for unauthenticated users, and adjusted
 NavTab component to enhance icon handling.

---
 frontend/src/components/layout/Header.jsx | 27 ++++++++++++-----------
 frontend/src/routers/AppRouter.jsx        | 13 ++++++++++-
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/layout/Header.jsx b/frontend/src/components/layout/Header.jsx
index 6efe21e..770f16d 100644
--- a/frontend/src/components/layout/Header.jsx
+++ b/frontend/src/components/layout/Header.jsx
@@ -3,7 +3,9 @@ import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { useAuth } from '../../context/AuthContext';
 import { FiLogIn, FiLogOut, FiEdit3, FiClock } from 'react-icons/fi';
 
-function NavTab({ to, isActive, icon: Icon, children }) {
+function NavTab({ to, isActive, icon, children }) {
+  const Icon = icon;
+
   return (
     <Link
       to={to}
@@ -97,20 +99,19 @@ export default function Header() {
         </Link>
 
         <div className="flex items-center gap-4 whitespace-nowrap">
-          {/* Misma navegación con o sin sesión: evita estilos distintos al loguearse */}
-          <nav
-            className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
-            aria-label="Secciones principales"
-          >
-            <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
-              Editor
-            </NavTab>
-            {isAuthenticated && (
+          {isAuthenticated && (
+            <nav
+              className="flex items-center gap-0.5 rounded-xl bg-slate-100/90 p-1"
+              aria-label="Secciones principales"
+            >
+              <NavTab to="/editor" isActive={isEditorActive} icon={FiEdit3}>
+                Editor
+              </NavTab>
               <NavTab to="/history" isActive={isHistoryActive} icon={FiClock}>
                 Historial
               </NavTab>
-            )}
-          </nav>
+            </nav>
+          )}
 
           {isAuthenticated ? (
             <div className="relative border-l border-slate-200 pl-4">
@@ -154,7 +155,7 @@ export default function Header() {
               )}
             </div>
           ) : (
-            <div className="border-l border-slate-200 pl-4">
+            <div>
               <AccederButton isActive={isLoginActive} />
             </div>
           )}
diff --git a/frontend/src/routers/AppRouter.jsx b/frontend/src/routers/AppRouter.jsx
index 3337675..e6efa81 100644
--- a/frontend/src/routers/AppRouter.jsx
+++ b/frontend/src/routers/AppRouter.jsx
@@ -4,6 +4,17 @@ import DocEditor from '../pages/DocEditor';
 import Login from '../pages/Login';
 import Register from '../pages/Register';
 import History from '../pages/History';
+import { useAuth } from '../context/AuthContext';
+
+function ProtectedHistoryRoute() {
+  const { isAuthenticated } = useAuth();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <History />;
+}
 
 export default function AppRouter() {
   return (
@@ -14,7 +25,7 @@ export default function AppRouter() {
           <Route path="/editor" element={<DocEditor />} />
           <Route path="/login" element={<Login />} />
           <Route path="/register" element={<Register />} />
-          <Route path="/history" element={<History />} />
+          <Route path="/history" element={<ProtectedHistoryRoute />} />
         </Routes>
       </MainLayout>
     </Router>