Merge pull request #99 from pedrolivaresanchez/fix_geo_bug

Fix nominatim.openstreetmap.org. Execute one request one
pedrolivaresanchez · Nov 6, 2024 · a9cfa14 · a9cfa14
2 parents 00e5032 + 71b9eee
commit a9cfa14
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/src/components/AddressAutocomplete.js b/src/components/AddressAutocomplete.js
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { MapPin } from 'lucide-react';
 
 export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar dirección...', initialValue = '' }) {
@@ -9,6 +9,7 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
   const [isLoading, setIsLoading] = useState(false);
   const [showSuggestions, setShowSuggestions] = useState(false);
   const wrapperRef = useRef(null);
+  const debounceRef = useRef(null);
 
   useEffect(() => {
     function handleClickOutside(event) {
@@ -20,7 +21,7 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const searchAddress = async (searchQuery) => {
+  const searchAddress = useCallback(async (searchQuery) => {
     if (!searchQuery || searchQuery.length < 3) {
       setSuggestions([]);
       return;
@@ -34,12 +35,10 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
       const data = await response.json();
 
       const formattedSuggestions = data.map((item) => {
-        // Create a readable address line
         const addressParts = [];
         if (item.address?.road) addressParts.push(item.address.road);
         if (item.address?.house_number) addressParts.push(item.address.house_number);
 
-        // Create a readable locality line
         const localityParts = [];
         if (item.address?.postcode) localityParts.push(item.address.postcode);
         if (item.address?.city || item.address?.town || item.address?.village) {
@@ -74,13 +73,12 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
     } finally {
       setIsLoading(false);
     }
-  };
+  }, []);
 
   const handleInputChange = (e) => {
     const value = e.target.value;
     setQuery(value);
 
-    // Cuando el usuario escribe manualmente, enviamos solo el texto
     onSelect({
       fullAddress: value,
       coordinates: null,
@@ -93,18 +91,29 @@ export default function AddressAutocomplete({ onSelect, placeholder = 'Buscar di
       },
     });
 
-    // Solo buscar sugerencias si hay más de 3 caracteres
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+
     if (value.length >= 3) {
-      const timeoutId = setTimeout(() => {
+      debounceRef.current = setTimeout(() => {
         searchAddress(value);
-      }, 300);
-      return () => clearTimeout(timeoutId);
+        debounceRef.current = null;
+      }, 500);
     } else {
       setSuggestions([]);
       setShowSuggestions(false);
     }
   };
 
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+
   const handleSelect = (suggestion) => {
     setQuery(suggestion.full_address);
     setShowSuggestions(false);