Skip to content

Commit f725ab3

Browse files
AnderssonProgrammingAnderssonProgramming
committed
Add avatarUser and Logout, transition is not working
1 parent f6a5b71 commit f725ab3

File tree

2 files changed

+81
-283
lines changed

2 files changed

+81
-283
lines changed

‎src/App.js‎

Lines changed: 81 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
1+
// App.js
12
import React, { useState, useEffect } from "react";
23
import {
34
BrowserRouter as Router,
45
Route,
56
Routes,
67
Link,
78
useLocation,
8-
Navigate
9+
Navigate,
10+
useNavigate,
911
} from "react-router-dom";
10-
import { ReactComponent as House } from './assets/icons/house-user_11269953 1.svg';
11-
import { ReactComponent as Room } from './assets/icons/workshop_14672030 1.svg';
12-
import { ReactComponent as User } from './assets/icons/User.svg';
13-
import Home from './pages/Home/Home.js';
14-
import LoginPage from './pages/Login/LoginPage.jsx';
15-
import AdministratorHome from './pages/Administrator/AdministratorHome.jsx';
16-
import './App.css';
12+
import { ReactComponent as House } from "./assets/icons/house-user_11269953 1.svg";
13+
import { ReactComponent as Room } from "./assets/icons/workshop_14672030 1.svg";
14+
import { ReactComponent as UserIcon } from "./assets/icons/User.svg";
15+
import Home from "./pages/Home/Home.js";
16+
import LoginPage from "./pages/Login/LoginPage.jsx";
17+
import AdministratorHome from "./pages/Administrator/AdministratorHome.jsx";
18+
import styled from "styled-components";
19+
import "./App.css";
1720

