Fix missing map tiles when taxon chosen on Explore

The problem was the iconic_taxa param was being incorrectly set to an array... but setting it correctly involved changing the IconicTaxonChooser and the way we update Explore state when setting a taxon or setting the unknown iconic taxon filter. * IconicTaxonChooser no longer takes a taxon or manages its own state * Setting iconic taxon filter to Unknown is now its own action * Unsetting a taxon can be done with the CHOOSE_TAXON action by setting taxon to null or undefined * Omitted some extraneous params from tile requests
inaturalist · Jun 28, 2024 · 08f4e2f · 08f4e2f
1 parent b2ccf01
commit 08f4e2f
Show file tree

Hide file tree

Showing 14 changed files with 242 additions and 202 deletions.
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
@@ -1477,12 +1477,12 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: d3f49c53809116a5d38da093a8aa78bf551aed09
   BVLinearGradient: 880f91a7854faff2df62518f0281afb1c60d49a3
-  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
+  DoubleConversion: fea03f2699887d960129cc54bba7e52542b6f953
   FasterImage: 60d0750ddbcefff0070c4c17309c2d1d6cc650f0
   FBLazyVector: 9f533d5a4c75ca77c8ed774aced1a91a0701781e
   FBReactNativeSpec: 40b791f4a1df779e7e4aa12c000319f4f216d40a
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b
+  glog: c5d68082e772fa1c511173d6b30a9de2c05a69a2
   hermes-engine: 39589e9c297d024e90fe68f6830ff86c4e01498a
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   MMKV: 506311d0494023c2f7e0b62cc1f31b7370fa3cfb

