fix: allow current geoloc on map (#1314)

* refactor: add debug * refactor: get for sarafi * refactor: udpate * refactor: allow prompt status for safari * refactor: fix tests * refactor: stub geolocation navigator functions * refactor: remove console.log * refactor: stub geoloc higher * refactor: fix tests
graasp · Jul 5, 2024 · 4fda73c · 4fda73c
1 parent b909dda
commit 4fda73c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 36 deletions.
diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts
@@ -55,7 +55,7 @@ describe('Home', () => {
     i18n.changeLanguage(CURRENT_USER.extra.lang as string);
     cy.visit(`${HOME_PATH}?mode=map`);
 
-    cy.get(`#${buildMapViewId()}`).should('be.visible');
+    cy.get(`#${buildMapViewId()}`, { timeout: 10000 }).should('be.visible');
   });
 
   describe('Grid', () => {

diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -31,7 +31,8 @@ describe('View Folder', () => {
     const { id } = parentItem;
     cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Map }));
 
-    cy.get(`#${buildMapViewId(id)}`).should('be.visible');
+    // wait on getting geoloc
+    cy.get(`#${buildMapViewId(id)}`, { timeout: 10000 }).should('be.visible');
   });
 
   describe('Grid', () => {

diff --git a/src/components/item/MapView.tsx b/src/components/item/MapView.tsx
@@ -26,7 +26,7 @@ const options = {
   maximumAge: 0,
 };
 
-const useCurrentLocation = (enableGeolocation = false) => {
+const useCurrentLocation = (enableGeolocation = true) => {
   const [hasFetchedCurrentLocation, setHasFetchedCurrentLocation] =
     useState(false);
 
@@ -35,43 +35,52 @@ const useCurrentLocation = (enableGeolocation = false) => {
     lng: number;
   }>();
 
+  const getCurrentPosition = () => {
+    const success = (pos: {
+      coords: { latitude: number; longitude: number };
+    }) => {
+      const crd = pos.coords;
+      setCurrentPosition({ lat: crd.latitude, lng: crd.longitude });
+      setHasFetchedCurrentLocation(true);
+    };
+
+    navigator.geolocation.getCurrentPosition(
+      success,
+      (err: { code: number; message: string }) => {
+        // eslint-disable-next-line no-console
+        console.warn(`ERROR(${err.code}): ${err.message}`);
+        setHasFetchedCurrentLocation(true);
+      },
+      options,
+    );
+  };
+
   // get current location
   useEffect(() => {
     if (enableGeolocation) {
-      // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions#examples
-      if (!navigator.permissions) {
-        setHasFetchedCurrentLocation(true);
-      } else {
+      if (navigator.permissions) {
+        // check permissions
+        // https://developer.mozilla.org/en-US/docs/Web/API/Navigator/permissions#examples
         navigator.permissions
           .query({ name: 'geolocation' })
           .then(({ state }) => {
-            if (state === 'granted') {
-              const success = (pos: {
-                coords: { latitude: number; longitude: number };
-              }) => {
-                const crd = pos.coords;
-                setCurrentPosition({ lat: crd.latitude, lng: crd.longitude });
-                setHasFetchedCurrentLocation(true);
-              };
-
-              navigator.geolocation.getCurrentPosition(
-                success,
-                (err: { code: number; message: string }) => {
-                  // eslint-disable-next-line no-console
-                  console.warn(`ERROR(${err.code}): ${err.message}`);
-                  setHasFetchedCurrentLocation(true);
-                },
-                options,
-              );
-            } else {
+            if (state === 'denied') {
               console.error('geolocation denied:', state);
               setHasFetchedCurrentLocation(true);
             }
+            // allows granted and prompt values (safari)
+            else {
+              getCurrentPosition();
+            }
           })
           .catch((e) => {
             console.error('geolocation denied:', e);
             setHasFetchedCurrentLocation(true);
           });
+      } else {
+        // navigator.permissions does not exist in safari
+        // still try to get position for webview's ios
+        getCurrentPosition();
       }
     }
   }, [enableGeolocation]);
@@ -116,14 +125,14 @@ const MapView = ({
           )}
         </Stack>
         <Stack flex={1}>
-          {(parentId && isLoadingParent) ||
-          (enableGeolocation && !hasFetchedCurrentLocation) ? (
-            <Skeleton width="100%" height="100%" />
-          ) : (
-            <div
-              id={buildMapViewId(parentId)}
-              style={{ width: '100%', height: '100%' }}
-            >
+          <div
+            id={buildMapViewId(parentId)}
+            style={{ width: '100%', height: '100%' }}
+          >
+            {(parentId && isLoadingParent) ||
+            (enableGeolocation && !hasFetchedCurrentLocation) ? (
+              <Skeleton width="100%" height="100%" />
+            ) : (
               <Map
                 currentPosition={currentPosition}
                 useDeleteItemGeolocation={mutations.useDeleteItemGeolocation}
@@ -140,8 +149,8 @@ const MapView = ({
                 // todo: always use builder modal when it is responsive
                 handleAddOnClick={isMobile ? undefined : handleAddOnClick}
               />
-            </div>
-          )}
+            )}
+          </div>
         </Stack>
       </Stack>
       {!isMobile && (