Fase 1 (isla 2): estado del servidor de la portada en React/TSX

Segunda isla de la home: la tabla de estado (nombre, online, login, hora,
dirección) pasa de plantilla Django a componente React.

- API: home_status_api -> /api/home/status/ (server_name, address, expansion,
  online_characters, status). Reutiliza check_server_status y
  get_online_characters_count de views/pages.
- React: ServerStatus.tsx (fetch + reloj en vivo con setInterval, mismas clases
  CSS). El entry home.tsx ahora monta dos islas: #home-news-app y #home-status-app.
- partials/noticias.html: la <table> de estado se sustituye por el contenedor.

Verificado: check OK, ambos endpoints 200, la home monta las dos islas.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-07-12 20:22:32 +00:00
parent 98c3cbdbc6
commit d612b7916c
6 changed files with 115 additions and 32 deletions
+11 -9
View File
@@ -1,14 +1,16 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { NewsList } from '../components/NewsList'
import { ServerStatus } from '../components/ServerStatus'
// Isla de la portada: monta la lista de noticias (React) donde Django deja
// el contenedor #home-news-app. El resto de la página sigue siendo Django.
const el = document.getElementById('home-news-app')
if (el) {
createRoot(el).render(
<StrictMode>
<NewsList />
</StrictMode>,
)
// Islas de la portada: cada componente React se monta donde Django deja su
// contenedor. El resto de la página sigue siendo Django.
function mount(id: string, node: React.ReactElement) {
const el = document.getElementById(id)
if (el) {
createRoot(el).render(<StrictMode>{node}</StrictMode>)
}
}
mount('home-news-app', <NewsList />)
mount('home-status-app', <ServerStatus />)