From f491d12154e15f982c2aaad05ee1485fd97f3985 Mon Sep 17 00:00:00 2001
From: log101 <ffrknerdm@gmail.com>
Date: Thu, 18 Jan 2024 20:39:47 +0300
Subject: [PATCH] fix: remove duplicate location watches

---
 src/components/LockedContent.tsx | 33 ++++++++++++++++------------
 src/scripts/initMap.js           | 37 +++++++++++++++-----------------
 2 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/src/components/LockedContent.tsx b/src/components/LockedContent.tsx
index 30f1ac5..2ac74e7 100644
--- a/src/components/LockedContent.tsx
+++ b/src/components/LockedContent.tsx
@@ -11,25 +11,30 @@ const LocationButton = () => {
   const [atTarget, setAtTarget] = useState(false)
   const [contentVisible, setContentVisible] = useState(false)
   const [hasPermission, setHasPermission] = useState(false)
+  const [watchId, setWatchId] = useState<number>()
 
   const startWatchingLocation = () => {
     setHasPermission(true)
-    navigator.geolocation.watchPosition(
-      (position: GeolocationPosition) => {
-        const pos = {
-          lat: position.coords.latitude,
-          lng: position.coords.longitude
-        }
+    if (!watchId) {
+      const id = navigator.geolocation.watchPosition(
+        (position: GeolocationPosition) => {
+          const pos = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+          }
 
-        const totalDistanceInKM = distance(pos.lat, pos.lng, pos.lat, pos.lng).toFixed(0)
+          const totalDistanceInKM = distance(pos.lat, pos.lng, pos.lat, pos.lng).toFixed(0)
 
-        if (totalDistanceInKM === "0") {
-          setAtTarget(true)
-        }
-      },
-      () => null,
-      { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
-    )
+          if (totalDistanceInKM === "0") {
+            setAtTarget(true)
+          }
+        },
+        () => null,
+        { enableHighAccuracy: true, maximumAge: 30000, timeout: 27000 }
+      )
+
+      setWatchId(id)
+    }
   }
 
   useEffect(() => {
diff --git a/src/scripts/initMap.js b/src/scripts/initMap.js
index 545bea2..24824c1 100644
--- a/src/scripts/initMap.js
+++ b/src/scripts/initMap.js
@@ -29,19 +29,6 @@ var currentLocationIcon = L.icon({
 
 let currentLocationMarker;
 
-function onLocationFound(e) {
-    var radius = e.accuracy;
-
-    if (currentLocationMarker) {
-        currentLocationMarker.setLatLng(e.latlng);
-    } else {
-        currentLocationMarker = L.marker(e.latlng, { icon: currentLocationIcon });
-        currentLocationMarker.addTo(map);
-    }
-}
-
-map.on('locationfound', onLocationFound);
-
 function onLocationError(e) {
     alert(e.message);
 }
@@ -57,7 +44,7 @@ L.Control.GoToCurrentLocation = L.Control.extend({
         locationButton.classList.add('custom-map-control-button');
 
         locationButton.addEventListener('click', () => {
-            map.locate({ setView: true, maxZoom: 16 });
+            map.setView(currentLocationMarker.getLatLng(), 18);
         });
 
         return locationButton;
@@ -77,7 +64,7 @@ L.Control.GoToTargetLocation = L.Control.extend({
         locationButton.classList.add('custom-map-control-button');
 
         locationButton.addEventListener('click', () => {
-            map.setView(TARGET_LOCATION, 13);
+            map.setView(TARGET_LOCATION, 18);
         });
 
         return locationButton;
@@ -103,7 +90,7 @@ L.control.targetLocation({ position: 'bottomleft' }).addTo(map);
 navigator.permissions
     .query({ name: "geolocation" })
     .then((permissionStatus) => {
-        if (permissionStatus === 'granted') {
+        if (permissionStatus.state === 'granted') {
             navigator.geolocation.watchPosition(
                 (position) => {
                     const pos = {
@@ -111,10 +98,15 @@ navigator.permissions
                         lng: position.coords.longitude
                     }
 
-                    console.log('The map location is' + pos)
+                    if (currentLocationMarker) {
+                        currentLocationMarker.setLatLng(pos);
+                    } else {
+                        currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
+                        currentLocationMarker.addTo(map);
+                    }
                 },
                 () => null,
-                { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
+                { enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
             )
         } else {
             permissionStatus.onchange = () => {
@@ -126,10 +118,15 @@ navigator.permissions
                                 lng: position.coords.longitude
                             }
 
-                            console.log('The map location is' + pos)
+                            if (currentLocationMarker) {
+                                currentLocationMarker.setLatLng(pos);
+                            } else {
+                                currentLocationMarker = L.marker(pos, { icon: currentLocationIcon });
+                                currentLocationMarker.addTo(map);
+                            }
                         },
                         () => null,
-                        { enableHighAccuracy: true, maximumAge: 60000, timeout: 57000 }
+                        { enableHighAccuracy: true, maximumAge: 10000, timeout: 57000 }
                     )
                 }
             };