Feat Widgets 1930

Elecciones-Web/frontend/src/components/SenadoresWidget.tsx

@@ -1,19 +1,25 @@
 // src/components/SenadoresWidget.tsx
-import { useMemo } from 'react';
+import { useState, useEffect, useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import { getResumenProvincial, getConfiguracionPublica } from '../apiService';
-import type { CategoriaResumen, ResultadoTicker } from '../types/types';
+import Select from 'react-select'; // Importamos react-select
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService'; // Usamos las funciones genéricas
+import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
 
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
 
+// Estilos para el selector, podemos moverlos a un archivo común más adelante
+const customSelectStyles = {
+  control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
+  menu: (base: any) => ({ ...base, zIndex: 10 }),
+};
+
+// Constante para la categoría de este widget
+const CATEGORIA_ID = 5; // Senadores
+
 export const SenadoresWidget = () => {
-  const { data: categorias, isLoading, error } = useQuery<CategoriaResumen[]>({
-    queryKey: ['resumenProvincial'],
-    queryFn: getResumenProvincial,
-    refetchInterval: 30000,
-  });
+  const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
 
   const { data: configData } = useQuery({
     queryKey: ['configuracionPublica'],
@@ -21,24 +27,44 @@ export const SenadoresWidget = () => {
     staleTime: 0,
   });
 
+  // Usamos la clave de configuración del Ticker, ya que es para Senadores/Diputados
   const cantidadAMostrar = parseInt(configData?.TickerResultadosCantidad || '5', 10);
 
-  // Usamos useMemo para encontrar los datos específicos de Senadores (ID 5)
-  const senadoresData = useMemo(() => {
-    return categorias?.find(c => c.categoriaId === 5);
-  }, [categorias]);
+  const { data: municipios = [], isLoading: isLoadingMunicipios } = useQuery<MunicipioSimple[]>({
+    queryKey: ['municipios', CATEGORIA_ID], // Key única para la caché
+    queryFn: () => getMunicipios(CATEGORIA_ID), // Pasamos el ID de la categoría
+  });
 
-  if (isLoading) return <div className="ticker-card loading">Cargando...</div>;
-  if (error || !senadoresData) return <div className="ticker-card error">Datos de Senadores no disponibles.</div>;
+  // useEffect para establecer "LA PLATA" por defecto
+  useEffect(() => {
+    if (municipios.length > 0 && !selectedMunicipio) {
+      const laPlata = municipios.find(m => m.nombre.toUpperCase() === 'LA PLATA');
+      if (laPlata) {
+        setSelectedMunicipio({ value: laPlata.id, label: laPlata.nombre });
+      }
+    }
+  }, [municipios, selectedMunicipio]);
 
-  // Lógica para "Otros" aplicada solo a los resultados de Senadores
-  let displayResults: ResultadoTicker[] = senadoresData.resultados;
-  if (senadoresData.resultados.length > cantidadAMostrar) {
-    const topParties = senadoresData.resultados.slice(0, cantidadAMostrar - 1);
-    const otherParties = senadoresData.resultados.slice(cantidadAMostrar - 1);
-    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + party.porcentaje, 0);
+  const municipioOptions = useMemo(() =>
+    municipios
+      .map(m => ({ value: m.id, label: m.nombre }))
+      .sort((a, b) => a.label.localeCompare(b.label)),
+    [municipios]);
+
+  const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
+    queryKey: ['resultadosMunicipio', selectedMunicipio?.value, CATEGORIA_ID],
+    queryFn: () => getResultadosPorMunicipio(selectedMunicipio!.value, CATEGORIA_ID),
+    enabled: !!selectedMunicipio,
+  });
+
+  // Lógica para "Otros"
+  let displayResults: ResultadoTicker[] = resultados || [];
+  if (resultados && resultados.length > cantidadAMostrar) {
+    const topParties = resultados.slice(0, cantidadAMostrar - 1);
+    const otherParties = resultados.slice(cantidadAMostrar - 1);
+    const otrosPorcentaje = otherParties.reduce((sum, party) => sum + (party.porcentaje || 0), 0);
     const otrosEntry: ResultadoTicker = {
-      id: `otros-senadores`,
+      id: `otros-senadores-${selectedMunicipio?.value}`,
       nombre: 'Otros',
       nombreCorto: 'Otros',
       color: '#888888',
@@ -47,20 +73,27 @@ export const SenadoresWidget = () => {
       porcentaje: otrosPorcentaje,
     };
     displayResults = [...topParties, otrosEntry];
-  } else {
-    displayResults = senadoresData.resultados.slice(0, cantidadAMostrar);
+  } else if (resultados) {
+    displayResults = resultados.slice(0, cantidadAMostrar);
   }
 
   return (
     <div className="ticker-card">
       <div className="ticker-header">
-        <h3>{senadoresData.categoriaNombre.replace(' PROVINCIALES', '')}</h3>
-        <div className="ticker-stats">
-          <span>Mesas: <strong>{formatPercent(senadoresData.estadoRecuento?.mesasTotalizadasPorcentaje || 0)}</strong></span>
-          <span>Part: <strong>{formatPercent(senadoresData.estadoRecuento?.participacionPorcentaje || 0)}</strong></span>
-        </div>
+        <h3>SENADORES POR MUNICIPIO</h3>
+        <Select
+          options={municipioOptions}
+          value={selectedMunicipio}
+          onChange={(option) => setSelectedMunicipio(option)}
+          isLoading={isLoadingMunicipios}
+          placeholder="Buscar municipio..."
+          isClearable
+          styles={customSelectStyles}
+        />
       </div>
       <div className="ticker-results">
+        {(isLoadingMunicipios || (isLoadingResultados && selectedMunicipio)) && <p>Cargando...</p>}
+        {!selectedMunicipio && !isLoadingMunicipios && <p style={{ textAlign: 'center', color: '#666' }}>Seleccione un municipio.</p>}
         {displayResults.map(partido => (
           <div key={partido.id} className="ticker-party">
             <div className="party-logo">