From 6f5ef0fdf8fa2b34046016209c7a69960a6b368b Mon Sep 17 00:00:00 2001
From: Pau Sansa <pausansa59@gmail.com>
Date: Wed, 6 Nov 2024 22:40:36 +0100
Subject: [PATCH] feat(punto-recogida) - Add city filtering and fetch distinct
 cities for Puntos component

---
 src/app/casos-activos/puntos/page.js          | 55 ++++++++++++++++++-
 ...175639_add-distinct-recolection-cities.sql |  5 ++
 2 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 supabase/migrations/20241106175639_add-distinct-recolection-cities.sql

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  */}
       <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">
+        <div className="flex flex-col sm:flex-row gap-2 items-center w-full justify-end">
+          <h2 className="font-semibold">Se acepta:</h2>
           <select
             value={filtroData.ayuda}
             onChange={(e) => changeDataFilter('ayuda', e.target.value)}
@@ -120,6 +156,21 @@ export default function Puntos() {
             ))}
           </select>
         </div>
+        <div className="flex flex-col sm:flex-row gap-2 items-center w-full justify-end">
+          <h2 className="font-semibold">Ciudad:</h2>
+          <select
+            value={filtroData.ciudad}
+            onChange={(e) => changeDataFilter('ciudad', e.target.value)}
+            className="px-4 py-2 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 shadow-sm"
+          >
+            <option value="todas">Todas las ciudades</option>
+            {cityOptions.map((city, i) => (
+              <option key={i} value={city}>
+                {city}
+              </option>
+            ))}
+          </select>
+        </div>
       </div>
       <div className="grid gap-4">
         {data.length === 0 ? (
@@ -135,7 +186,7 @@ export default function Puntos() {
               className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600 flex items-center gap-2 whitespace-nowrap"
             >
               <HeartHandshake className="w-5 h-5" />
-              Ofrecer ayuda a {filtroData.pueblo === 'todos' ? '' : towns[filtroData.pueblo - 1].name}
+              Crear punto de ayuda en {filtroData.ciudad === 'todos' ? '' : filtroData.ciudad}
             </button>
           </div>
         ) : (
diff --git a/supabase/migrations/20241106175639_add-distinct-recolection-cities.sql b/supabase/migrations/20241106175639_add-distinct-recolection-cities.sql
new file mode 100644
index 00000000..c6103ebe
--- /dev/null
+++ b/supabase/migrations/20241106175639_add-distinct-recolection-cities.sql
@@ -0,0 +1,5 @@
+create or replace view "public"."distinct_collection_cities" as  SELECT DISTINCT collection_points.city
+   FROM collection_points;
+
+
+