fix: allow zooming to user location on first map view (#2102)

Commits: 
* fix: allow zooming to user location on first map view by asking for location permissions before trying to update last known location
This fixes the bug as written, but there is also an issue when switching permissions outside the app, then returning to the app, and the location button does not register the newly granted permissions

* refactor: Remove old console.log

* refactor: rename to honest names

Author: knipec

dev-client/src/components/modals/PermissionsRequestWrapper.tsx

@@ -46,26 +46,29 @@ export const PermissionsRequestWrapper = ({
 }: Props) => {
   const {t} = useTranslation();
   const ref = useRef<ModalHandle>(null);
-  const [permissions, requestPermissions] = usePermissions();
+  // Issue #1808: These permissions could be outdated if
+  // a) nobody has done a "get" or "request" on them since they changed, or
+  // b) a descendant component did the "get" or "request", so there is no reason for the given component to re-render
+  const [potentiallyOutdatedPermissions, requestPermissions] = usePermissions();
 
   const onRequestAction = useCallback(async () => {
-    if (permissions === null) {
+    if (potentiallyOutdatedPermissions === null) {
       return;
     }
 
-    if (permissions.granted) {
+    if (potentiallyOutdatedPermissions.granted) {
       if (permissionedAction !== undefined) {
         permissionedAction();
       }
-    } else if (permissions.canAskAgain) {
+    } else if (potentiallyOutdatedPermissions.canAskAgain) {
       const result = await requestPermissions();
       if (result.granted && permissionedAction !== undefined) {
         permissionedAction();
       }
     } else {
       ref.current?.onOpen();
     }
-  }, [permissionedAction, permissions, requestPermissions]);
+  }, [permissionedAction, potentiallyOutdatedPermissions, requestPermissions]);
 
   return (
     <>

dev-client/src/screens/BottomTabsScreen.tsx

@@ -17,6 +17,8 @@
 
 import {memo, useEffect} from 'react';
 
+import {useForegroundPermissions} from 'expo-location';
+
 import {NavigationHelpers} from '@react-navigation/native';
 import {Location, locationManager} from '@rnmapbox/maps';
 
@@ -36,30 +38,42 @@ import {useDispatch} from 'terraso-mobile-client/store';
 export const BottomTabsScreen = memo(() => {
   const dispatch = useDispatch();
   const {keyboardStatus} = useKeyboardStatus();
+  const [potentiallyOutdatedLocationPermission, _, requestLocationPermission] =
+    useForegroundPermissions();
+
+  useEffect(() => {
+    if (!potentiallyOutdatedLocationPermission?.granted) {
+      requestLocationPermission();
+    }
+    // disable depcheck because we only want to run on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
-    locationManager.getLastKnownLocation().then(initCoords => {
-      if (initCoords !== null) {
+    if (potentiallyOutdatedLocationPermission?.granted) {
+      locationManager.getLastKnownLocation().then(initCoords => {
+        if (initCoords !== null) {
+          dispatch(
+            updateLocation({
+              coords: initCoords.coords,
+              accuracyM: initCoords.coords.accuracy ?? null,
+            }),
+          );
+        }
+      });
+
+      // add listener to update location on user movement
+      const listener = ({coords}: Location) => {
         dispatch(
-          updateLocation({
-            coords: initCoords.coords,
-            accuracyM: initCoords.coords.accuracy ?? null,
-          }),
+          updateLocation({coords: coords, accuracyM: coords.accuracy ?? null}),
         );
-      }
-    });
-
-    // add listener to update location on user movement
-    const listener = ({coords}: Location) => {
-      dispatch(
-        updateLocation({coords: coords, accuracyM: coords.accuracy ?? null}),
-      );
-    };
-    locationManager.setMinDisplacement(USER_DISPLACEMENT_MIN_DISTANCE_M);
-    locationManager.addListener(listener);
+      };
+      locationManager.setMinDisplacement(USER_DISPLACEMENT_MIN_DISTANCE_M);
+      locationManager.addListener(listener);
 
-    return () => locationManager.removeListener(listener);
-  }, [dispatch]);
+      return () => locationManager.removeListener(listener);
+    }
+  }, [dispatch, potentiallyOutdatedLocationPermission]);
 
   return (
     <BottomTabs.Navigator

dev-client/src/screens/HomeScreen/HomeScreen.tsx

@@ -26,8 +26,6 @@ import {
   useState,
 } from 'react';
 
-import {useForegroundPermissions} from 'expo-location';
-
 import BottomSheet from '@gorhom/bottom-sheet';
 import Mapbox from '@rnmapbox/maps';
 
@@ -59,16 +57,6 @@ import {ScreenScaffold} from 'terraso-mobile-client/screens/ScreenScaffold';
 import {useDispatch, useSelector} from 'terraso-mobile-client/store';
 
 export const HomeScreen = memo(() => {
-  const [locationPermission, requestLocationPermission] =
-    useForegroundPermissions();
-  useEffect(() => {
-    if (!locationPermission?.granted) {
-      requestLocationPermission();
-    }
-    // disable depcheck because we only want to run on mount
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   const siteListBottomSheetRef = useRef<BottomSheet>(null);
   const [mapStyleURL, setMapStyleURL] = useState(Mapbox.StyleURL.Street);
   const [calloutState, setCalloutState] = useState<CalloutState>(noneCallout());