feat: geolocate only once

pedrolivaresanchez · Nov 8, 2024 · 0034ca9 · 0034ca9
1 parent 9afec87
commit 0034ca9
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,3 +11,7 @@ body {
   color: rgb(var(--foreground-rgb));
   background: rgb(var(--background-rgb));
 }
+
+.maplibregl-ctrl-top-right div:nth-child(2) {
+  display: none;
+}
diff --git a/src/components/AddressMap.tsx b/src/components/AddressMap.tsx
@@ -41,6 +41,7 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
   });
 
   const handleSelect = async (newValue: OnChangeValue<PlaceOption, false>) => {
+    console.log(newValue);
     if (newValue && newValue.value) {
       const placeId = newValue.value.place_id;
 
@@ -77,7 +78,6 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
     };
 
     setAddressDescriptor(newAddressDescriptor);
-
     if (updateLngLat) {
       setLngLat(coordinates);
     }
@@ -111,7 +111,7 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
               onNewAddressDescriptor(addressDescriptor);
             }}
           >
-            Editar
+            Guardar
           </button>
         </div>
       )}
@@ -122,7 +122,7 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
           onChange: handleSelect,
           onInputChange: (newValue) => {
             // invalidate - only valid when set in map/autocomplete
-            setAddressDescriptor({
+            onNewAddressDescriptor({
               address: '',
               coordinates: null,
               town: '',
@@ -135,13 +135,7 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
         }}
         debounce={300}
       />
-      {/* <AddressAutocomplete initialValue={addressDescriptor.address} onSelect={onAutocompleteAddress} /> */}
-      {/* Mensaje de error */}
-      {(status === 'denied' || status === 'prompt') && (
-        <div className="bg-red-100 border-l-4 border-red-500 p-4 rounded">
-          <p className="text-red-700">Debes activar la ubicación para que podamos localizarte</p>
-        </div>
-      )}
+      {/*  Mapa */}
       <GeoLocationMap
         onPermissionStatusChanged={(permission) => {
           setStatus(permission);
@@ -150,6 +144,17 @@ export default function AddressMap({ onNewAddressDescriptor, initialAddressDescr
         inputCoordinates={lngLat}
         zoom={16}
       />
+      {/* Mensaje de error */}
+      {(status === 'denied' || status === 'prompt') && (
+        <div
+          className="bg-red-100 border-l-4 border-red-500 p-4 rounded"
+          onClick={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <p className="text-red-700">Debes activar la ubicación para que podamos localizarte</p>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/components/map/GeolocationMap.tsx b/src/components/map/GeolocationMap.tsx
@@ -11,16 +11,19 @@ export type GeoLocationMapProps = {
   onPermissionStatusChanged?: (status: PermissionState | 'unknown') => void;
   zoom?: number;
   inputCoordinates?: LngLat;
+  triggerOnlyOnce?: boolean;
 };
 
 export default function GeoLocationMap({
   onNewPositionCallback,
   onNewCenterCallback,
   onPermissionStatusChanged,
+  triggerOnlyOnce = false,
   inputCoordinates,
   zoom = 13,
 }: GeoLocationMapProps) {
   const isGeolocating = useRef(false);
+  const geolocationTriggeredTimes = useRef(0);
   const mapContainerRef = useRef<HTMLDivElement | null>(null);
   const mapRef = useRef<maplibregl.Map | null>(null);
   const markerRef = useRef<maplibregl.Marker | null>(null);
@@ -30,7 +33,7 @@ export default function GeoLocationMap({
       positionOptions: {
         enableHighAccuracy: true,
       },
-      trackUserLocation: true,
+      trackUserLocation: false,
       showAccuracyCircle: true,
     });
 
@@ -42,8 +45,13 @@ export default function GeoLocationMap({
     const triggerGeoLocate = () => {
       setTimeout(() => {
         if (!isGeolocating.current) {
+          if (triggerOnlyOnce && geolocationTriggeredTimes.current === 1) {
+            return;
+          }
+
           if (geolocateControl.trigger()) {
             isGeolocating.current = true;
+            geolocationTriggeredTimes.current++;
           }
         }
       });
@@ -126,7 +134,6 @@ export default function GeoLocationMap({
       });
 
       const lngLat: LngLat = { lng: userLocation[0], lat: userLocation[1] };
-
       if (typeof onNewPositionCallback === 'function') {
         onNewPositionCallback(lngLat);
       }