Feat Widgets 1930

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

@@ -1,80 +1,75 @@
 // src/components/BancasWidget.tsx
 import { useState, useEffect } from 'react';
-// Se cambia la importación: de ResponsiveWaffle a ResponsiveBar
+import { useQuery } from '@tanstack/react-query';
 import { ResponsiveBar } from '@nivo/bar';
 import { getBancasPorSeccion, getSeccionesElectorales } from '../apiService';
 import type { ProyeccionBancas, MunicipioSimple } from '../types/types';
 import './BancasWidget.css';
 
-// La paleta de colores se mantiene para consistencia visual
 const NIVO_COLORS = ["#1f77b4", "#ff7f0e", "#2ca02c", "#d62728", "#9467bd", "#8c564b", "#e377c2", "#7f7f7f", "#bcbd22", "#17becf"];
 
 export const BancasWidget = () => {
     const [secciones, setSecciones] = useState<MunicipioSimple[]>([]);
     const [seccionActual, setSeccionActual] = useState<string>('');
-    const [data, setData] = useState<ProyeccionBancas | null>(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState<string | null>(null);
 
-    // useEffect para cargar la lista de secciones una sola vez
+    // useEffect para cargar la lista de secciones una sola vez (esto está bien)
     useEffect(() => {
         const fetchSecciones = async () => {
             try {
                 const seccionesData = await getSeccionesElectorales();
                 if (seccionesData && seccionesData.length > 0) {
-                    
-                    // --- INICIO DE LA LÓGICA DE ORDENAMIENTO ---
                     const orden = new Map([
                         ['Capital', 0], ['Primera', 1], ['Segunda', 2], ['Tercera', 3],
                         ['Cuarta', 4], ['Quinta', 5], ['Sexta', 6], ['Séptima', 7]
                     ]);
-
                     const getOrden = (nombre: string) => {
                         const match = nombre.match(/Capital|Primera|Segunda|Tercera|Cuarta|Quinta|Sexta|Séptima/);
                         return match ? orden.get(match[0]) ?? 99 : 99;
                     };
-
                     seccionesData.sort((a, b) => getOrden(a.nombre) - getOrden(b.nombre));
-                    // --- FIN DE LA LÓGICA DE ORDENAMIENTO ---
-
                     setSecciones(seccionesData);
                     setSeccionActual(seccionesData[0].id);
-                } else {
-                    setError("No se encontraron secciones electorales.");
                 }
             } catch (err) {
                 console.error("Error cargando secciones electorales:", err);
-                setError("No se pudo cargar la lista de secciones.");
+                // Opcional: manejar el error en la UI si la carga de secciones falla
             }
         };
         fetchSecciones();
     }, []);
 
-    // useEffect para cargar los datos de bancas cuando cambia la sección
-    useEffect(() => {
-        if (!seccionActual) return;
+    // --- CÓDIGO REFACTORIZADO ---
+    // Eliminamos los useState para data, loading y error
 
-        const fetchData = async () => {
-            setLoading(true);
-            setError(null);
-            try {
-                const result = await getBancasPorSeccion(seccionActual);
-                setData(result);
-            } catch (err) {
-                console.error(`Error cargando datos de bancas para sección ${seccionActual}:`, err);
-                setData(null);
-                setError("No hay datos de bancas disponibles para esta sección.");
-            } finally {
-                setLoading(false);
-            }
-        };
-        fetchData();
-    }, [seccionActual]);
+    // useQuery ahora es la única fuente de verdad para los datos de bancas
+    const { 
+        data, 
+        isLoading, 
+        error 
+    } = useQuery<ProyeccionBancas, Error>({
+        queryKey: ['bancasPorSeccion', seccionActual],
+        queryFn: () => getBancasPorSeccion(seccionActual),
+        enabled: !!seccionActual,
+        retry: (failureCount, error: any) => {
+            if (error.response?.status === 404) return false;
+            return failureCount < 3;
+        },
+    });
 
-    // Se preparan los datos para el gráfico de barras.
-    // Se invierte el array para que el partido con más bancas aparezca arriba.
     const barData = data ? [...data.proyeccion].reverse() : [];
 
+    const getErrorMessage = () => {
+        if (error) {
+            if ((error as any).response?.status === 404) {
+                return "La proyección de bancas para esta sección aún no está disponible.";
+            }
+            return "No se pudo conectar para obtener los datos de bancas.";
+        }
+        return null;
+    };
+
+    const errorMessage = getErrorMessage();
+
     return (
         <div className="bancas-widget-container">
             <div className="bancas-header">
@@ -84,8 +79,7 @@ export const BancasWidget = () => {
                 </select>
             </div>
             <div className="waffle-chart-container">
-                {loading ? <p>Cargando...</p> : error ? <p>{error}</p> :
-                // --- SE REEMPLAZA EL GRÁFICO WAFFLE POR EL GRÁFICO DE BARRAS ---
+                {isLoading ? <p>Cargando...</p> : errorMessage ? <p>{errorMessage}</p> :
                 <ResponsiveBar
                     data={barData}
                     keys={['bancas']}
@@ -106,7 +100,6 @@ export const BancasWidget = () => {
                         legend: 'Cantidad de Bancas',
                         legendPosition: 'middle',
                         legendOffset: 20,
-                        // Asegura que los ticks del eje sean números enteros
                         format: (value) => Math.floor(value) === value ? value : ''
                     }}
                     axisLeft={{
@@ -118,7 +111,6 @@ export const BancasWidget = () => {
                     labelSkipHeight={12}
                     labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }}
                     animate={true}
-                    // Se elimina la leyenda, ya que las etiquetas en el eje son suficientes
                     legends={[]}
                 />}
             </div>