From eefb53af85a8dc2ebd6715c9e908dd38e8546ddf Mon Sep 17 00:00:00 2001 From: budowski Date: Thu, 5 Dec 2024 20:01:26 +0100 Subject: [PATCH] #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 --- src/api/places.js | 5 ++- src/components/Explore/MapView.tsx | 33 +++++++++++-------- src/components/Explore/ObservationsView.js | 5 ++- .../Explore/hooks/useInfiniteExploreScroll.js | 2 ++ .../Explore/hooks/useMapLocation.ts | 16 +++++---- .../ProjectDetails/ProjectDetails.js | 4 ++- .../ProjectDetails/ProjectDetailsContainer.js | 11 +++++++ src/components/SharedComponents/Map/Map.tsx | 2 ++ src/providers/ExploreContext.tsx | 3 ++ 9 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/api/places.js b/src/api/places.js index b07c4dcfc..069741a12 100644 --- a/src/api/places.js +++ b/src/api/places.js @@ -10,7 +10,10 @@ const fetchPlace = async ( opts: Object = {} ): Promise => { 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 ); } diff --git a/src/components/Explore/MapView.tsx b/src/components/Explore/MapView.tsx index 6acca9050..af82470c4 100644 --- a/src/components/Explore/MapView.tsx +++ b/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 = ( { )} - + {isLoading + ? + : ( + + )} ); }; diff --git a/src/components/Explore/ObservationsView.js b/src/components/Explore/ObservationsView.js index 0e50a4806..0c1522997 100644 --- a/src/components/Explore/ObservationsView.js +++ b/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 ( { 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 diff --git a/src/components/ProjectDetails/ProjectDetails.js b/src/components/ProjectDetails/ProjectDetails.js index b1df8e0e6..e0d938ae2 100644 --- a/src/components/ProjectDetails/ProjectDetails.js +++ b/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] diff --git a/src/components/ProjectDetails/ProjectDetailsContainer.js b/src/components/ProjectDetails/ProjectDetailsContainer.js index a2c468456..3cdfdadc5 100644 --- a/src/components/ProjectDetails/ProjectDetailsContainer.js +++ b/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 ( diff --git a/src/components/SharedComponents/Map/Map.tsx b/src/components/SharedComponents/Map/Map.tsx index 98c0fa499..782542f66 100644 --- a/src/components/SharedComponents/Map/Map.tsx +++ b/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} diff --git a/src/providers/ExploreContext.tsx b/src/providers/ExploreContext.tsx index 849cd3231..1b6fe9c47 100644 --- a/src/providers/ExploreContext.tsx +++ b/src/providers/ExploreContext.tsx @@ -162,6 +162,9 @@ interface PLACE { point_geojson: { coordinates: Array }, + bounding_box_geojson?: { + coordinates: Array + }, type: string }