cumplida segunda consigna

bun.lock

@@ -6,6 +6,8 @@
       "dependencies": {
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
+        "react-router": "^7.9.4",
+        "react-router-dom": "^7.9.4",
       },
       "devDependencies": {
         "@eslint/js": "^9.36.0",
@@ -230,6 +232,8 @@
 
     "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
+    "cookie": ["cookie@1.0.2", "", {}, "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -406,6 +410,10 @@
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],
 
+    "react-router": ["react-router@7.9.4", "", { "dependencies": { "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" }, "optionalPeers": ["react-dom"] }, "sha512-SD3G8HKviFHg9xj7dNODUKDFgpG4xqD5nhyd0mYoB5iISepuZAvzSr8ywxgxKJ52yRzf/HWtVHc9AWwoTbljvA=="],
+
+    "react-router-dom": ["react-router-dom@7.9.4", "", { "dependencies": { "react-router": "7.9.4" }, "peerDependencies": { "react": ">=18", "react-dom": ">=18" } }, "sha512-f30P6bIkmYvnHHa5Gcu65deIXoA2+r3Eb6PJIAddvsT9aGlchMatJ51GgpU470aSqRRbFX22T70yQNUGuW3DfA=="],
+
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
     "reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
@@ -418,6 +426,8 @@
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
+    "set-cookie-parser": ["set-cookie-parser@2.7.1", "", {}, "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ=="],
+
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],

package.json

@@ -11,7 +11,9 @@
   },
   "dependencies": {
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "react-router": "^7.9.4",
+    "react-router-dom": "^7.9.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

src/App.css

@@ -1,6 +1,9 @@
 #root {
-  max-width: 1280px;
+    max-width: 1280px;
-  margin: 0 auto;
+    margin: 0 auto;
-  padding: 2rem;
+    padding: 2rem;
-  text-align: center;
+    text-align: center;
+}
+p {
+    margin: 0;
 }

src/App.tsx

