diff --git a/src/app/casos-activos/puntos/page.js b/src/app/casos-activos/puntos/page.js index 1e99ab76..2687082b 100644 --- a/src/app/casos-activos/puntos/page.js +++ b/src/app/casos-activos/puntos/page.js @@ -20,6 +20,7 @@ export default function Puntos() { const [data, setData] = useState([]); const [currentPage, setCurrentPage] = useState(1); const [currentCount, setCurrentCount] = useState(0); + const [cityOptions, setCityOptions] = useState([]); const itemsPerPage = 10; const numPages = (count) => { @@ -34,6 +35,7 @@ export default function Puntos() { const [filtroData, setFiltroData] = useState({ acepta: searchParams.get('acepta') || 'todos', + ciudad: searchParams.get('ciudad') || 'todas', }); const changeDataFilter = (type, newFilter) => { @@ -49,6 +51,34 @@ export default function Puntos() { updateFilter('page', newPage); } + useEffect(() => { + async function fetchCities() { + try { + setError(null); + + // Comenzamos la consulta + const query = supabase.from('distinct_collection_cities').select('city'); + + // Ejecutar la consulta + const { data, count, error } = await query; + if (error) { + console.log('Error fetching ciudades:', error); + setCityOptions([]); + } else { + const trimmedCities = data.map((punto) => punto.city.trim()); + const cities = [...new Set(trimmedCities)].sort(); + setCityOptions(cities || []); + setCurrentCount(count); + } + } catch (err) { + console.log('Error general:', err); + setError('Error de conexión.'); + } + } + + fetchCities(); + }, []); + useEffect(() => { async function fetchData() { try { @@ -62,6 +92,11 @@ export default function Puntos() { if (filtroData.ayuda !== 'todas') { query.contains('accepted_items', [filtroData.ayuda]); } + + if (filtroData.ciudad !== 'todas') { + query.ilike('city', filtroData.ciudad); + } + // Ejecutar la consulta con paginación const { data, count, error } = await query .range((currentPage - 1) * itemsPerPage, currentPage * itemsPerPage - 1) @@ -106,7 +141,8 @@ export default function Puntos() { {/* FILTROS */}
Filtros
-