Feat Widgets 1930

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

@@ -1,68 +1,62 @@
 // src/components/ConcejalesWidget.tsx
 import { useState, useMemo, useEffect } from 'react';
 import { useQuery } from '@tanstack/react-query';
-import Select from 'react-select'; // <-- 1. Importar react-select
-import { getMunicipios, getResultadosPorMunicipioYCategoria, getConfiguracionPublica } from '../apiService';
+import Select from 'react-select';
+import { getMunicipios, getResultadosPorMunicipio, getConfiguracionPublica } from '../apiService';
 import type { MunicipioSimple, ResultadoTicker } from '../types/types';
 import { ImageWithFallback } from './ImageWithFallback';
 import './TickerWidget.css';
 
 const formatPercent = (num: number) => `${(num || 0).toFixed(2).replace('.', ',')}%`;
-
-// Estilos personalizados para que el selector se vea bien
 const customSelectStyles = {
   control: (base: any) => ({ ...base, minWidth: '220px', border: '1px solid #ced4da' }),
-  menu: (base: any) => ({ ...base, zIndex: 10 }), // Para que el menú se superponga
+  menu: (base: any) => ({ ...base, zIndex: 10 }),
 };
 
+const CATEGORIA_ID = 7; // ID para Concejales
+
 export const ConcejalesWidget = () => {
-  // 2. Cambiamos el estado para que se adapte a react-select
   const [selectedMunicipio, setSelectedMunicipio] = useState<{ value: string; label: string } | null>(null);
 
+  // 1. Query para la configuración (se había eliminado por error)
   const { data: configData } = useQuery({
     queryKey: ['configuracionPublica'],
     queryFn: getConfiguracionPublica,
     staleTime: 0,
   });
 
-  // Usamos la clave de configuración correcta
+  // 2. Query para la lista de municipios
+  const { data: municipios = [], isLoading: isLoadingMunicipios } = useQuery<MunicipioSimple[]>({
+  // Usamos una clave genérica porque siempre pedimos la lista completa.
+  queryKey: ['municipios'], 
+  // Llamamos a la función sin argumentos para obtener todos los municipios.
+  queryFn: () => getMunicipios(), 
+});
+
   const cantidadAMostrar = parseInt(configData?.ConcejalesResultadosCantidad || '5', 10);
 
-  // 3. Query para obtener la lista de MUNICIPIOS
-  const { data: municipios = [], isLoading: isLoadingMunicipios } = useQuery<MunicipioSimple[]>({
-    queryKey: ['municipios'],
-    queryFn: getMunicipios,
-  });
-
-  // Este useEffect se encarga de establecer el valor por defecto
   useEffect(() => {
-    // Se ejecuta solo si tenemos la lista de municipios y aún no hemos seleccionado nada
     if (municipios.length > 0 && !selectedMunicipio) {
-      // Buscamos "LA PLATA" en la lista (insensible a mayúsculas/minúsculas)
       const laPlata = municipios.find(m => m.nombre.toUpperCase() === 'LA PLATA');
-
-      // Si lo encontramos, lo establecemos como el municipio seleccionado
       if (laPlata) {
         setSelectedMunicipio({ value: laPlata.id, label: laPlata.nombre });
       }
     }
-  }, [municipios, selectedMunicipio]); // Se ejecuta cuando 'municipios' o 'selectedMunicipio' cambian
+  }, [municipios, selectedMunicipio]);
 
-  // 4. Transformamos los datos para react-select
   const municipioOptions = useMemo(() =>
     municipios
       .map(m => ({ value: m.id, label: m.nombre }))
-      .sort((a, b) => a.label.localeCompare(b.label)), // Orden alfabético
-    [municipios]);
+      .sort((a, b) => a.label.localeCompare(b.label)),
+  [municipios]);
 
-  // 5. Query para obtener los resultados del MUNICIPIO seleccionado
   const { data: resultados, isLoading: isLoadingResultados } = useQuery<ResultadoTicker[]>({
-    queryKey: ['resultadosConcejalesPorMunicipio', selectedMunicipio?.value],
-    queryFn: () => getResultadosPorMunicipioYCategoria(selectedMunicipio!.value, 7),
+    queryKey: ['resultadosPorMunicipio', selectedMunicipio?.value, CATEGORIA_ID],
+    queryFn: () => getResultadosPorMunicipio(selectedMunicipio!.value, CATEGORIA_ID),
     enabled: !!selectedMunicipio,
   });
 
-  // 6. Lógica para "Otros" (sin cambios funcionales)
+  // Lógica para "Otros"
   let displayResults: ResultadoTicker[] = resultados || [];
   if (resultados && resultados.length > cantidadAMostrar) {
     const topParties = resultados.slice(0, cantidadAMostrar - 1);
@@ -92,6 +86,7 @@ export const ConcejalesWidget = () => {
           onChange={(option) => setSelectedMunicipio(option)}
           isLoading={isLoadingMunicipios}
           placeholder="Buscar y seleccionar un municipio..."
+          isClearable
           styles={customSelectStyles}
         />
       </div>