#1433 - when viewing explore map from project details - zoom on project's place (#2439)

* #2253 - when viewing explore map from project details - zoom on project's place

* #1433 - show loading indicator as map is loading

---------

Co-authored-by: Amanda Bullington <albullington@gmail.com>

src/api/places.js

@@ -10,7 +10,10 @@ const fetchPlace = async (
   opts: Object = {}
 ): Promise<?Object> => {
   try {
-    return await inatjs.places.fetch( id, params, opts );
+    const { results } = await inatjs.places.fetch( id, params, opts );
+    return results && results.length > 0
+      ? results[0]
+      : null;
   } catch ( e ) {
     return handleError( e );
   }

src/components/Explore/MapView.tsx

@@ -1,4 +1,5 @@
 import {
+  ActivityIndicator,
   Button,
   Map
 } from "components/SharedComponents";
@@ -28,12 +29,14 @@ interface Props {
   };
   currentMapRegion: Region;
   setCurrentMapRegion: ( Region ) => void;
+  isLoading: boolean
 }
 
 const MapView = ( {
   observationBounds,
   queryParams,
   currentMapRegion,
+  isLoading,
   setCurrentMapRegion
 }: Props ) => {
   const { t } = useTranslation( );
@@ -86,19 +89,23 @@ const MapView = ( {
           </View>
         )}
       </View>
-      <Map
-        currentLocationButtonClassName="left-5 bottom-20"
-        onPanDrag={onPanDrag}
-        onRegionChangeComplete={updateMapBoundaries}
-        region={region}
-        showCurrentLocationButton
-        showSwitchMapTypeButton
-        showsCompass={false}
-        switchMapTypeButtonClassName="left-20 bottom-20"
-        showsUserLocation
-        tileMapParams={tileMapParams}
-        withPressableObsTiles={tileMapParams !== null}
-      />
+      {isLoading
+        ? <View className="h-full flex justify-center"><ActivityIndicator size={50} /></View>
+        : (
+          <Map
+            currentLocationButtonClassName="left-5 bottom-20"
+            onPanDrag={onPanDrag}
+            onRegionChangeComplete={updateMapBoundaries}
+            region={region}
+            showCurrentLocationButton
+            showSwitchMapTypeButton
+            showsCompass={false}
+            switchMapTypeButtonClassName="left-20 bottom-20"
+            showsUserLocation
+            tileMapParams={tileMapParams}
+            withPressableObsTiles={tileMapParams !== null}
+          />
+        )}
     </View>
   );
 };

src/components/Explore/ObservationsView.js

