Fix #2323 - view taxon observations from explore screen by tapping on…

… taxon (#2554) * Fix #2323 - view taxon observations from explore screen by tapping on taxon * Updated test snapshots
inaturalist · Dec 18, 2024 · 2162f55 · 2162f55
1 parent 741ee90
commit 2162f55
Show file tree

Hide file tree

Showing 14 changed files with 79 additions and 38 deletions.
diff --git a/src/components/Explore/TaxonGridItem.tsx b/src/components/Explore/TaxonGridItem.tsx
@@ -1,32 +1,42 @@
 import { useNavigation, useRoute } from "@react-navigation/native";
 import ObsImagePreview from "components/ObservationsFlashList/ObsImagePreview";
-import { Body4, DisplayTaxonName } from "components/SharedComponents";
+import { Body4, DisplayTaxonName, INatIcon } from "components/SharedComponents";
 import SpeciesSeenCheckmark from "components/SharedComponents/SpeciesSeenCheckmark";
 import { Pressable, View } from "components/styledComponents";
+import {
+  EXPLORE_ACTION,
+  useExplore
+} from "providers/ExploreContext.tsx";
 import type { Node } from "react";
 import React from "react";
 import Photo from "realmModels/Photo";
 import { accessibleTaxonName } from "sharedHelpers/taxon";
 import { useCurrentUser, useFontScale, useTranslation } from "sharedHooks";
+import colors from "styles/tailwindColors";
 
 interface Props {
   count: number;
   showSpeciesSeenCheckmark: boolean;
   style?: Object;
+  setCurrentExploreView: Function,
   // I guess this is expecting an API response and not a RealmTaxon
   taxon: {
     default_photo: Object;
     iconic_taxon_name: string;
     id: number;
+    preferred_common_name: string;
+    name: string;
   };
 }
 
 const TaxonGridItem = ( {
   count,
   showSpeciesSeenCheckmark = false,
   style,
-  taxon
+  taxon,
+  setCurrentExploreView
 }: Props ): Node => {
+  const { dispatch } = useExplore( );
   const navigation = useNavigation( );
   const { t } = useTranslation( );
   const currentUser = useCurrentUser( );
@@ -72,6 +82,24 @@ const TaxonGridItem = ( {
           </View>
         )}
 
+        {count && (
+          <Pressable
+            accessibilityRole="button"
+            className="absolute top-0 right-0 pr-3 pt-3"
+            onPress={( ) => {
+              dispatch( {
+                type: EXPLORE_ACTION.CHANGE_TAXON,
+                taxon,
+                taxonId: taxon?.id,
+                taxonName: taxon?.preferred_common_name || taxon?.name
+              } );
+              setCurrentExploreView( "observations" );
+            }}
+          >
+            <INatIcon name="observations" size={15} color={colors.white} dropShadow />
+          </Pressable>
+        )}
+
         <View className="absolute bottom-0 flex p-2 w-full">
           {count && (
             <Body4

diff --git a/src/components/SharedComponents/INatIcon/index.tsx b/src/components/SharedComponents/INatIcon/index.tsx
@@ -8,6 +8,7 @@ interface Props {
   name: string;
   color?: string;
   size?: number;
+  dropShadow?: boolean;
 }
 
 type Aliases = {
@@ -81,13 +82,23 @@ const ALIASES: Aliases = {
 
 // Use default color if none is specified
 const INatIcon = ( {
-  testID, name, color, size
-}: Props ) => (
-  <Icon
-    testID={testID}
-    name={ALIASES[name] || name}
-    color={color || colors.darkGray}
-    size={size}
-  />
-);
+  testID, name, color, size, dropShadow
+}: Props ) => {
+  const style = dropShadow
+    ? {
+      shadowOpacity: 2,
+      textShadowRadius: 4,
+      textShadowOffset: { width: 2, height: 2 }
+    }
+    : null;
+  return (
+    <Icon
+      testID={testID}
+      name={ALIASES[name] || name}
+      color={color || colors.darkGray}
+      size={size}
+      style={style}
+    />
+  );
+};
 export default INatIcon;
diff --git a/src/providers/ExploreContext.tsx b/src/providers/ExploreContext.tsx
@@ -230,6 +230,8 @@ type Action = {type: EXPLORE_ACTION.RESET}
   | {
     type: EXPLORE_ACTION.CHANGE_TAXON,
     taxon: { id: number } | null,
+    taxonId: number,
+    taxonName: string,
     storedState: State
   }
   | { type: EXPLORE_ACTION.FILTER_BY_ICONIC_TAXON_UNKNOWN }

diff --git a/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap b/tests/unit/components/BottomTabNavigator/__snapshots__/CustomTabBar.test.js.snap
@@ -136,7 +136,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
                   "color": "#454545",
                   "fontSize": 32,
                 },
-                undefined,
+                null,
                 {
                   "fontFamily": "INatIcon",
                   "fontStyle": "normal",
@@ -224,7 +224,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
                   "color": "#454545",
                   "fontSize": 40,
                 },
-                undefined,
+                null,
                 {
                   "fontFamily": "INatIcon",
                   "fontStyle": "normal",
@@ -359,7 +359,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
                     "color": "#ffffff",
                     "fontSize": 31,
                   },
-                  undefined,
+                  null,
                   {
                     "fontFamily": "INatIcon",
                     "fontStyle": "normal",
@@ -448,7 +448,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
                   "color": "#74AC00",
                   "fontSize": 40,
                 },
-                undefined,
+                null,
                 {
                   "fontFamily": "INatIcon",
                   "fontStyle": "normal",
@@ -536,7 +536,7 @@ exports[`CustomTabBar with advanced user layout should render correctly 1`] = `
                   "color": "#454545",
                   "fontSize": 32,
                 },
-                undefined,
+                null,
                 {
                   "fontFamily": "INatIcon",
                   "fontStyle": "normal",

diff --git a/...s/unit/components/SharedComponents/ActivityCount/__snapshots__/ActivityCount.test.js.snap b/...s/unit/components/SharedComponents/ActivityCount/__snapshots__/ActivityCount.test.js.snap
@@ -26,7 +26,7 @@ exports[`ActivityCount renders reliably 1`] = `
           "color": "#454545",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",

diff --git a/...s/unit/components/SharedComponents/ActivityCount/__snapshots__/CommentsCount.test.js.snap b/...s/unit/components/SharedComponents/ActivityCount/__snapshots__/CommentsCount.test.js.snap
@@ -26,7 +26,7 @@ exports[`CommentsCount renders default reliably 1`] = `
           "color": "#454545",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",
@@ -101,7 +101,7 @@ exports[`CommentsCount renders filled reliably 1`] = `
           "color": "#454545",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",
@@ -176,7 +176,7 @@ exports[`CommentsCount renders white reliably 1`] = `
           "color": "#ffffff",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",

diff --git a/...components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap b/...components/SharedComponents/ActivityCount/__snapshots__/IdentificationsCount.test.js.snap
@@ -26,7 +26,7 @@ exports[`IdentificationsCount renders default reliably 1`] = `
           "color": "#454545",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",
@@ -101,7 +101,7 @@ exports[`IdentificationsCount renders filled reliably 1`] = `
           "color": "#454545",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",
@@ -176,7 +176,7 @@ exports[`IdentificationsCount renders white reliably 1`] = `
           "color": "#ffffff",
           "fontSize": 14,
         },
-        undefined,
+        null,
         {
           "fontFamily": "INatIcon",
           "fontStyle": "normal",

diff --git a/tests/unit/components/SharedComponents/Buttons/__snapshots__/INatIconButton.test.js.snap b/tests/unit/components/SharedComponents/Buttons/__snapshots__/INatIconButton.test.js.snap
@@ -73,7 +73,7 @@ exports[`INatIconButton renders correctly 1`] = `
             "color": "#454545",
             "fontSize": 18,
           },
-          undefined,
+          null,
           {
             "fontFamily": "INatIcon",
             "fontStyle": "normal",

diff --git a/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap b/tests/unit/components/SharedComponents/InlineUser/__snapshots__/InlineUser.test.js.snap
@@ -183,7 +183,7 @@ exports[`InlineUser when offline renders reliably 1`] = `
             "color": "#454545",
             "fontSize": 22,
           },
-          undefined,
+          null,
           {
             "fontFamily": "INatIcon",
             "fontStyle": "normal",
@@ -311,7 +311,7 @@ exports[`InlineUser when user has no icon set renders reliably 1`] = `
             "color": "#454545",
             "fontSize": 22,
           },
-          undefined,
+          null,
           {
             "fontFamily": "INatIcon",
             "fontStyle": "normal",

diff --git a/.../components/SharedComponents/ObservationsFlashList/__snapshots__/ObsGridItem.test.js.snap b/.../components/SharedComponents/ObservationsFlashList/__snapshots__/ObsGridItem.test.js.snap
@@ -107,7 +107,7 @@ exports[`ObsGridItem for an observation with a photo should render 1`] = `
                 "color": "#BFBFBF33",
                 "fontSize": 100,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",
@@ -351,7 +351,7 @@ exports[`ObsGridItem for an observation without a photo should render 1`] = `
                 "color": "#BFBFBF33",
                 "fontSize": 100,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",

diff --git a/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap b/tests/unit/components/SharedComponents/UploadStatus/__snapshots__/UploadStatus.test.js.snap
@@ -85,7 +85,7 @@ exports[`UploadStatus displays complete icon when progress is 1 1`] = `
                   "color": "#74AC00",
                   "fontSize": 28,
                 },
-                undefined,
+                null,
                 {
                   "fontFamily": "INatIcon",
                   "fontStyle": "normal",
@@ -190,7 +190,7 @@ exports[`UploadStatus displays progress bar when progress is greater than 5% 1`]
                 "color": "#454545",
                 "fontSize": 15,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",
@@ -275,7 +275,7 @@ exports[`UploadStatus displays rotating circle progress when upload is queued bu
                 "color": "#454545",
                 "fontSize": 15,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",
@@ -323,7 +323,7 @@ exports[`UploadStatus displays rotating circle progress when upload is queued bu
                 "color": "#454545",
                 "fontSize": 33,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",
@@ -429,7 +429,7 @@ exports[`UploadStatus displays start icon when upload is unsynced and not queued
                 "color": "#454545",
                 "fontSize": 33,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",

diff --git a/tests/unit/components/SharedComponents/__snapshots__/Checkbox.test.js.snap b/tests/unit/components/SharedComponents/__snapshots__/Checkbox.test.js.snap
@@ -268,7 +268,7 @@ exports[`Checkbox renders reliably being checked 1`] = `
               "color": "#ffffff",
               "fontSize": 19,
             },
-            undefined,
+            null,
             {
               "fontFamily": "INatIcon",
               "fontStyle": "normal",

diff --git a/tests/unit/components/SharedComponents/__snapshots__/TaxonResult.test.js.snap b/tests/unit/components/SharedComponents/__snapshots__/TaxonResult.test.js.snap
@@ -245,7 +245,7 @@ exports[`TaxonResult should render correctly 1`] = `
                       "color": "#454545",
                       "fontSize": 22,
                     },
-                    undefined,
+                    null,
                     {
                       "fontFamily": "INatIcon",
                       "fontStyle": "normal",
@@ -497,7 +497,7 @@ exports[`TaxonResult should render correctly 1`] = `
                 "color": "#454545",
                 "fontSize": 22,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",
@@ -588,7 +588,7 @@ exports[`TaxonResult should render correctly 1`] = `
                 "color": "#454545",
                 "fontSize": 40,
               },
-              undefined,
+              null,
               {
                 "fontFamily": "INatIcon",
                 "fontStyle": "normal",

diff --git a/tests/unit/components/__snapshots__/INatIcon.test.js.snap b/tests/unit/components/__snapshots__/INatIcon.test.js.snap
@@ -10,7 +10,7 @@ exports[`INatIcon renders correctly 1`] = `
         "color": "#4F8EF7",
         "fontSize": 20,
       },
-      undefined,
+      null,
       {
         "fontFamily": "INatIcon",
         "fontStyle": "normal",