Merge pull request #10 from Eternal-Encoders/gps

BugFix

Author: Roaoch

package.json

@@ -9,7 +9,7 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:ts": "eslint \"**/*.{ts,tsx}\"",
     "lint:ts:fix": "eslint \"**/*.{ts,tsx}\" --fix",
-    "lint:scss": "npx stylelint \"**/*.scss\"", 
+    "lint:scss": "npx stylelint \"**/*.scss\"",
     "lint:scss:fix": "npx stylelint \"**/*.scss\" --fix",
     "preview": "vite preview"
   },
@@ -21,6 +21,7 @@
     "konva": "^9.3.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-geolocated": "^4.3.0",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^15.0.1",
     "react-konva": "^18.2.10",

src/pages/institutes-page/InstitutesPage.tsx

@@ -32,10 +32,11 @@ function InstitutesPage() {
     }
 
     const userLoc = useGpsHook(
-        true,
         GPS_BUFFER
     )
 
+    console.log(userLoc)
+
     dispatch(floorSet(instGps ?  getClosestFloor(instGps, approxGps(userLoc)).floor : 1));
 
     return (

src/shared/hooks/GpsHook.ts

@@ -1,41 +1,66 @@
 import { useEffect, useState } from "react";
 import { UserGps } from "../../utils/interfaces";
+import { useGeolocated } from "react-geolocated";
 
-export function useGpsHook(isGpsAv: boolean, bufferSize: number) {
+export function useGpsHook(bufferSize: number) {
     const [userLoc, setUserLoc] = useState(new Array<UserGps>(bufferSize));
 
-    /* ON MOUNT - GET CURRENT GPS */
-    useEffect(() => {
-        if (navigator.geolocation && isGpsAv) {
-            navigator.geolocation.getCurrentPosition(
-                (pos) => {
-                    setUserLoc(userLoc.fill({
-                        latitude: pos.coords.latitude,
-                        longtitude: pos.coords.longitude,
-                        altitude: pos.coords.altitude ? pos.coords.altitude : 268.4
-                    }))
-                }
-            )
+    const { coords } = useGeolocated({
+        positionOptions: {
+            enableHighAccuracy: true,
+            maximumAge: 0
+        },
+        watchPosition: true,
+        suppressLocationOnMount: false,
+        geolocationProvider: navigator.geolocation,
+        isOptimisticGeolocationEnabled: true,
+        watchLocationPermissionChange: false,
+    })
 
-            navigator.geolocation.watchPosition(
-                (pos) => {
-                    console.log(userLoc);
-                    userLoc.shift()
-                    userLoc.push({
-                        latitude: pos.coords.latitude,
-                        longtitude: pos.coords.longitude,
-                        altitude: pos.coords.altitude ? pos.coords.altitude : 268.4
-                    })
-                    setUserLoc(userLoc);
-                },
-                () => {},
-                {
-                    maximumAge: 0,
-                    enableHighAccuracy: true,
-                }
-            )
+    useEffect(() => {
+        if (coords) {
+            userLoc.shift()
+            userLoc.push({
+                latitude: coords.latitude,
+                longtitude: coords.longitude,
+                altitude: coords.altitude ? coords.altitude : 268.4
+            })
+            setUserLoc(userLoc);
         }
-    }, [navigator]);
+        
+    }, [coords])
+
+    /* ON MOUNT - GET CURRENT GPS */
+    // useEffect(() => {
+    //     if (navigator.geolocation && isGpsAv) {
+    //         navigator.geolocation.getCurrentPosition(
+    //             (pos) => {
+    //                 setUserLoc(userLoc.fill({
+    //                     latitude: pos.coords.latitude,
+    //                     longtitude: pos.coords.longitude,
+    //                     altitude: pos.coords.altitude ? pos.coords.altitude : 268.4
+    //                 }))
+    //             }
+    //         )
+
+    //         navigator.geolocation.watchPosition(
+    //             (pos) => {
+    //                 userLoc.shift()
+    //                 userLoc.push({
+    //                     latitude: pos.coords.latitude,
+    //                     longtitude: pos.coords.longitude,
+    //                     altitude: pos.coords.altitude ? pos.coords.altitude : 268.4
+    //                 })
+    //                 setUserLoc(userLoc);
+    //             },
+    //             () => {},
+    //             {
+    //                 maximumAge: 0,
+    //                 enableHighAccuracy: true,
+    //             }
+    //         )
+    //     }
+    // }, [navigator]);
 
     return userLoc;
 }

src/utils/const.ts

@@ -48,7 +48,7 @@ const EQUATORIAL_RADIUS = 6378160;
 
 const POLAR_RADIUS = 6356774;
 
-const GPS_BUFFER = 4;
+const GPS_BUFFER = 2;
 
 export {
     InstColors,

yarn.lock

@@ -2838,6 +2838,11 @@ react-fast-compare@^3.2.2:
   resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-geolocated@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/react-geolocated/-/react-geolocated-4.3.0.tgz#94565732e029624ea4c089660a24c544e256a68a"
+  integrity sha512-jj3x45VACcHHvSNWqWHf0f60V12pQDPIH6HuFyJi+BmndQ/dlE+vR0R2Eis+BYnwZPTlaEQ/ANmJjuUPH3Lxsg==
+
 react-helmet-async@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz"