feat: add simplified MyObservations for logged out users with at leas…

…t 1 obs (#2599)

Simplified version of MyObs for signed out users with more than 1 obs. Currently only in debug mode.

Also:

* refactor: extract TaxonGridItem into a reusable component
* chore: TypeScript cleanup

Closes MOB-317

src/api/taxa.js

@@ -18,38 +18,16 @@ const PHOTO_FIELDS = {
   url: true
 };
 
+// These fields should work with all /taxa endpoints
 const FIELDS = {
-  ancestors: ANCESTOR_FIELDS,
-  children: ANCESTOR_FIELDS,
+  ancestor_ids: true,
   default_photo: {
     url: true
   },
-  establishment_means: {
-    establishment_means: true,
-    id: true,
-    place: {
-      id: true,
-      display_name: true
-    }
-  },
-  listed_taxa: {
-    establishment_means: true,
-    id: true,
-    list: {
-      title: true
-    },
-    place: {
-      id: true
-    }
-  },
   name: true,
   preferred_common_name: true,
   rank: true,
   rank_level: true,
-  taxon_photos: {
-    photo: PHOTO_FIELDS
-  },
-  wikipedia_summary: true,
   wikipedia_url: true
 };
 
@@ -74,7 +52,37 @@ async function fetchTaxon(
   opts: Object = {}
 ): Promise<?Object> {
   try {
-    const fetchParams = { ...PARAMS, ...params };
+    const fetchParams = {
+      ...PARAMS,
+      ...params,
+      fields: {
+        ...FIELDS,
+        ancestors: ANCESTOR_FIELDS,
+        children: ANCESTOR_FIELDS,
+        establishment_means: {
+          establishment_means: true,
+          id: true,
+          place: {
+            id: true,
+            display_name: true
+          }
+        },
+        listed_taxa: {
+          establishment_means: true,
+          id: true,
+          list: {
+            title: true
+          },
+          place: {
+            id: true
+          }
+        },
+        taxon_photos: {
+          photo: PHOTO_FIELDS
+        },
+        wikipedia_summary: true
+      }
+    };
     const response = await inatjs.taxa.fetch( id, fetchParams, opts );
     if ( typeof id === "number" ) {
       const results = response?.results;
@@ -90,7 +98,8 @@ async function fetchTaxon(
 
 async function searchTaxa( params: Object = {}, opts: Object = {} ): Promise<?Object> {
   try {
-    const { results } = await inatjs.taxa.search( { ...PARAMS, ...params }, opts );
+    const searchParams = { ...PARAMS, ...params };
+    const { results } = await inatjs.taxa.search( searchParams, opts );
     return results;
   } catch ( e ) {
     return handleError( e );

src/components/Developer/UiLibrary/TaxonGridItemDemo.js

@@ -1,10 +1,10 @@
 import { faker } from "@faker-js/faker";
-import TaxonGridItem from "components/Explore/TaxonGridItem.tsx";
 import {
   Heading1,
   Heading2,
   ScrollViewWrapper
 } from "components/SharedComponents";
+import TaxonGridItem from "components/SharedComponents/TaxonGridItem.tsx";
 import { View } from "components/styledComponents";
 import { ExploreProvider } from "providers/ExploreContext.tsx";
 import React from "react";

src/components/Explore/ExploreTaxonGridItem.tsx

@@ -0,0 +1,58 @@
+import { INatIcon } from "components/SharedComponents";
+import type { Props as TaxonGridItemProps } from "components/SharedComponents/TaxonGridItem";
+import TaxonGridItem from "components/SharedComponents/TaxonGridItem.tsx";
+import { Pressable } from "components/styledComponents";
+import {
+  EXPLORE_ACTION,
+  useExplore
+} from "providers/ExploreContext.tsx";
+import React from "react";
+import { useTranslation } from "sharedHooks";
+import colors from "styles/tailwindColors";
+
+interface Props extends TaxonGridItemProps {
+  count?: number;
+  setCurrentExploreView: ( exploreView: "observations" ) => void
+}
+
+const ExploreTaxonGridItem = ( {
+  count,
+  showSpeciesSeenCheckmark = false,
+  style,
+  taxon,
+  setCurrentExploreView
+}: Props ) => {
+  const { dispatch } = useExplore( );
+  const { t } = useTranslation( );
+  return (
+    <TaxonGridItem
+      headerText={
+        typeof ( count ) === "number"
+          ? t( "X-Observations", { count } )
+          : undefined
+      }
+      showSpeciesSeenCheckmark={showSpeciesSeenCheckmark}
+      style={style}
+      taxon={taxon}
+      upperRight={count && (
+        <Pressable
+          accessibilityRole="button"
+          onPress={( ) => {
+            if ( !( taxon?.id && taxon?.name ) ) return;
+            dispatch( {
+              type: EXPLORE_ACTION.CHANGE_TAXON,
+              taxon: { id: taxon.id },
+              taxonId: taxon?.id,
+              taxonName: taxon?.preferred_common_name || taxon?.name
+            } );
+            setCurrentExploreView( "observations" );
+          }}
+        >
+          <INatIcon name="observations" size={15} color={String( colors?.white )} dropShadow />
+        </Pressable>
+      )}
+    />
+  );
+};
+
+export default ExploreTaxonGridItem;

src/components/Explore/ObservationsViewBar.js

@@ -8,6 +8,7 @@ import { getShadow } from "styles/global";
 import colors from "styles/tailwindColors";
 
 type Props = {
+  hideMap?: boolean,
   layout: string,
   updateObservationsView: Function
 };
@@ -18,6 +19,7 @@ const DROP_SHADOW = getShadow( {
 } );
 
 const ObservationsViewBar = ( {
+  hideMap,
   layout,
   updateObservationsView
 }: Props ): Node => {
@@ -33,14 +35,16 @@ const ObservationsViewBar = ( {
       icon: "grid",
       accessibilityLabel: "Grid",
       testID: "SegmentedButton.grid"
-    },
-    {
+    }
+  ];
+  if ( !hideMap ) {
+    buttons.push( {
       value: "map",
       icon: "map",
       accessibilityLabel: "Map",
       testID: "SegmentedButton.map"
-    }
-  ];
+    } );
+  }
 
   return (
     <View

src/components/Explore/SpeciesView.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { fetchSpeciesCounts } from "api/observations";
-import TaxonGridItem from "components/Explore/TaxonGridItem.tsx";
+import ExploreTaxonGridItem from "components/Explore/ExploreTaxonGridItem.tsx";
 import _ from "lodash";
 import type { Node } from "react";
 import React, { useEffect, useMemo, useState } from "react";
@@ -93,7 +93,7 @@ const SpeciesView = ( {
   }, [pageObservedTaxonIds, observedTaxonIds] );
 
   const renderItem = ( { item } ) => (
-    <TaxonGridItem
+    <ExploreTaxonGridItem
       setCurrentExploreView={setCurrentExploreView}
       count={item?.count}
       style={gridItemStyle}

src/components/MyObservations/MyObservationsContainer.js

@@ -21,6 +21,7 @@ import {
   useStoredLayout,
   useTranslation
 } from "sharedHooks";
+import { isDebugMode } from "sharedHooks/useDebugMode";
 import {
   UPLOAD_PENDING
 } from "stores/createUploadObservationsSlice.ts";
@@ -29,13 +30,15 @@ import useStore from "stores/useStore";
 import useSyncObservations from "./hooks/useSyncObservations";
 import useUploadObservations from "./hooks/useUploadObservations";
 import MyObservations from "./MyObservations";
+import MyObservationsSimple from "./MyObservationsSimple";
 
 const { useRealm } = RealmContext;
 
 const MyObservationsContainer = ( ): Node => {
   const { t } = useTranslation( );
   const realm = useRealm( );
   const listRef = useRef( );
+
   const setStartUploadObservations = useStore( state => state.setStartUploadObservations );
   const uploadQueue = useStore( state => state.uploadQueue );
   const addToUploadQueue = useStore( state => state.addToUploadQueue );
@@ -188,6 +191,30 @@ const MyObservationsContainer = ( ): Node => {
   // this component again after returning from ObsEdit
   const onScroll = scrollEvent => setMyObsOffset( scrollEvent.nativeEvent.contentOffset.y );
 
+  if ( isDebugMode() && !currentUser && observations.length > 0 ) {
+    return (
+      <MyObservationsSimple
+        currentUser={currentUser}
+        isFetchingNextPage={isFetchingNextPage}
+        isConnected={isConnected}
+        handleIndividualUploadPress={handleIndividualUploadPress}
+        handleSyncButtonPress={handleSyncButtonPress}
+        handlePullToRefresh={handlePullToRefresh}
+        layout={layout}
+        listRef={listRef}
+        numUnuploadedObservations={numUnuploadedObservations}
+        observations={observations}
+        onEndReached={fetchNextPage}
+        onListLayout={restoreScrollOffset}
+        onScroll={onScroll}
+        setShowLoginSheet={setShowLoginSheet}
+        showLoginSheet={showLoginSheet}
+        showNoResults={showNoResults}
+        toggleLayout={toggleLayout}
+      />
+    );
+  }
+
   return (
     <MyObservations
       currentUser={currentUser}