From 9be62937bdc4a2f6096a5486ce0d51527e644b7c Mon Sep 17 00:00:00 2001 From: dmolinari Date: Tue, 28 Oct 2025 12:26:49 -0300 Subject: [PATCH] Fase 3: Refactorizado SignalR a un hook reutilizable (useSignalR) y conectado al Dashboard. --- .../Controllers/TitularesController.cs | 39 ++-- .../src/Titulares.Api/Hubs/TitularesHub.cs | 12 ++ backend/src/Titulares.Api/Program.cs | 31 +-- frontend/package-lock.json | 182 +++++++++++++++++- frontend/package.json | 1 + frontend/src/components/Dashboard.tsx | 68 ++++--- frontend/src/hooks/useSignalR.ts | 66 +++++++ frontend/src/services/apiService.ts | 2 +- 8 files changed, 347 insertions(+), 54 deletions(-) create mode 100644 backend/src/Titulares.Api/Hubs/TitularesHub.cs create mode 100644 frontend/src/hooks/useSignalR.ts diff --git a/backend/src/Titulares.Api/Controllers/TitularesController.cs b/backend/src/Titulares.Api/Controllers/TitularesController.cs index 6aea4ca..7f36d0e 100644 --- a/backend/src/Titulares.Api/Controllers/TitularesController.cs +++ b/backend/src/Titulares.Api/Controllers/TitularesController.cs @@ -1,7 +1,9 @@ // backend/src/Titulares.Api/Controllers/TitularesController.cs using Microsoft.AspNetCore.Mvc; +using Microsoft.AspNetCore.SignalR; using Titulares.Api.Data; +using Titulares.Api.Hubs; using Titulares.Api.Models; namespace Titulares.Api.Controllers; @@ -11,10 +13,20 @@ namespace Titulares.Api.Controllers; public class TitularesController : ControllerBase { private readonly TitularRepositorio _repositorio; + private readonly IHubContext _hubContext; - public TitularesController(TitularRepositorio repositorio) + public TitularesController(TitularRepositorio repositorio, IHubContext hubContext) { _repositorio = repositorio; + _hubContext = hubContext; + } + + private async Task NotificarCambios() + { + var titularesActualizados = await _repositorio.ObtenerTodosAsync(); + // Enviamos un mensaje llamado "TitularesActualizados" a TODOS los clientes conectados + // y les pasamos la lista completa y actualizada. + await _hubContext.Clients.All.SendAsync("TitularesActualizados", titularesActualizados); } [HttpGet] @@ -27,40 +39,35 @@ public class TitularesController : ControllerBase [HttpPost] public async Task CrearManual([FromBody] CrearTitularDto titularDto) { - if (!ModelState.IsValid) - { - return BadRequest(ModelState); - } var nuevoId = await _repositorio.CrearManualAsync(titularDto); + await NotificarCambios(); // Notificamos después de crear return CreatedAtAction(nameof(ObtenerTodos), new { id = nuevoId }, null); } [HttpPut("{id}")] public async Task Actualizar(int id, [FromBody] ActualizarTitularDto titularDto) { - if (!ModelState.IsValid) - { - return BadRequest(ModelState); - } var resultado = await _repositorio.ActualizarTextoAsync(id, titularDto); - return resultado ? NoContent() : NotFound(); + if (!resultado) return NotFound(); + await NotificarCambios(); // Notificamos después de actualizar + return NoContent(); } [HttpPut("reordenar")] public async Task Reordenar([FromBody] List ordenes) { - if (ordenes == null || !ordenes.Any()) - { - return BadRequest("La lista de órdenes no puede estar vacía."); - } var resultado = await _repositorio.ActualizarOrdenAsync(ordenes); - return resultado ? Ok() : StatusCode(500, "Error al actualizar el orden."); + if (!resultado) return StatusCode(500, "Error al actualizar el orden."); + await NotificarCambios(); // Notificamos después de reordenar + return Ok(); } [HttpDelete("{id}")] public async Task Eliminar(int id) { var resultado = await _repositorio.EliminarAsync(id); - return resultado ? NoContent() : NotFound(); + if (!resultado) return NotFound(); + await NotificarCambios(); // Notificamos después de eliminar + return NoContent(); } } \ No newline at end of file diff --git a/backend/src/Titulares.Api/Hubs/TitularesHub.cs b/backend/src/Titulares.Api/Hubs/TitularesHub.cs new file mode 100644 index 0000000..d16dea6 --- /dev/null +++ b/backend/src/Titulares.Api/Hubs/TitularesHub.cs @@ -0,0 +1,12 @@ +// backend/src/Titulares.Api/Hubs/TitularesHub.cs + +using Microsoft.AspNetCore.SignalR; + +namespace Titulares.Api.Hubs; + +// Esta clase es el punto de conexión para los clientes de SignalR. +// No necesitamos añadirle métodos personalizados porque solo enviaremos +// mensajes desde el servidor hacia los clientes. +public class TitularesHub : Hub +{ +} \ No newline at end of file diff --git a/backend/src/Titulares.Api/Program.cs b/backend/src/Titulares.Api/Program.cs index 86bbdca..285ef56 100644 --- a/backend/src/Titulares.Api/Program.cs +++ b/backend/src/Titulares.Api/Program.cs @@ -1,35 +1,34 @@ // backend/src/Titulares.Api/Program.cs using Titulares.Api.Data; +using Titulares.Api.Hubs; // Añadir este using var builder = WebApplication.CreateBuilder(args); -// 1. Añadir servicios al contenedor. -// =================================== - -// Añadimos los servicios para los controladores API +// Add services to the container. builder.Services.AddControllers(); - builder.Services.AddEndpointsApiExplorer(); builder.Services.AddSwaggerGen(); // Añadimos nuestro repositorio personalizado builder.Services.AddSingleton(); -// Añadimos los servicios de autorización (necesario para app.UseAuthorization) -builder.Services.AddAuthorization(); - // Añadimos la política de CORS builder.Services.AddCors(options => { options.AddPolicy("AllowReactApp", builder => { - builder.WithOrigins("http://localhost:5174") + builder.WithOrigins("http://localhost:5173") .AllowAnyHeader() .AllowAnyMethod() .AllowCredentials(); }); }); +builder.Services.AddSignalR(); + +// Añadimos los servicios de autorización (necesario para app.UseAuthorization) +builder.Services.AddAuthorization(); + // 2. Construir la aplicación. // ========================== var app = builder.Build(); @@ -43,15 +42,21 @@ if (app.Environment.IsDevelopment()) app.UseSwaggerUI(); } -app.UseHttpsRedirection(); +// COMENTAMOS LA REDIRECCIÓN HTTPS PORQUE TRABAJAMOS CON HTTP +// app.UseHttpsRedirection(); -// Usamos la política de CORS que definimos +// 1. Activa el enrutamiento para que la app sepa a dónde va la petición. +app.UseRouting(); + +// 2. APLICA LA POLÍTICA DE CORS. app.UseCors("AllowReactApp"); -// Usamos la autorización +// 3. Usamos la autorización. app.UseAuthorization(); -// Mapeamos los controladores para que la API responda a las rutas +// 4. Mapeamos los endpoints (Controladores y Hubs). app.MapControllers(); +app.MapHub("/titularesHub"); + app.Run(); \ No newline at end of file diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d324ede..b2a8b42 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,6 +13,7 @@ "@dnd-kit/utilities": "^3.2.2", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", + "@microsoft/signalr": "^9.0.6", "@mui/icons-material": "^7.3.4", "@mui/material": "^7.3.4", "axios": "^1.13.0", @@ -1217,6 +1218,19 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@microsoft/signalr": { + "version": "9.0.6", + "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-9.0.6.tgz", + "integrity": "sha512-DrhgzFWI9JE4RPTsHYRxh4yr+OhnwKz8bnJe7eIi7mLLjqhJpEb62CiUy/YbFvLqLzcGzlzz1QWgVAW0zyipMQ==", + "license": "MIT", + "dependencies": { + "abort-controller": "^3.0.0", + "eventsource": "^2.0.2", + "fetch-cookie": "^2.0.3", + "node-fetch": "^2.6.7", + "ws": "^7.5.10" + } + }, "node_modules/@mui/core-downloads-tracker": { "version": "7.3.4", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.4.tgz", @@ -2214,6 +2228,18 @@ "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, + "node_modules/abort-controller": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", + "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==", + "license": "MIT", + "dependencies": { + "event-target-shim": "^5.0.0" + }, + "engines": { + "node": ">=6.5" + } + }, "node_modules/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", @@ -2904,6 +2930,24 @@ "node": ">=0.10.0" } }, + "node_modules/event-target-shim": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz", + "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/eventsource": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz", + "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2965,6 +3009,16 @@ "reusify": "^1.0.4" } }, + "node_modules/fetch-cookie": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-2.2.0.tgz", + "integrity": "sha512-h9AgfjURuCgA2+2ISl8GbavpUdR+WGAM2McW/ovn4tVccegp8ZqCKWSBR8uRdM8dDNlx5WdKRWxBYUwteLDCNQ==", + "license": "Unlicense", + "dependencies": { + "set-cookie-parser": "^2.4.8", + "tough-cookie": "^4.0.0" + } + }, "node_modules/file-entry-cache": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz", @@ -3593,6 +3647,26 @@ "dev": true, "license": "MIT" }, + "node_modules/node-fetch": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz", + "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==", + "license": "MIT", + "dependencies": { + "whatwg-url": "^5.0.0" + }, + "engines": { + "node": "4.x || >=6.0.0" + }, + "peerDependencies": { + "encoding": "^0.1.0" + }, + "peerDependenciesMeta": { + "encoding": { + "optional": true + } + } + }, "node_modules/node-releases": { "version": "2.0.26", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.26.tgz", @@ -3805,16 +3879,33 @@ "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", "license": "MIT" }, + "node_modules/psl": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz", + "integrity": "sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==", + "license": "MIT", + "dependencies": { + "punycode": "^2.3.1" + }, + "funding": { + "url": "https://github.com/sponsors/lupomontero" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", - "dev": true, "license": "MIT", "engines": { "node": ">=6" } }, + "node_modules/querystringify": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", + "license": "MIT" + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", @@ -3889,6 +3980,12 @@ "react-dom": ">=16.6.0" } }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "license": "MIT" + }, "node_modules/resolve": { "version": "1.22.11", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz", @@ -4011,6 +4108,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -4158,6 +4261,27 @@ "node": ">=8.0" } }, + "node_modules/tough-cookie": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz", + "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==", + "license": "BSD-3-Clause", + "dependencies": { + "psl": "^1.1.33", + "punycode": "^2.1.1", + "universalify": "^0.2.0", + "url-parse": "^1.5.3" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==", + "license": "MIT" + }, "node_modules/ts-api-utils": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz", @@ -4235,6 +4359,15 @@ "dev": true, "license": "MIT" }, + "node_modules/universalify": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz", + "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==", + "license": "MIT", + "engines": { + "node": ">= 4.0.0" + } + }, "node_modules/update-browserslist-db": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.4.tgz", @@ -4276,6 +4409,16 @@ "punycode": "^2.1.0" } }, + "node_modules/url-parse": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz", + "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==", + "license": "MIT", + "dependencies": { + "querystringify": "^2.1.1", + "requires-port": "^1.0.0" + } + }, "node_modules/vite": { "version": "7.1.12", "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz", @@ -4382,6 +4525,22 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==", + "license": "BSD-2-Clause" + }, + "node_modules/whatwg-url": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz", + "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==", + "license": "MIT", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", @@ -4408,6 +4567,27 @@ "node": ">=0.10.0" } }, + "node_modules/ws": { + "version": "7.5.10", + "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.10.tgz", + "integrity": "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==", + "license": "MIT", + "engines": { + "node": ">=8.3.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": "^5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", diff --git a/frontend/package.json b/frontend/package.json index 17b3381..3bfddc6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "@dnd-kit/utilities": "^3.2.2", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", + "@microsoft/signalr": "^9.0.6", "@mui/icons-material": "^7.3.4", "@mui/material": "^7.3.4", "axios": "^1.13.0", diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx index 3007ee3..57e9e67 100644 --- a/frontend/src/components/Dashboard.tsx +++ b/frontend/src/components/Dashboard.tsx @@ -1,11 +1,13 @@ // frontend/src/components/Dashboard.tsx -import { useEffect, useState } from 'react'; -import { Box, Button, Typography, Stack } from '@mui/material'; +import { useEffect, useState, useCallback } from 'react'; +import { Box, Button, Typography, Stack, Chip } from '@mui/material'; import AddIcon from '@mui/icons-material/Add'; import SyncIcon from '@mui/icons-material/Sync'; + import type { Titular } from '../types'; import * as api from '../services/apiService'; +import { useSignalR } from '../hooks/useSignalR'; import FormularioConfiguracion from './FormularioConfiguracion'; import TablaTitulares from './TablaTitulares'; import AddTitularModal from './AddTitularModal'; @@ -14,30 +16,36 @@ const Dashboard = () => { const [titulares, setTitulares] = useState([]); const [modalOpen, setModalOpen] = useState(false); - const cargarTitulares = async () => { - try { - const data = await api.obtenerTitulares(); - setTitulares(data); - } catch (error) { - console.error("Error al cargar titulares:", error); - } - }; + // Usamos useCallback para que la función de callback no se recree en cada render, + // evitando que el useEffect del hook se ejecute innecesariamente. + const onTitularesActualizados = useCallback((titularesActualizados: Titular[]) => { + console.log("Datos recibidos desde SignalR:", titularesActualizados); + setTitulares(titularesActualizados); + }, []); // El array vacío significa que esta función nunca cambiará + // Usamos nuestro hook y le pasamos el evento que nos interesa escuchar + const { connectionStatus } = useSignalR([ + { eventName: 'TitularesActualizados', callback: onTitularesActualizados } + ]); + + // La carga inicial de datos sigue siendo necesaria por si el componente se monta + // antes de que llegue la primera notificación de SignalR. useEffect(() => { - cargarTitulares(); + api.obtenerTitulares() + .then(setTitulares) + .catch(error => console.error("Error al cargar titulares:", error)); }, []); const handleReorder = async (titularesReordenados: Titular[]) => { - setTitulares(titularesReordenados); // Actualización optimista de la UI - const payload = titularesReordenados.map((item, index) => ({ - id: item.id, - nuevoOrden: index - })); + setTitulares(titularesReordenados); + const payload = titularesReordenados.map((item, index) => ({ id: item.id, nuevoOrden: index })); try { await api.actualizarOrdenTitulares(payload); + // Ya no necesitamos hacer nada más, SignalR notificará a todos los clientes. } catch (err) { console.error("Error al reordenar:", err); - cargarTitulares(); // Revertir en caso de error + // En caso de error, volvemos a pedir los datos para no tener un estado inconsistente. + api.obtenerTitulares().then(setTitulares); } }; @@ -45,7 +53,7 @@ const Dashboard = () => { if (window.confirm('¿Estás seguro de que quieres eliminar este titular?')) { try { await api.eliminarTitular(id); - setTitulares(titulares.filter(t => t.id !== id)); // Actualizar UI + // SignalR se encargará de actualizar el estado. } catch (err) { console.error("Error al eliminar:", err); } @@ -55,18 +63,33 @@ const Dashboard = () => { const handleAdd = async (texto: string) => { try { await api.crearTitularManual(texto); - cargarTitulares(); // Recargar la lista para ver el nuevo titular + // SignalR se encargará de actualizar el estado. } catch (err) { console.error("Error al añadir titular:", err); } }; + const getStatusChip = () => { + switch (connectionStatus) { + case 'Connected': + return ; + case 'Reconnecting': + case 'Connecting': + return ; + default: + return ; + } + } + return ( <> - - Titulares Dashboard - + + + Titulares Dashboard + + {getStatusChip()} +