Fix selection from addl suggestions, including how we display common names

src/components/Match/AdditionalSuggestions/AdditionalSuggestionsScroll.js

@@ -7,7 +7,7 @@ import { useTranslation } from "sharedHooks";
 import SuggestionsResult from "./SuggestionsResult";
 
 const AdditionalSuggestionsScroll = ( {
-  otherSuggestions,
+  additionalSuggestions,
   suggestionsLoading,
   onSuggestionChosen
 } ) => {
@@ -42,7 +42,7 @@ const AdditionalSuggestionsScroll = ( {
     );
   };
 
-  if ( !suggestionsLoading && otherSuggestions?.length === 0 ) {
+  if ( !suggestionsLoading && additionalSuggestions?.length === 0 ) {
     return null;
   }
 
@@ -59,7 +59,7 @@ const AdditionalSuggestionsScroll = ( {
             renderItem={renderItem}
             estimatedItemSize={160}
             keyExtractor={item => item?.taxon?.id}
-            data={otherSuggestions}
+            data={additionalSuggestions}
           />
         )
         : <ActivityIndicator className="my-3" size={40} />}

src/components/Match/Match.js

@@ -10,7 +10,6 @@ import { View } from "components/styledComponents";
 import _ from "lodash";
 import React from "react";
 import { useTranslation } from "sharedHooks";
-import useStore from "stores/useStore";
 
 import AdditionalSuggestionsScroll
   from "./AdditionalSuggestions/AdditionalSuggestionsScroll";
@@ -23,31 +22,36 @@ const cardClassTop = "rounded-t-2xl border-lightGray border-[2px] p-4 border-b-0
 const cardClassBottom = "rounded-b-2xl border-lightGray border-[2px] pb-3 border-t-0 -mt-0.5 mb-4";
 
 type Props = {
-  observation: Object,
-  obsPhotos: Array<Object>,
-  handleSaveOrDiscardPress: ( ) => void,
-  navToTaxonDetails: ( ) => void,
   handleAddLocationPressed: ( ) => void,
+  handleSaveOrDiscardPress: ( ) => void,
+  isLoading: boolean,
+  navToTaxonDetails: ( ) => void,
+  obsPhotos: Array<Object>,
+  observation: Object,
   onSuggestionChosen: ( ) => void,
-  scrollRef: Object
+  scrollRef: Object,
+  suggestionsList: Array<Object>
 }
 
 const Match = ( {
-  observation,
-  obsPhotos,
-  handleSaveOrDiscardPress,
-  navToTaxonDetails,
   handleAddLocationPressed,
+  handleSaveOrDiscardPress,
+  isLoading,
+  navToTaxonDetails,
+  obsPhotos,
+  observation,
   onSuggestionChosen,
-  scrollRef
+  scrollRef,
+  suggestionsList
 }: Props ) => {
   const { t } = useTranslation( );
   const { isConnected } = useNetInfo( );
-  const isLoading = useStore( state => state.isLoading );
-  const suggestionsList = useStore( state => state.suggestionsList );
 
   const latitude = observation?.privateLatitude || observation?.latitude;
-  const taxon = suggestionsList?.[0]?.taxon;
+
+  const firstSuggestion = suggestionsList?.[0];
+  const taxon = firstSuggestion?.taxon;
+  const additionalSuggestions = _.tail( suggestionsList );
 
   return (
     <>
@@ -58,7 +62,7 @@ const Match = ( {
               ? (
                 <ActivityIndicator size={33} />
               )
-              : <MatchHeader topSuggestion={suggestionsList?.[0]} />
+              : <MatchHeader firstSuggestion={firstSuggestion} taxon={taxon} />
           }
         </View>
         <PhotosSection
@@ -94,7 +98,7 @@ const Match = ( {
           }
           <AdditionalSuggestionsScroll
             onSuggestionChosen={onSuggestionChosen}
-            otherSuggestions={_.tail( suggestionsList )}
+            additionalSuggestions={additionalSuggestions}
             isLoading={isLoading}
           />
           {!latitude && (

src/components/Match/MatchContainer.js

@@ -33,20 +33,18 @@ const MatchContainer = ( ) => {
   const currentObservation = useStore( state => state.currentObservation );
   const getCurrentObservation = useStore( state => state.getCurrentObservation );
   const cameraRollUris = useStore( state => state.cameraRollUris );
+  const suggestionsList = useStore( state => state.suggestionsList );
+  const isLoading = useStore( state => state.isLoading );
   const {
-    suggestionsList,
-    // NOTE: onlineSuggestions and offlineSuggestions are not used in this component
-    // except for debugging purposes. suggestionsList is the source of truth for suggestions
+    // NOTE: onlineSuggestions, offlineSuggestions, and fetchStatus are not used in this component
+    // except for debugging purposes. suggestionsList is the source of truth for suggestions.
     // this can be refactored at some point into something like a debugInfo object
     // but might be time consuming because of the way zustand handles nested objects
     onlineSuggestions,
     offlineSuggestions,
-    isLoading,
     fetchStatus
   } = useStore.getState( );
 
-  console.log( isLoading, "is loading" );
-
   const updateObservationKeys = useStore( state => state.updateObservationKeys );
   const navigation = useNavigation( );
   const {
@@ -93,6 +91,8 @@ const MatchContainer = ( ) => {
 
   const onSuggestionChosen = useCallback( selection => {
     const reorderedSuggestions = reorderSuggestionsWithSelectionFirst( selection, suggestionsList );
+    const first = reorderedSuggestions?.[0];
+    console.log( first, "first suggestions" );
     setSuggestionsList( reorderedSuggestions );
     scrollToTop( );
   }, [
@@ -136,13 +136,15 @@ const MatchContainer = ( ) => {
     <>
       <ViewWrapper isDebug={isDebug}>
         <Match
-          observation={currentObservation}
-          obsPhotos={obsPhotos}
-          onSuggestionChosen={onSuggestionChosen}
-          handleSaveOrDiscardPress={handleSaveOrDiscardPress}
-          navToTaxonDetails={navToTaxonDetails}
           handleAddLocationPressed={handleAddLocationPressed}
+          handleSaveOrDiscardPress={handleSaveOrDiscardPress}
+          isLoading={isLoading}
+          navToTaxonDetails={navToTaxonDetails}
+          obsPhotos={obsPhotos}
+          observation={currentObservation}
+          onSuggestionChosen={onSuggestionChosen}
           scrollRef={scrollRef}
+          suggestionsList={suggestionsList}
         />
         {renderPermissionsGate(
           {

src/components/Match/MatchHeader.js

@@ -10,37 +10,44 @@ import {
   View
 } from "components/styledComponents";
 import { RealmContext } from "providers/contexts.ts";
-import React from "react";
-import { useTranslation } from "sharedHooks";
+import React, { useCallback } from "react";
+import { useTaxon, useTranslation } from "sharedHooks";
 
 const { useRealm } = RealmContext;
 
 type Props = {
-  topSuggestion: Object
+  firstSuggestion: Object,
+  taxon: Object
 }
 
-const MatchHeader = ( { topSuggestion }: Props ) => {
+const MatchHeader = ( { firstSuggestion, taxon }: Props ) => {
   const { t } = useTranslation( );
   const realm = useRealm( );
-  const taxon = topSuggestion?.taxon;
+  const { taxon: localTaxon } = useTaxon( taxon, true );
+  const usableTaxon = localTaxon || taxon;
 
-  if ( !topSuggestion ) {
-    return (
-      <Body2>
-        {t( "iNaturalist-couldnt-identify-this-organism" )}
-      </Body2>
-    );
-  }
+  console.log( taxon, "Taxon" );
 
-  const confidence = calculateConfidence( topSuggestion );
+  const confidence = calculateConfidence( firstSuggestion );
 
-  const hasSeenSpecies = taxon?.id
+  const hasSeenSpecies = usableTaxon?.id
     ? realm.objects( "Observation" )
-      .filtered( `taxon.id == ${taxon.id} && taxon.rank_level == 10` )[0]
+      .filtered( `taxon.id == ${usableTaxon.id} && taxon.rank_level == 10` )[0]
     : false;
 
-  const suggestedTaxon = taxon;
-  const taxonId = taxon?.id || "unknown";
+  const taxonId = usableTaxon?.id || "unknown";
+
+  const showSuggestedTaxon = useCallback( ( ) => (
+    <View className="shrink">
+      <DisplayTaxonName
+        taxon={usableTaxon}
+        testID={`ObsDetails.taxon.${taxonId}`}
+        accessibilityHint={t( "Navigates-to-taxon-details" )}
+        topTextComponent={Heading1}
+        bottomTextComponent={Subheading2}
+      />
+    </View>
+  ), [t, usableTaxon, taxonId] );
 
   const observationStatus = ( ) => {
     let confidenceType = "may_have_observed";
@@ -96,17 +103,13 @@ const MatchHeader = ( { topSuggestion }: Props ) => {
     return congratulatoryText;
   };
 
-  const showSuggestedTaxon = ( ) => (
-    <View className="shrink">
-      <DisplayTaxonName
-        taxon={suggestedTaxon}
-        testID={`ObsDetails.taxon.${taxonId}`}
-        accessibilityHint={t( "Navigates-to-taxon-details" )}
-        topTextComponent={Heading1}
-        bottomTextComponent={Subheading2}
-      />
-    </View>
-  );
+  if ( !firstSuggestion ) {
+    return (
+      <Body2>
+        {t( "iNaturalist-couldnt-identify-this-organism" )}
+      </Body2>
+    );
+  }
 
   return (
     <View>