DyMW/react-router-demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cumplida segunda consigna

Browse Source
This commit is contained in:
fedpo
2025-10-21 18:02:33 -03:00
parent 38f1fd7258
commit b4b3edd088
16 changed files with 220 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
bun.lock
View File

@@ -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=="],

4
package.json
View File

@@ -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",

11
src/App.css
View File

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

66
src/App.tsx
View File

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

19
src/Components/Alumno.css
View File

@@ -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;
}

44
src/Components/Alumno.tsx
View File

@@ -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>
);
}

28
src/Components/ComponenteAdmin.tsx Normal file
View File

@@ -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>
)}
</>
);
}

3
src/Components/Dashboard.tsx Normal file
View File

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

27
src/Components/NavBar.tsx Normal file
View File

@@ -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>
);
};

9
src/Components/Seccion.tsx Normal file
View File

@@ -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>;
}

38
src/Router/AppRouter.tsx Normal file
View File

@@ -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>
);
}

18
src/Router/RutaProtegida.tsx Normal file
View File

@@ -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 />;
}

17
src/main.tsx
View File

@@ -1,10 +1,13 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
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>,
)
);

21
src/services/useUsuario.ts Normal file
View File

@@ -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,
};
};

11
src/types/usuario.ts
View File

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

8
vite.config.ts
View File

@@ -1,13 +1,13 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { defineConfig } from "vite";
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"]],
},
}),
],
})
});