Merge pull request #196 from pedrolivaresanchez/update/filtro-casos-a…

…ctivos Update/filtro casos activos
pedrolivaresanchez · Nov 11, 2024 · 8fb830f · 8fb830f
2 parents 6d13e32 + ae8d58d
commit 8fb830f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 5 deletions.
diff --git a/src/app/casos-activos/ofertas/page.tsx b/src/app/casos-activos/ofertas/page.tsx
@@ -6,6 +6,7 @@ import Pagination from '@/components/Pagination';
 import { tiposAyudaOptions } from '@/helpers/constants';
 import { useRouter, useSearchParams } from 'next/navigation';
 import OfferCard from '@/components/OfferCard';
+import { useTowns } from '@/context/TownProvider';
 import { HelpRequestData } from '@/types/Requests';
 
 export const dynamic = 'force-dynamic';
@@ -21,7 +22,7 @@ export default function OfertasPage() {
 function Ofertas() {
   const searchParams = useSearchParams();
   const router = useRouter();
-  const {} = router;
+  const { towns, isLoading: townsLoading, error: townsError } = useTowns();
 
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
@@ -35,17 +36,18 @@ function Ofertas() {
     return Math.ceil(count / itemsPerPage) || 0;
   };
 
-  const updateFilter = (filter: 'ayuda' | 'page', value: string | number) => {
+  const updateFilter = (filter: 'ayuda' | 'pueblo' | 'page', value: string | number) => {
     const params = new URLSearchParams(searchParams.toString());
     params.set(filter, value.toString());
     router.push(`?${params.toString()}`);
   };
 
   const [filtroData, setFiltroData] = useState({
     ayuda: searchParams.get('acepta') || 'todas',
+    pueblo: searchParams.get('pueblo') || 'todos',
   });
 
-  const changeDataFilter = (type: 'ayuda', newFilter: string) => {
+  const changeDataFilter = (type: 'ayuda' | 'pueblo', newFilter: string) => {
     setFiltroData((prev) => ({
       ...prev,
       [type]: newFilter,
@@ -67,11 +69,16 @@ function Ofertas() {
         // Comenzamos la consulta
         const query = supabase.from('help_requests').select('*', { count: 'exact' }).eq('type', 'ofrece');
 
-        // Solo agregar filtro si no es "todos"
+        // Solo agregar filtro de ayuda si no es "todos"
         if (filtroData.ayuda !== 'todas') {
           query.contains('help_type', [filtroData.ayuda]);
         }
 
+        // Solo agregar filtro de pueblo si no es "todos"
+        if (filtroData.pueblo !== 'todos') {
+          query.eq('town_id', filtroData.pueblo); // Filtra por el ID del pueblo
+        }
+
         query.neq('status', 'finished');
         // Ejecutar la consulta con paginación
         const { data, count, error } = await query
@@ -112,12 +119,15 @@ function Ofertas() {
     );
   }
 
+  const sortedTowns = towns.slice().sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')); // Organizamos de A-Z los nombres de los pueblos obtenidos.
+
   return (
     <>
       {/* FILTROS  */}
       <div className="flex flex-col sm:flex-row gap-2 items-center justify-between">
         <p className="font-bold text-md">Filtros</p>
         <div className="flex flex-col sm:flex-row gap-2 w-full justify-end">
+          {/* Filtro de Ayuda */}
           <select
             value={filtroData.ayuda}
             onChange={(e) => changeDataFilter('ayuda', e.target.value)}
@@ -130,6 +140,20 @@ function Ofertas() {
               </option>
             ))}
           </select>
+
+          {/* Filtro de Pueblo */}
+          <select
+            value={filtroData.pueblo}
+            onChange={(e) => changeDataFilter('pueblo', e.target.value)}
+            className="px-4 py-2 rounded-lg w-full sm:w-auto border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 shadow-sm"
+          >
+            <option value="todos">Todos los pueblos</option>
+            {sortedTowns.map((town) => (
+              <option key={town.id} value={town.id}>
+                {town.name}
+              </option>
+            ))}
+          </select>
         </div>
       </div>
       <div className="grid gap-4">

diff --git a/src/app/casos-activos/solicitudes/page.tsx b/src/app/casos-activos/solicitudes/page.tsx
@@ -149,6 +149,8 @@ function Solicitudes() {
     );
   }
 
+  const sortedTowns = towns.slice().sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')); // Organizamos de A-Z los nombres de los pueblos obtenidos.
+
   return (
     <>
       {/* FILTROS  */}
@@ -186,7 +188,7 @@ function Solicitudes() {
               className="px-4 py-2 rounded-lg w-full border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 shadow-sm"
             >
               <option value="todos">Todos los pueblos</option>
-              {towns.map((item) => (
+              {sortedTowns.map((item) => (
                 <option key={item.id} value={item.id}>
                   {item.name}
                 </option>