@@ -1,37 +1,41 @@
-import { useEffect, useState } from 'react';
+import "./App.css";
-import './App.css';
+import { Link } from "react-router";
-import Alumno from './Components/Alumno';
+import { AppRouter } from "./Router/AppRouter";
-import { ObtenerUsuarios } from './services/servicioUsuario';
+import { Navbar } from "./Components/NavBar";
+import { useUsuario } from "./services/useUsuario";
+import { Seccion } from "./Components/Seccion";
+import type { PermissionLevel } from "./types/usuario";
 
 function App() {
-    const [loading, setLoading] = useState(true);
+  const { usuario, setPermissionLevel } = useUsuario();
-    const [alumnos, setAlumnos] = useState<any[]>([]);
+  return (
-
+    <>
-    useEffect(() => {
+      <Navbar>
-        async function cargarDatos() {
+        <Seccion>
-            setLoading(true);
+          <Link to="/home">Home</Link>
-            try {
+          {usuario?.permissionLevel.includes("ADMIN") && (
-                const data = await ObtenerUsuarios();
+            <Link to="/admin">Admin</Link>
-                setAlumnos(data);
+          )}
-            } catch (error) {
+          <Link to="/analytics">analytics</Link>
-                console.error('Error al obtener usuarios:', error);
+          <Link to="/about">About</Link>
-            } finally {
+        </Seccion>
-                setLoading(false);
+        <Seccion>
+          El permiso el usuario es:
+          <select
+            value={usuario?.permissionLevel[0] || "GUEST"}
+            onChange={(e) =>
+              setPermissionLevel(e.target.value as PermissionLevel)
             }
-        }
+          >
-
+            <option value="ADMIN">ADMIN</option>
-        cargarDatos();
+            <option value="USER">USER</option>
-    }, []);
+            <option value="GUEST">GUEST</option>
-
+          </select>
-    if (loading) return <div>Cargando...</div>;
+        </Seccion>
-
+      </Navbar>
-    return (
+      <AppRouter />
-        <div style={{ display: 'flex', flexDirection: 'row', gap: '1rem', flexWrap: 'wrap', justifyContent: "center"}}>
+    </>
-            {alumnos.map((x) => (
+  );
-                <Alumno key={x.id} data={x} />
-            ))}
-        </div>
-    );
 }
 
 export default App;

src/Components/Alumno.css

@@ -1,19 +0,0 @@
-.alumno{
-    padding: 1rem 1rem 1rem 1rem;
-}
-.b{
-    border:3px solid;
-    border-radius: 10px;
-}
-
-.b-rojo{
-    border-color: red;
-}
-
-.b-verde{
-    border-color: green;
-}
-
-p{
-    margin:0;
-}

src/Components/Alumno.tsx

@@ -1,44 +0,0 @@
-import { useState } from "react";
-import "./Alumno.css"
-import type { Usuario } from "../types/usuario";
-
-export default function Alumno({data}: {data: Usuario}){
-    const [alumno, setAlumno] = useState({ presente: false });
-    return (
-        <div id="aa"
-        className = {`alumno b ${alumno.presente ? "b-rojo" : "b-verde"}`}
-        >
-            {(alumno.presente === true ? (
-                <p>
-                    Presente
-                </p>
-            ) : (
-                <p>
-                    Ausente
-                </p>
-            ))}
-
-            <hr />
-            <div style={{ display: 'flex', flexDirection: 'column', gap:"10px" }}>
-                <p>
-                    Nombre: <b>{data.name}</b>
-                </p>
-
-                <p style={{ color: "gray" }}>
-                    Usuario: <b>{data.username}</b>
-                </p>
-
-                <p style={{ color: "gray" }}>
-                    Usuario: <b>{data.email}</b>
-                </p>
-            </div>
-            <hr />
-
-            <button onClick={() => setAlumno({
-                presente: alumno.presente ? false: true
-            })}>
-                toggle
-            </button>
-        </div>
-    );
-}

src/Components/ComponenteAdmin.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from "react";
+import { ObtenerUsuarios } from "../services/servicioUsuario";
+import type { Usuario } from "../types/usuario";
+
+export function ComponenteAdmin() {
+  const [usuarios, setUsuarios] = useState<Usuario[]>([]);
+
+  useEffect(() => {
+    async function fetchUsuarios() {
+      const data = await ObtenerUsuarios();
+      setUsuarios(data);
+    }
+    fetchUsuarios();
+  }, []);
+
+  return (
+    <>
+      <h1>Panel Admin</h1>
+      {usuarios.length > 0 && (
+        <ul>
+          {usuarios.map((x: Usuario) => (
+            <li key={x.username}>{x.username}</li>
+          ))}
+        </ul>
+      )}
+    </>
+  );
+}

src/Components/Dashboard.tsx

@@ -0,0 +1,3 @@
+export function Dashboard() {
+  return <h1>Dashboard</h1>;
+}

src/Components/NavBar.tsx

@@ -0,0 +1,27 @@
+import React, { type ReactNode } from "react";
+
+type NavbarProps = {
+  children?: ReactNode;
+};
+
+export const Navbar: React.FC<NavbarProps> = ({ children }) => {
+  return (
+    <nav
+      style={{
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        width: "100vdw",
+        backgroundColor: "black",
+        zIndex: 10,
+        display: "flex",
+        justifyContent: "space-between",
+        padding: "0 1rem",
+        gap: "1rem",
+      }}
+    >
+      {children}
+    </nav>
+  );
+};

src/Components/Seccion.tsx

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+
+interface Prop {
+  children?: ReactNode;
+}
+
+export function Seccion({ children }: Prop) {
+  return <div style={{ display: "flex", gap: "1rem" }}>{children}</div>;
+}

src/Router/AppRouter.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+import type { Usuario } from "../types/usuario";
+import { Routes } from "react-router";
+import { Route } from "react-router";
+import { Navigate } from "react-router";
+import { RutaProtegida } from "./RutaProtegida";
+import { ComponenteAdmin } from "../Components/ComponenteAdmin";
+import { Dashboard } from "../Components/Dashboard";
+import { useUsuario } from "../services/useUsuario";
+
+export function AppRouter() {
+  const { usuario } = useUsuario();
+
+  return (
+    <Routes>
+      <Route index element={<Dashboard />} />
+      <Route path="/home" element={<Dashboard />} />
+      <Route element={<RutaProtegida estaPermitido={!!usuario} />}>
+        <Route path="/about" element={<h1>About</h1>}></Route>
+        <Route path="/analytics" element={<h1>Estadisticas</h1>}></Route>
+      </Route>
+      <Route
+        path="/admin"
+        element={
+          <RutaProtegida
+            estaPermitido={
+              !!usuario && usuario.permissionLevel.includes("ADMIN")
+            }
+            redirectTo="/home"
+          >
+            <ComponenteAdmin></ComponenteAdmin>
+          </RutaProtegida>
+        }
+      ></Route>
+      <Route path="/*" element={<Navigate to="/home" />} />
+    </Routes>
+  );
+}

src/Router/RutaProtegida.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+import { Navigate, Outlet } from "react-router";
+
+interface RutaProtegidaProp {
+  estaPermitido: boolean;
+  children?: ReactNode;
+  redirectTo?: string;
+}
+
+export function RutaProtegida({
+  estaPermitido,
+  children,
+  redirectTo = "/home",
+}: RutaProtegidaProp) {
+  if (!estaPermitido) return <Navigate to={redirectTo}></Navigate>;
+
+  return children ? children : <Outlet />;
+}

src/main.tsx

@@ -1,10 +1,13 @@
-import { StrictMode } from 'react'
+import { StrictMode } from "react";
-import { createRoot } from 'react-dom/client'
+import { createRoot } from "react-dom/client";
-import './index.css'
+import "./index.css";
-import App from './App.tsx'
+import App from "./App.tsx";
+import { BrowserRouter } from "react-router";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
   </StrictMode>,
-)
+);

src/services/useUsuario.ts

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import type { PermissionLevel, Usuario } from "../types/usuario";
+
+export const useUsuario = () => {
+  const [usuario, setUsuario] = useState<Usuario>({
+    id: 1,
+    name: "Juan Pepe",
+    username: "jpepe",
+    email: "",
+    permissionLevel: ["GUEST"],
+  });
+
+  function setPermissionLevel(arg: PermissionLevel) {
+    setUsuario({ ...usuario, permissionLevel: [arg] });
+  }
+
+  return {
+    usuario,
+    setPermissionLevel,
+  };
+};

src/types/usuario.ts

@@ -1,6 +1,9 @@
 export interface Usuario {
-    id: number,
+  id: number;
-    name: string,
+  name: string;
-    username: string,
+  username: string;
-    email: string
+  email: string;
+  permissionLevel: [PermissionLevel];
 }
+
+export type PermissionLevel = "ADMIN" | "USER" | "GUEST";

vite.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from 'vite'
+import { defineConfig } from "vite";
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [
     react({
       babel: {
-        plugins: [['babel-plugin-react-compiler']],
+        plugins: [["babel-plugin-react-compiler"]],
       },
     }),
   ],
-})
+});