@@ -42,7 +42,8 @@ const ObservationsView = ( {
     handlePullToRefresh,
     observations,
     totalBounds,
-    totalResults
+    totalResults,
+    isLoading
   } = useInfiniteExploreScroll( { params: queryParams, enabled: canFetch } );
   const {
     isLandscapeMode,
@@ -75,6 +76,7 @@ const ObservationsView = ( {
       ? screenHeight
       : screenWidth;
   }
+
   return (
     <View
       className="flex-1 flex-row h-full overflow-hidden w-[200%]"
@@ -103,6 +105,7 @@ const ObservationsView = ( {
       />
       <MapView
         observationBounds={totalBounds}
+        isLoading={isLoading}
         queryParams={queryParams}
         currentMapRegion={currentMapRegion}
         setCurrentMapRegion={setCurrentMapRegion}

src/components/Explore/hooks/useInfiniteExploreScroll.js

@@ -46,6 +46,7 @@ const useInfiniteExploreScroll = ( { params: newInputParams, enabled }: Object )
   const {
     data,
     isFetchingNextPage,
+    isLoading,
     fetchNextPage,
     refetch,
     isRefetching,
@@ -103,6 +104,7 @@ const useInfiniteExploreScroll = ( { params: newInputParams, enabled }: Object )
 
   return {
     fetchNextPage,
+    isLoading,
     isFetchingNextPage: isFetchingNextPage || isRefetching,
     handlePullToRefresh,
     observations,

src/components/Explore/hooks/useMapLocation.ts

@@ -53,12 +53,16 @@ const useMapLocation = ( currentMapRegion, setCurrentMapRegion ) => {
   useEffect( ( ) => {
     // region gets set when a user is navigating from ExploreLocationSearch
     if ( placeIdWasSet ) {
-      const { coordinates } = place.point_geojson;
-      setCurrentMapRegion( {
-        ...initialMapRegion,
-        latitude: coordinates[1],
-        longitude: coordinates[0]
-      } );
+      const coordinates = place?.point_geojson?.coordinates
+        ? place.point_geojson.coordinates
+        : place?.bounding_box_geojson?.coordinates;
+      if ( coordinates ) {
+        setCurrentMapRegion( {
+          ...initialMapRegion,
+          latitude: coordinates[1],
+          longitude: coordinates[0]
+        } );
+      }
     } else if ( mapWasReset ) {
       // map gets set or reset back to nearby/worldwide, but only if the placeMode
       // has changed

src/components/ProjectDetails/ProjectDetails.js

@@ -64,7 +64,9 @@ const ProjectDetails = ( {
       }
       navigation.navigate( "Explore", {
         project,
-        worldwide: true
+        // If selected project has no place_id, show map in worldwide mode
+        worldwide: !project?.place,
+        place: project?.place
       } );
     },
     [navigation, project, setExploreView, writeLayoutToStorage]

src/components/ProjectDetails/ProjectDetailsContainer.js

@@ -3,6 +3,7 @@
 import { useNavigation, useRoute } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
 import { fetchSpeciesCounts, searchObservations } from "api/observations";
+import fetchPlace from "api/places";
 import {
   fetchMembership,
   fetchProjectMembers, fetchProjectPosts, fetchProjects, joinProject, leaveProject
@@ -33,6 +34,15 @@ const ProjectDetailsContainer = ( ): Node => {
     }, optsWithAuth )
   );
 
+  const fetchProjectPlaceQueryKey = ["projectPlace", "fetchPlace", project?.place_id];
+
+  const { data: projectPlace } = useAuthenticatedQuery(
+    fetchProjectPlaceQueryKey,
+    optsWithAuth => fetchPlace( project?.place_id, {
+      fields: "all"
+    }, optsWithAuth )
+  );
+
   const { data: projectMembers } = useAuthenticatedQuery(
     ["fetchProjectMembers", id],
     optsWithAuth => fetchProjectMembers( {
@@ -141,6 +151,7 @@ const ProjectDetailsContainer = ( ): Node => {
     project.species_count = speciesCounts?.total_results;
     project.current_user_is_member = currentMembership === 1;
     project.current_user_observations_count = usersObservations?.total_results;
+    project.place = projectPlace;
   }
 
   return (

src/components/SharedComponents/Map/Map.tsx

@@ -17,6 +17,7 @@ import Observation from "realmModels/Observation";
 import fetchUserLocation from "sharedHelpers/fetchUserLocation.ts";
 import { useDebugMode, useDeviceOrientation } from "sharedHooks";
 import useLocationPermission from "sharedHooks/useLocationPermission.tsx";
+import colors from "styles/tailwindColors";
 
 import CurrentLocationButton from "./CurrentLocationButton";
 import {
@@ -334,6 +335,7 @@ const Map = ( {
         className={className}
         initialRegion={initialRegion}
         loadingEnabled
+        loadingIndicatorColor={colors.inatGreen}
         mapType={currentMapType}
         minZoomLevel={MIN_ZOOM_LEVEL}
         onMapReady={onMapReady}

src/providers/ExploreContext.tsx

@@ -162,6 +162,9 @@ interface PLACE {
   point_geojson: {
     coordinates: Array<number>
   },
+  bounding_box_geojson?: {
+    coordinates: Array<number>
+  },
   type: string
 }