Use fields to limit response from search API; save taxon results in r…

…ealm (#1905)

src/components/Explore/SearchScreens/ExploreTaxonSearch.js

@@ -42,7 +42,7 @@ const ExploreTaxonSearch = ( {
   const [taxonQuery, setTaxonQuery] = useState( "" );
 
   const iconicTaxa = useIconicTaxa( { reload: false } );
-  const { taxonList, isLoading } = useTaxonSearch( taxonQuery );
+  const { taxaSearchResults, isLoading } = useTaxonSearch( taxonQuery );
 
   const onTaxonSelected = useCallback( async newTaxon => {
     updateTaxon( newTaxon );
@@ -75,7 +75,7 @@ const ExploreTaxonSearch = ( {
 
   let data = iconicTaxa;
   if ( taxonQuery.length > 0 ) {
-    data = taxonList;
+    data = taxaSearchResults;
   }
 
   return (

src/components/ObsEdit/BottomButtons.js

@@ -27,7 +27,6 @@ const { useRealm } = RealmContext;
 
 type Props = {
   passesEvidenceTest: boolean,
-  passesIdentificationTest: boolean,
   observations: Array<Object>,
   currentObservation: Object,
   currentObservationIndex: number,
@@ -38,7 +37,6 @@ const logger = log.extend( "ObsEditBottomButtons" );
 
 const BottomButtons = ( {
   passesEvidenceTest,
-  passesIdentificationTest,
   currentObservation,
   currentObservationIndex,
   observations,
@@ -62,7 +60,10 @@ const BottomButtons = ( {
   const [buttonPressed, setButtonPressed] = useState( null );
   const [loading, setLoading] = useState( false );
 
-  const passesTests = passesEvidenceTest && passesIdentificationTest;
+  const hasIdentification = currentObservation?.taxon
+    && currentObservation?.taxon.rank_level !== 100;
+
+  const passesTests = passesEvidenceTest && hasIdentification;
 
   const writeExifToCameraRollPhotos = useCallback( async exif => {
     if ( !cameraRollUris || cameraRollUris.length === 0 || !currentObservation ) {

src/components/ObsEdit/IdentificationSection.js

@@ -23,17 +23,13 @@ type Props = {
   currentObservation: Object,
   resetScreen: boolean,
   setResetScreen: Function,
-  passesIdentificationTest: boolean,
-  setPassesIdentificationTest: Function,
   updateObservationKeys: Function
 }
 
 const IdentificationSection = ( {
   currentObservation,
   resetScreen,
   setResetScreen,
-  passesIdentificationTest,
-  setPassesIdentificationTest,
   updateObservationKeys
 }: Props ): Node => {
   const { t } = useTranslation( );
@@ -72,12 +68,6 @@ const IdentificationSection = ( {
     navigation
   ] );
 
-  useEffect( ( ) => {
-    if ( hasIdentification && !passesIdentificationTest ) {
-      setPassesIdentificationTest( true );
-    }
-  }, [hasIdentification, setPassesIdentificationTest, passesIdentificationTest] );
-
   useEffect( ( ) => {
     // by adding resetScreen as a key in renderIconicTaxonChooser,
     // we force React to rerender and reset the horizontal scroll position
@@ -152,6 +142,7 @@ const IdentificationSection = ( {
           <TaxonResult
             accessibilityLabel={t( "Edits-this-observations-taxon" )}
             asListItem={false}
+            fetchRemote={false}
             handleTaxonOrEditPress={navToSuggestions}
             handleRemovePress={removeTaxon}
             hideInfoButton

src/components/ObsEdit/ObsEdit.js

@@ -31,7 +31,6 @@ const ObsEdit = ( ): Node => {
   const setCurrentObservationIndex = useStore( state => state.setCurrentObservationIndex );
   const updateObservationKeys = useStore( state => state.updateObservationKeys );
   const [passesEvidenceTest, setPassesEvidenceTest] = useState( false );
-  const [passesIdentificationTest, setPassesIdentificationTest] = useState( false );
   const [resetScreen, setResetScreen] = useState( false );
   const isFocused = useIsFocused( );
   const currentUser = useCurrentUser( );
@@ -113,9 +112,7 @@ const ObsEdit = ( ): Node => {
                 />
                 <IdentificationSection
                   currentObservation={currentObservation}
-                  passesIdentificationTest={passesIdentificationTest}
                   resetScreen={resetScreen}
-                  setPassesIdentificationTest={setPassesIdentificationTest}
                   setResetScreen={setResetScreen}
                   updateObservationKeys={updateObservationKeys}
                 />
@@ -133,7 +130,6 @@ const ObsEdit = ( ): Node => {
         currentObservationIndex={currentObservationIndex}
         observations={observations}
         passesEvidenceTest={passesEvidenceTest}
-        passesIdentificationTest={passesIdentificationTest}
         setCurrentObservationIndex={setCurrentObservationIndex}
       />
       {renderLocationPermissionGate( {

src/components/Suggestions/Suggestion.js

@@ -12,15 +12,13 @@ import {
 
 type Props = {
   accessibilityLabel: string,
-  fetchRemote: boolean,
   onTaxonChosen: Function,
   suggestion: Object,
   isTopSuggestion?: boolean
 };
 
 const Suggestion = ( {
   accessibilityLabel,
-  fetchRemote,
   suggestion,
   onTaxonChosen,
   isTopSuggestion = false
@@ -32,7 +30,7 @@ const Suggestion = ( {
       ? convertOfflineScoreToConfidence( suggestion?.score )
       : convertOnlineScoreToConfidence( suggestion?.combined_score )}
     confidencePosition="text"
-    fetchRemote={fetchRemote}
+    fetchRemote={false}
     first
     isTopSuggestion={isTopSuggestion}
     handleCheckmarkPress={onTaxonChosen}

src/components/Suggestions/Suggestions.js

@@ -69,11 +69,10 @@ const Suggestions = ( {
   const renderSuggestion = useCallback( ( { item: suggestion } ) => (
     <Suggestion
       accessibilityLabel={t( "Choose-taxon" )}
-      fetchRemote={!usingOfflineSuggestions}
       suggestion={suggestion}
       onTaxonChosen={onTaxonChosen}
     />
-  ), [onTaxonChosen, t, usingOfflineSuggestions] );
+  ), [onTaxonChosen, t] );
 
   const renderEmptyList = useCallback( ( ) => (
     <SuggestionsEmpty
@@ -148,7 +147,6 @@ const Suggestions = ( {
       <View className="bg-inatGreen/[.13]">
         <Suggestion
           accessibilityLabel={t( "Choose-taxon" )}
-          fetchRemote={!usingOfflineSuggestions}
           suggestion={item}
           isTopSuggestion
           onTaxonChosen={onTaxonChosen}

src/components/Suggestions/SuggestionsLoading.tsx

@@ -28,7 +28,6 @@ const SuggestionsLoading = ( {
       <View className="pt-6" />
       <Suggestion
         accessibilityLabel={t( "Choose-taxon" )}
-        fetchRemote={false}
         suggestion={aiCameraSuggestion}
         onTaxonChosen={onTaxonChosen}
       />

src/components/Suggestions/TaxonSearch.js

@@ -27,7 +27,7 @@ const DROP_SHADOW = getShadowForColor( colors.darkGray, {
 const TaxonSearch = ( ): Node => {
   const [taxonQuery, setTaxonQuery] = useState( "" );
   const [selectedTaxon, setSelectedTaxon] = useState( null );
-  const { taxonList } = useTaxonSearch( taxonQuery );
+  const { taxaSearchResults } = useTaxonSearch( taxonQuery );
   const { t } = useTranslation( );
 
   useNavigateWithTaxonSelected(
@@ -65,10 +65,9 @@ const TaxonSearch = ( ): Node => {
           autoFocus={taxonQuery === ""}
         />
       </View>
-
       <FlatList
         keyboardShouldPersistTaps="always"
-        data={taxonList}
+        data={taxaSearchResults}
         renderItem={renderTaxonResult}
         keyExtractor={item => item.id}
         ListFooterComponent={renderFooter}

src/components/Suggestions/hooks/useOnlineSuggestions.ts

@@ -3,15 +3,20 @@ import {
 } from "@react-native-community/netinfo";
 import { useQueryClient } from "@tanstack/react-query";
 import scoreImage from "api/computerVision";
+import { RealmContext } from "providers/contexts";
 import {
   useCallback, useEffect, useState
 } from "react";
+import Taxon from "realmModels/Taxon";
+import safeRealmWrite from "sharedHelpers/safeRealmWrite";
 import {
   useAuthenticatedQuery
 } from "sharedHooks";
 
 const SCORE_IMAGE_TIMEOUT = 5_000;
 
+const { useRealm } = RealmContext;
+
 type OnlineSuggestionsResponse = {
   dataUpdatedAt: Date,
   onlineSuggestions: Object,
@@ -25,6 +30,7 @@ type OnlineSuggestionsResponse = {
 const useOnlineSuggestions = (
   options: Object
 ): OnlineSuggestionsResponse => {
+  const realm = useRealm( );
   const {
     dispatch,
     flattenedUploadParams,
@@ -84,13 +90,37 @@ const useOnlineSuggestions = (
     }
   }, [isConnected, dispatch] );
 
+  const saveTaxaToRealm = useCallback( ( ) => {
+    // we're already getting all this taxon information anytime we make this API
+    // call, so we might as well store it in realm immediately instead of waiting
+    // for useTaxon to fetch individual taxon results
+    const mappedTaxa = onlineSuggestions?.results?.map(
+      suggestion => Taxon.mapApiToRealm( suggestion.taxon, realm )
+    );
+    if ( onlineSuggestions?.common_ancestor ) {
+      const mappedCommonAncestor = Taxon
+        .mapApiToRealm( onlineSuggestions?.common_ancestor.taxon, realm );
+      mappedTaxa.push( mappedCommonAncestor );
+    }
+    safeRealmWrite( realm, ( ) => {
+      mappedTaxa.forEach( remoteTaxon => {
+        realm.create(
+          "Taxon",
+          { ...remoteTaxon, _synced_at: new Date( ) },
+          "modified"
+        );
+      } );
+    }, "saving remote taxon from onlineSuggestions" );
+  }, [realm, onlineSuggestions] );
+
   useEffect( ( ) => {
     if ( onlineSuggestions !== undefined ) {
+      saveTaxaToRealm( );
       dispatch( { type: "SET_FETCH_STATUS", fetchStatus: "online-fetched" } );
     } else if ( error ) {
       dispatch( { type: "SET_FETCH_STATUS", fetchStatus: "online-error" } );
     }
-  }, [dispatch, onlineSuggestions, error] );
+  }, [dispatch, onlineSuggestions, error, saveTaxaToRealm] );
 
   const queryObject = {
     dataUpdatedAt,

src/sharedHooks/useTaxon.js

@@ -32,6 +32,8 @@ const useTaxon = ( taxon: Object, fetchRemote = true ): Object => {
       // Sync if the local copy hasn't been synced in a week
       localTaxon._synced_at && ( Date.now( ) - localTaxon._synced_at > ONE_WEEK_MS )
     )
+    // Sync if missing a common name or default photo from being saved in Realm while offline
+    || ( !localTaxon.preferred_common_name || !localTaxon.default_photo?.url )
   );
   const enabled = !!( canFetchTaxon && fetchRemote && localTaxonNeedsSync );
 
@@ -40,7 +42,7 @@ const useTaxon = ( taxon: Object, fetchRemote = true ): Object => {
     isLoading
   } = useAuthenticatedQuery(
     ["fetchTaxon", taxonId],
-    optsWithAuth => fetchTaxon( taxonId, { fields: Taxon.TAXON_FIELDS }, optsWithAuth ),
+    optsWithAuth => fetchTaxon( taxonId, { fields: Taxon.SCORE_IMAGE_FIELDS }, optsWithAuth ),
     {
       enabled
     }

src/sharedHooks/useTaxonSearch.js

@@ -1,15 +1,27 @@
 // @flow
 
 import fetchSearchResults from "api/search";
+import { RealmContext } from "providers/contexts";
+import {
+  useCallback, useEffect
+} from "react";
+import Taxon from "realmModels/Taxon";
+import safeRealmWrite from "sharedHelpers/safeRealmWrite";
 import { useAuthenticatedQuery } from "sharedHooks";
 
+const { useRealm } = RealmContext;
+
 const useTaxonSearch = ( taxonQuery: string ): Object => {
-  const { data: taxonList, isLoading } = useAuthenticatedQuery(
+  const realm = useRealm( );
+  const { data: taxaSearchResults, isLoading } = useAuthenticatedQuery(
     ["fetchTaxonSuggestions", taxonQuery],
     optsWithAuth => fetchSearchResults(
       {
         q: taxonQuery,
-        sources: "taxa"
+        sources: "taxa",
+        fields: {
+          taxon: Taxon.SCORE_IMAGE_FIELDS
+        }
       },
       optsWithAuth
     ),
@@ -18,7 +30,31 @@ const useTaxonSearch = ( taxonQuery: string ): Object => {
     }
   );
 
-  return { taxonList, isLoading };
+  const saveTaxaToRealm = useCallback( ( ) => {
+    // we're already getting all this taxon information anytime we make this API
+    // call, so we might as well store it in realm. we can remove this if
+    // we're worried about the cache getting too large
+    const mappedTaxa = taxaSearchResults?.map(
+      result => Taxon.mapApiToRealm( result, realm )
+    );
+    safeRealmWrite( realm, ( ) => {
+      mappedTaxa.forEach( remoteTaxon => {
+        realm.create(
+          "Taxon",
+          { ...remoteTaxon, _synced_at: new Date( ) },
+          "modified"
+        );
+      } );
+    }, "saving remote taxon from useTaxonSearch" );
+  }, [realm, taxaSearchResults] );
+
+  useEffect( ( ) => {
+    if ( taxaSearchResults?.length > 0 ) {
+      saveTaxaToRealm( );
+    }
+  }, [saveTaxaToRealm, taxaSearchResults] );
+
+  return { taxaSearchResults, isLoading };
 };
 
 export default useTaxonSearch;

tests/unit/components/ObsEdit/IdentificationSection.test.js

@@ -35,7 +35,6 @@ const renderIdentificationSection = ( obs, index = 0, resetState = false ) => re
   <IdentificationSection
     currentObservation={obs[index]}
     observations={obs}
-    passesIdentificationTest
     resetState={resetState}
   />
 );

tests/unit/components/Suggestions/TaxonSearch.test.js

@@ -28,7 +28,7 @@ const mockTaxaList = [
 
 jest.mock( "sharedHooks/useTaxonSearch", () => ( {
   __esModule: true,
-  default: ( ) => ( { taxonList: mockTaxaList, isLoading: false } )
+  default: ( ) => ( { taxaSearchResults: mockTaxaList, isLoading: false } )
 } ) );
 
 jest.mock( "sharedHooks/useTaxon", () => ( {
@@ -70,7 +70,7 @@ describe( "TaxonSearch", ( ) => {
 
   it( "show taxon search results", async ( ) => {
     inatjs.taxa.search.mockResolvedValue(
-      makeResponse( { taxonList: mockTaxaList, isLoading: false } )
+      makeResponse( { taxaSearchResults: mockTaxaList, isLoading: false } )
     );
     renderComponent( <TaxonSearch /> );
     const input = screen.getByTestId( "SearchTaxon" );