1821
/**
1922
* Configuración de rutas según el rol del usuario.
@@ -22,11 +25,9 @@ const routesConfig = {
2225
admin: [
2326
{ path: "/administrador", name: "Panel de Control", icon: <House className="svg" /> },
2427
{ path: "/administrador/salones", name: "Gestión de Salones", icon: <Room className="svg" /> },
25-
{ path: "/administrador/usuarios", name: "Gestión de Usuarios", icon: <User className="svg" /> },
26-
],
27-
profe: [
28-
{ path: "/home", name: "Gestión de Reservas", icon: <House className="svg" /> },
28+
{ path: "/administrador/usuarios", name: "Gestión de Usuarios", icon: <UserIcon className="svg" /> },
2929
],
30+
profe: [{ path: "/home", name: "Gestión de Reservas", icon: <House className="svg" /> }],
3031
};
3132

3233
const Menu = ({ user }) => {
@@ -45,11 +46,12 @@ const Menu = ({ user }) => {
4546
);
4647
};
4748

48-
/**
49-
* Componente de encabezado que muestra el título de la página y el saludo al usuario.
50-
*/
51-
const Header = ({ user }) => {
49+
//
50+
// HEADER: muestra título, saludo, avatar y botón de logout
51+
//
52+
const Header = ({ user, onLogout }) => {
5253
const location = useLocation();
54+
const navigate = useNavigate();
5355
let title = "Elysium";
5456

5557
if (user) {
@@ -77,87 +79,96 @@ const Header = ({ user }) => {
7779
</span>
7880
</div>
7981
<div className="user-info">
80-
82+
<UserAvatar
83+
src="https://img.freepik.com/vector-gratis/establecimiento-circulos-usuarios_78370-4704.jpg?ga=GA1.1.204243624.1732496744&semt=ais_hybrid"
84+
alt="Avatar de usuario"
85+
/>
86+
<LogoutIcon
87+
src="https://cdn.builder.io/api/v1/image/assets/TEMP/1954f6c7c642021490080ffd4c81bc9798bf0beb?placeholderIfAbsent=true"
88+
alt="Logout"
89+
onClick={() => {
90+
onLogout();
91+
navigate("/"); // Regresa al LoginPage
92+
}}
93+
/>
8194
</div>
8295
</div>
8396
);
8497
};
8598

86-
/**
87-
* Componente principal de la aplicación.
88-
*/
99+
const UserAvatar = styled.img`
100+
width: 40px;
101+
height: 40px;
102+
object-fit: contain;
103+
border-radius: 50%;
104+
`;
105+
106+
const LogoutIcon = styled.img`
107+
width: 32px;
108+
height: 32px;
109+
cursor: pointer;
110+
`;
111+
112+
//
113+
// Componente principal de la aplicación
114+
//
89115
function App() {
116+
// El usuario se establecerá a través del LoginPage, por lo que no simulamos nada aquí.
90117
const [user, setUser] = useState(null);
91118
const [loading, setLoading] = useState(true);
92119

120+
// Simulación de carga inicial; en producción, no se simula usuario.
93121
useEffect(() => {
94-
const simulacionData = {
95-
"idInstitucional": 12,
96-
"nombre": "Santi",
97-
"apellido": "Castroso",
98-
"correoInstitucional": "[email protected]",
99-
"activo": true,
100-
"isAdmin": true,
101-
"password": null
102-
}
103-
setUser(simulacionData);
104122
setLoading(false);
105123
}, []);
106124

107-
useEffect(() => {
108-
if (user != null) {
109-
const colorVariable = user.isAdmin
110-
? "var(--variable-collection-user-admin)"
111-
: "var(--variable-collection-user-estandar)";
112-
document.documentElement.style.setProperty(
113-
"--variable-collection-current-color",
114-
colorVariable
115-
);
116-
}
117-
}, [user]);
118-
119125
if (loading) return <div>Cargando...</div>;
120126

121127
return (
122128
<Router>
123129
<Routes>
130+
{/* Si no hay usuario autenticado, se muestra LoginPage */}
124131
{!user ? (
125132
<>
126133
<Route path="/" element={<LoginPage onLogin={setUser} />} />
127-
<Route path="*" element={<Navigate to="/" />} />
134+
<Route path="*" element={<Navigate to="/" replace />} />
128135
</>
129-
) : (
130-
<Route path="/*" element={
131-
<div className="content">
132-
<div className="navBar">
133-
<Menu user={user} />
134-
</div>
135-
<div className="panel">
136-
<Header user={user} />
137-
<div className="container">
138-
<Routes>
139-
{user.isAdmin ? (
140-
<>
141-
<Route path="/administrador" element={<AdministratorHome />} />
142-
<Route path="/administrador/salones" element={<div>Gestión de Salones</div>} />
143-
<Route path="/administrador/usuarios" element={<div>Gestión de Usuarios</div>} />
144-
<Route path="*" element={<Navigate to="/administrador" />} />
145-
</>
146-
) : (
147-
<>
148-
<Route path="/home" element={<Home />} />
149-
<Route path="*" element={<Navigate to="/home" />} />
150-
</>
151-
)}
152-
</Routes>
136+
) : (
137+
// Una vez autenticado, se muestra la aplicación completa (Header, Menu, contenido)
138+
<Route
139+
path="/*"
140+
element={
141+
<div className="content">
142+
<div className="navBar">
143+
<Menu user={user} />
144+
</div>
145+
<div className="panel">
146+
<Header user={user} onLogout={() => setUser(null)} />
147+
<div className="container">
148+
<Routes>
149+
{user.isAdmin ? (
150+
<>
151+
<Route path="/administrador" element={<AdministratorHome />} />
152+
<Route path="/administrador/salones" element={<div>Gestión de Salones</div>} />
153+
<Route path="/administrador/usuarios" element={<div>Gestión de Usuarios</div>} />
154+
<Route path="*" element={<Navigate to="/administrador" />} />
155+
</>
156+
) : (
157+
<>
158+
<Route path="/home" element={<Home />} />
159+
<Route path="*" element={<Navigate to="/home" />} />
160+
</>
161+
)}
162+
</Routes>
163+
</div>
153164
</div>
154165
</div>
155-
</div>
156-
}/>
166+
}
167+
/>
157168
)}
158169
</Routes>
159170
</Router>
160171
);
161172
}
162173

163-
export default App;
174+
export default App;

0 commit comments

Comments
 (0)