Test Public Side

Elecciones-Web/frontend/src/main.tsx

@@ -1,17 +1,83 @@
 // src/main.tsx
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-// Crear un cliente de React Query
-const queryClient = new QueryClient()
+import { BancasWidget } from './components/BancasWidget'
+import { CongresoWidget } from './components/CongresoWidget'
+import MapaBsAs from './components/MapaBsAs'
+import { DipSenTickerWidget } from './components/DipSenTickerWidget'
+import { TelegramaWidget } from './components/TelegramaWidget'
+import { ConcejalesWidget } from './components/ConcejalesWidget'
+import MapaBsAsSecciones from './components/MapaBsAsSecciones'
+import { SenadoresWidget } from './components/SenadoresWidget'
+import { DiputadosWidget } from './components/DiputadosWidget'
+import { ResumenGeneralWidget } from './components/ResumenGeneralWidget'
+import { SenadoresTickerWidget } from './components/SenadoresTickerWidget'
+import { DiputadosTickerWidget } from './components/DiputadosTickerWidget'
+import { ConcejalesTickerWidget } from './components/ConcejalesTickerWidget'
+import { DiputadosPorSeccionWidget } from './components/DiputadosPorSeccionWidget'
+import { SenadoresPorSeccionWidget } from './components/SenadoresPorSeccionWidget'
+import { ConcejalesPorSeccionWidget } from './components/ConcejalesPorSeccionWidget'
 
-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>,
-)
+import './index.css';
+import { DevApp } from './components/DevApp';
+
+const queryClient = new QueryClient();
+
+// Mapeamos el nombre del widget (del atributo data) al componente de React
+const WIDGET_MAP: Record<string, React.ElementType> = {
+    'resumen-senadores': SenadoresWidget,
+    'resumen-diputados': DiputadosWidget,
+    'resumen-concejales': ConcejalesWidget,
+    'congreso-provincial': CongresoWidget,
+    'distribucion-bancas': BancasWidget,
+    'mapa-municipios': MapaBsAs,
+    'mapa-secciones': MapaBsAsSecciones,
+    'consulta-telegramas': TelegramaWidget,
+    'ticker-senadores': SenadoresTickerWidget,
+    'ticker-diputados': DiputadosTickerWidget,
+    'ticker-concejales': ConcejalesTickerWidget,
+    'ticker-dip-sen': DipSenTickerWidget,
+    'resumen-general': ResumenGeneralWidget,
+    'diputados-por-seccion': DiputadosPorSeccionWidget,
+    'senadores-por-seccion': SenadoresPorSeccionWidget,
+    'concejales-por-seccion': ConcejalesPorSeccionWidget,
+};
+
+// Vite establece `import.meta.env.DEV` a `true` cuando ejecutamos 'npm run dev'
+if (import.meta.env.DEV) {
+    // --- MODO DESARROLLO ---
+    // Renderizamos nuestra página de showcase en el div#root
+    ReactDOM.createRoot(document.getElementById('root')!).render(
+        <React.StrictMode>
+            <QueryClientProvider client={queryClient}>
+                <DevApp />
+            </QueryClientProvider>
+        </React.StrictMode>
+    );
+} else {
+    // --- MODO PRODUCCIÓN ---
+    // Exponemos la función de renderizado para el bootstrap.js
+    const renderWidgets = () => {
+        const widgetContainers = document.querySelectorAll('[data-elecciones-widget]');
+        widgetContainers.forEach(container => {
+            const widgetName = (container as HTMLElement).dataset.eleccionesWidget;
+            if (widgetName && WIDGET_MAP[widgetName]) {
+                const WidgetComponent = WIDGET_MAP[widgetName];
+                const root = ReactDOM.createRoot(container);
+                root.render(
+                    <React.StrictMode>
+                        <QueryClientProvider client={queryClient}>
+                            <WidgetComponent />
+                        </QueryClientProvider>
+                    </React.StrictMode>
+                );
+            }
+        });
+    };
+
+    (window as any).EleccionesWidgets = {
+        render: renderWidgets
+    };
+}