diff --git a/src/components/Developer/UiLibrary/Misc.js b/src/components/Developer/UiLibrary/Misc.js
@@ -344,11 +344,7 @@ const Misc = (): Node => {
         <ConfidenceInterval confidence={3} activeColor="bg-inatGreen" />
         <Heading2 className="my-2">Iconic Taxon Chooser</Heading2>
         <IconicTaxonChooser
-          taxon={{
-            name: "Aves",
-            id: 3,
-            iconic_taxon_name: "Aves"
-          }}
+          chosen={["aves"]}
           before={<Button text={t( "ADD-AN-ID" )} className="rounded-full" />}
           onTaxonChosen={taxon => console.log( "taxon selected:", taxon )}
         />

diff --git a/src/components/Explore/Explore.js b/src/components/Explore/Explore.js
@@ -45,6 +45,7 @@ const exploreViewIcon = {
 type Props = {
   closeFiltersModal: Function,
   count: Object,
+  filterByIconicTaxonUnknown: Function,
   hideBackButton: boolean,
   isOnline: boolean,
   loadingStatus: boolean,
@@ -61,6 +62,7 @@ type Props = {
 const Explore = ( {
   closeFiltersModal,
   count,
+  filterByIconicTaxonUnknown,
   hideBackButton,
   isOnline,
   loadingStatus,
@@ -256,6 +258,7 @@ const Explore = ( {
       <ExploreFiltersModal
         showModal={showFiltersModal}
         closeModal={closeFiltersModal}
+        filterByIconicTaxonUnknown={filterByIconicTaxonUnknown}
         updateTaxon={updateTaxon}
         updateLocation={updateLocation}
         updateUser={updateUser}

diff --git a/src/components/Explore/ExploreContainer.js b/src/components/Explore/ExploreContainer.js
@@ -32,22 +32,6 @@ const ExploreContainerWithContext = ( ): Node => {
 
   useParams( );
 
-  const updateTaxon = ( taxon: Object ) => {
-    if ( !taxon ) {
-      dispatch( {
-        type: EXPLORE_ACTION.CHANGE_TAXON_NONE,
-        taxon: null
-      } );
-    } else {
-      dispatch( {
-        type: EXPLORE_ACTION.CHANGE_TAXON,
-        taxon,
-        taxonId: taxon?.id,
-        taxonName: taxon?.preferred_common_name || taxon?.name
-      } );
-    }
-  };
-
   const updateLocation = ( place: Object ) => {
     if ( place === "worldwide" ) {
       dispatch( {
@@ -113,13 +97,16 @@ const ExploreContainerWithContext = ( ): Node => {
       closeFiltersModal={closeFiltersModal}
       count={count}
       hideBackButton={false}
+      filterByIconicTaxonUnknown={
+        () => dispatch( { type: EXPLORE_ACTION.FILTER_BY_ICONIC_TAXON_UNKNOWN } )
+      }
       isOnline={isOnline}
       loadingStatus={loadingStatus}
       openFiltersModal={openFiltersModal}
       queryParams={queryParams}
       showFiltersModal={showFiltersModal}
       updateCount={updateCount}
-      updateTaxon={updateTaxon}
+      updateTaxon={taxon => dispatch( { type: EXPLORE_ACTION.CHANGE_TAXON, taxon } )}
       updateLocation={updateLocation}
       updateUser={updateUser}
       updateProject={updateProject}

diff --git a/src/components/Explore/Header/Header.js b/src/components/Explore/Header/Header.js
@@ -48,6 +48,7 @@ const Header = ( {
   const theme = useTheme( );
   const { state, numberOfFilters } = useExplore( );
   const { taxon } = state;
+  const iconicTaxonNames = state.iconic_taxa || [];
   const placeGuess = state.place_guess;
   const [showTaxonSearch, setShowTaxonSearch] = useState( false );
   const [showLocationSearch, setShowLocationSearch] = useState( false );
@@ -71,11 +72,11 @@ const Header = ( {
               />
             ) }
             <View className="flex-1">
-              {taxon
+              {( taxon || iconicTaxonNames.indexOf( "unknown" ) >= 0 )
                 ? (
                   <DisplayTaxon
                     accessibilityLabel={t( "Change-taxon-filter" )}
-                    taxon={taxon}
+                    taxon={taxon || "unknown"}
                     showInfoButton={false}
                     showCheckmark={false}
                     handlePress={() => setShowTaxonSearch( true )}

diff --git a/src/components/Explore/MapView.js b/src/components/Explore/MapView.js
@@ -28,7 +28,7 @@ type Props = {
 
 const MapView = ( {
   observations,
-  queryParams: tileMapParams
+  queryParams
 }: Props ): Node => {
   const { t } = useTranslation( );
   const { isDebug } = useDebugMode( );
@@ -48,6 +48,14 @@ const MapView = ( {
     updateMapBoundaries
   } = useMapLocation( );
 
+  const tileMapParams = {
+    ...queryParams
+  };
+  // Tile queries never need these params
+  delete tileMapParams.return_bounds;
+  delete tileMapParams.order;
+  delete tileMapParams.orderBy;
+
   return (
     <View className="flex-1 overflow-hidden h-full">
       <View className="z-10">

diff --git a/src/components/Explore/Modals/ExploreFiltersModal.js b/src/components/Explore/Modals/ExploreFiltersModal.js
@@ -9,6 +9,7 @@ import FilterModal from "./FilterModal";
 type Props = {
   showModal: boolean,
   closeModal: Function,
+  filterByIconicTaxonUnknown: Function,
   updateTaxon: Function,
   updateLocation: Function,
   updateUser: Function,
@@ -18,6 +19,7 @@ type Props = {
 const ExploreFiltersModal = ( {
   showModal,
   closeModal,
+  filterByIconicTaxonUnknown,
   updateTaxon,
   updateLocation,
   updateUser,
@@ -31,6 +33,7 @@ const ExploreFiltersModal = ( {
     modal={(
       <FilterModal
         closeModal={closeModal}
+        filterByIconicTaxonUnknown={filterByIconicTaxonUnknown}
         updateTaxon={updateTaxon}
         updateLocation={updateLocation}
         updateUser={updateUser}

diff --git a/src/components/Explore/Modals/FilterModal.tsx b/src/components/Explore/Modals/FilterModal.tsx
@@ -58,6 +58,7 @@ const { useRealm } = RealmContext;
 
 interface Props {
   closeModal: Function,
+  filterByIconicTaxonUnknown: Function
   updateTaxon: Function,
   updateLocation: Function,
   updateUser: Function,
@@ -66,6 +67,7 @@ interface Props {
 
 const FilterModal = ( {
   closeModal,
+  filterByIconicTaxonUnknown,
   updateTaxon,
   updateLocation,
   updateUser,
@@ -85,30 +87,31 @@ const FilterModal = ( {
     defaultExploreLocation
   } = useExplore();
   const {
-    taxon,
-    place_guess: placeGuess,
-    user,
-    project,
-    sortBy,
-    researchGrade,
-    needsID,
     casual,
-    hrank,
-    lrank,
-    dateObserved,
-    observed_on: observedOn,
+    created_d1: createdD1,
+    created_d2: createdD2,
+    created_on: createdOn,
     d1,
     d2,
-    months,
+    dateObserved,
     dateUploaded,
-    created_on: createdOn,
-    created_d1: createdD1,
-    created_d2: createdD2,
-    media,
     establishmentMean,
-    wildStatus,
+    hrank,
+    iconic_taxa: iconicTaxonNames,
+    lrank,
+    media,
+    months,
+    needsID,
+    observed_on: observedOn,
+    photoLicense,
+    place_guess: placeGuess,
+    project,
+    researchGrade,
     reviewedFilter,
-    photoLicense
+    sortBy,
+    taxon,
+    user,
+    wildStatus
   } = state;
 
   const NONE = "NONE";
@@ -678,7 +681,7 @@ const FilterModal = ( {
         <View className="mb-7">
           <Heading4 className="px-4 mb-5">{t( "TAXON" )}</Heading4>
           <View className="px-4 mb-5">
-            {taxon
+            {( taxon || ( iconicTaxonNames || [] ).indexOf( "unknown" ) >= 0 )
               ? (
                 <Pressable
                   className="flex-row justify-between items-center"
@@ -688,7 +691,7 @@ const FilterModal = ( {
                     setShowTaxonSearchModal( true );
                   }}
                 >
-                  <DisplayTaxon taxon={taxon} />
+                  <DisplayTaxon taxon={taxon || "unknown"} />
                   <INatIcon name="edit" size={22} />
                 </Pressable>
               )
@@ -704,16 +707,21 @@ const FilterModal = ( {
           </View>
           <IconicTaxonChooser
             before
-            taxon={taxon}
+            chosen={iconicTaxonNames || [taxon?.name?.toLowerCase()]}
             onTaxonChosen={( taxonName: string ) => {
               if ( taxonName === "unknown" ) {
-                updateTaxon( );
+                if ( ( iconicTaxonNames || [] ).indexOf( taxonName ) >= 0 ) {
+                  updateTaxon( null );
+                } else {
+                  filterByIconicTaxonUnknown();
+                }
+              } else if ( taxon?.name?.toLowerCase() === taxonName ) {
+                updateTaxon( null );
               } else {
                 const selectedTaxon = realm
                   ?.objects( "Taxon" )
                   .filtered( "name CONTAINS[c] $0", taxonName );
-                const iconicTaxon
-                = selectedTaxon.length > 0
+                const iconicTaxon = selectedTaxon.length > 0
                   ? selectedTaxon[0]
                   : null;
                 updateTaxon( iconicTaxon );

diff --git a/src/components/Explore/RootExploreContainer.js b/src/components/Explore/RootExploreContainer.js
@@ -36,22 +36,6 @@ const RootExploreContainerWithContext = ( ): Node => {
 
   const [showFiltersModal, setShowFiltersModal] = useState( false );
 
-  const updateTaxon = ( taxon: Object ) => {
-    if ( !taxon ) {
-      dispatch( {
-        type: EXPLORE_ACTION.CHANGE_TAXON_NONE,
-        taxon: null
-      } );
-    } else {
-      dispatch( {
-        type: EXPLORE_ACTION.CHANGE_TAXON,
-        taxon,
-        taxonId: taxon?.id,
-        taxonName: taxon?.preferred_common_name || taxon?.name
-      } );
-    }
-  };
-
   const updateLocation = ( place: Object ) => {
     if ( place === "worldwide" ) {
       dispatch( {
@@ -144,13 +128,16 @@ const RootExploreContainerWithContext = ( ): Node => {
         closeFiltersModal={closeFiltersModal}
         count={count}
         hideBackButton
+        filterByIconicTaxonUnknown={
+          () => dispatch( { type: EXPLORE_ACTION.FILTER_BY_ICONIC_TAXON_UNKNOWN } )
+        }
         isOnline={isOnline}
         loadingStatus={loadingStatus}
         openFiltersModal={openFiltersModal}
         queryParams={queryParams}
         showFiltersModal={showFiltersModal}
         updateCount={updateCount}
-        updateTaxon={updateTaxon}
+        updateTaxon={taxon => dispatch( { type: EXPLORE_ACTION.CHANGE_TAXON, taxon } )}
         updateLocation={updateLocation}
         updateUser={updateUser}
         updateProject={updateProject}