51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
// src/features/legislativas/nacionales/ResultadosNacionalesCardsWidget.tsx
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { getResumenPorProvincia } from '../../../apiService';
|
|
import { ProvinciaCard } from './components/ProvinciaCard';
|
|
import styles from './ResultadosNacionalesCardsWidget.module.css';
|
|
|
|
interface Props {
|
|
eleccionId: number;
|
|
focoDistritoId?: string;
|
|
focoCategoriaId?: number;
|
|
cantidadResultados?: number;
|
|
mostrarBancas?: boolean;
|
|
}
|
|
|
|
export const ResultadosNacionalesCardsWidget = ({
|
|
eleccionId,
|
|
focoDistritoId,
|
|
focoCategoriaId,
|
|
cantidadResultados,
|
|
mostrarBancas = false
|
|
}: Props) => {
|
|
|
|
const { data, isLoading, error } = useQuery({
|
|
queryKey: ['resumenPorProvincia', eleccionId, focoDistritoId, focoCategoriaId, cantidadResultados],
|
|
|
|
queryFn: () => getResumenPorProvincia(eleccionId, {
|
|
focoDistritoId,
|
|
focoCategoriaId,
|
|
cantidadResultados
|
|
}),
|
|
refetchInterval: 30000,
|
|
});
|
|
|
|
if (isLoading) return <div>Cargando resultados por provincia...</div>;
|
|
if (error) return <div>Error al cargar los datos.</div>;
|
|
if (!data || data.length === 0) return <div>No hay resultados para mostrar con los filtros seleccionados.</div>
|
|
|
|
return (
|
|
<section className={styles.cardsWidgetContainer}>
|
|
<div className={styles.cardsGrid}>
|
|
{data?.map(provinciaData => (
|
|
<ProvinciaCard
|
|
key={provinciaData.provinciaId}
|
|
data={provinciaData}
|
|
mostrarBancas={mostrarBancas}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}; |