Add simple mode to ObsDetailsDefaultMode

src/components/ObsDetailsDefaultMode/CommunityTaxon.js

@@ -2,9 +2,11 @@
 import { useNavigation, useRoute } from "@react-navigation/native";
 import {
   Body4,
+  DisplayTaxon,
   DisplayTaxonName,
   Heading1,
-  Subheading1
+  Subheading1,
+  Subheading2
 } from "components/SharedComponents";
 import { Pressable, View } from "components/styledComponents";
 import type { Node } from "react";
@@ -15,11 +17,13 @@ import {
 
 type Props = {
   belongsToCurrentUser: boolean,
+  isSimpleMode: boolean,
   observation: Object,
 }
 
 const CommunityTaxon = ( {
   belongsToCurrentUser,
+  isSimpleMode = false,
   observation
 }: Props ): Node => {
   const navigation = useNavigation( );
@@ -29,16 +33,6 @@ const CommunityTaxon = ( {
   const communityTaxon = observation?.taxon;
   const taxonId = communityTaxon?.id || "unknown";
 
-  const showCommunityTaxon = ( ) => (
-    <DisplayTaxonName
-      taxon={communityTaxon}
-      testID={`ObsDetails.taxon.${taxonId}`}
-      accessibilityHint={t( "Navigates-to-taxon-details" )}
-      topTextComponent={Heading1}
-      bottomTextComponent={Subheading1}
-    />
-  );
-
   const handlePress = ( ) => navigation.navigate( {
     // Ensure button mashing doesn't open multiple TaxonDetails instances
     key: `${route.key}-CommunityTaxon-TaxonDetails-${taxonId}`,
@@ -46,17 +40,53 @@ const CommunityTaxon = ( {
     params: { id: taxonId }
   } );
 
-  return (
-    <View className="bg-white px-5 pt-5">
-      <View className="flex-row my-[11px] items-center">
+  const showCommunityTaxon = ( ) => {
+    if ( !communityTaxon ) {
+      return (
+        <View className="justify-center ml-1">
+          <Subheading2>{t( "Unknown--taxon" )}</Subheading2>
+        </View>
+      );
+    }
+
+    return isSimpleMode
+      ? (
+        <DisplayTaxon
+          taxon={communityTaxon}
+          testID={`ObsDetails.taxon.${taxonId}`}
+          accessibilityHint={t( "Navigates-to-taxon-details" )}
+          handlePress={handlePress}
+          largerText
+        />
+      )
+      : (
         <Pressable
           accessibilityRole="button"
           className="shrink"
           onPress={handlePress}
           testID={`ObsDetails.taxon.${taxonId}`}
         >
-          {observation && showCommunityTaxon( )}
+          <DisplayTaxonName
+            taxon={communityTaxon}
+            testID={`ObsDetails.taxon.${taxonId}`}
+            accessibilityHint={t( "Navigates-to-taxon-details" )}
+            topTextComponent={Heading1}
+            bottomTextComponent={Subheading1}
+          />
         </Pressable>
+      );
+  };
+
+  return (
+    <View className={isSimpleMode
+      ? "bg-white px-[15px] pt-[15px]"
+      : "bg-white px-5 pt-5"}
+    >
+      <View className={isSimpleMode
+        ? "flex-row items-center"
+        : "flex-row my-[11px] items-center"}
+      >
+        {observation && showCommunityTaxon( )}
       </View>
       {
         (

src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js

@@ -34,6 +34,7 @@ type Props = {
   belongsToCurrentUser: boolean,
   currentUser: Object,
   isConnected: boolean,
+  isSimpleMode: boolean,
   navToSuggestions: Function,
   observation: Object,
   openAddCommentSheet: Function,
@@ -52,6 +53,7 @@ const ObsDetailsDefaultMode = ( {
   belongsToCurrentUser,
   currentUser,
   isConnected,
+  isSimpleMode,
   navToSuggestions,
   observation,
   openAddCommentSheet,
@@ -90,19 +92,25 @@ const ObsDetailsDefaultMode = ( {
             setHeightOfContentAboveCommunitySection( layout );
           }}
         >
-          <ObserverDetails
-            belongsToCurrentUser={belongsToCurrentUser}
-            isConnected={isConnected}
-            observation={observation}
-          />
+          {!isSimpleMode && (
+            <ObserverDetails
+              belongsToCurrentUser={belongsToCurrentUser}
+              isConnected={isConnected}
+              observation={observation}
+            />
+          )}
           <View>
             <ObsMediaDisplayContainer observation={observation} />
           </View>
           <CommunityTaxon
             belongsToCurrentUser={belongsToCurrentUser}
             observation={observation}
+            isSimpleMode
           />
-          <View className="mt-5">
+          <View className={isSimpleMode
+            ? "mt-[15px]"
+            : "mt-5"}
+          >
             <MapSection observation={observation} />
           </View>
           <LocationSection
@@ -111,23 +119,27 @@ const ObsDetailsDefaultMode = ( {
           />
           <NotesSection description={observation.description} />
         </View>
-        <CommunitySection
-          activityItems={activityItems}
-          isConnected={isConnected}
-          targetItemID={targetActivityItemID}
-          observation={observation}
-          openAgreeWithIdSheet={openAgreeWithIdSheet}
-          refetchRemoteObservation={refetchRemoteObservation}
-          onLayoutTargetItem={setOffsetToActivityItem}
-        />
-        {addingActivityItem && (
-          <View className="flex-row items-center justify-center p-10">
-            <ActivityIndicator size={50} />
-          </View>
+        {!isSimpleMode && (
+          <>
+            <CommunitySection
+              activityItems={activityItems}
+              isConnected={isConnected}
+              targetItemID={targetActivityItemID}
+              observation={observation}
+              openAgreeWithIdSheet={openAgreeWithIdSheet}
+              refetchRemoteObservation={refetchRemoteObservation}
+              onLayoutTargetItem={setOffsetToActivityItem}
+            />
+            {addingActivityItem && (
+              <View className="flex-row items-center justify-center p-10">
+                <ActivityIndicator size={50} />
+              </View>
+            )}
+            <StatusSection observation={observation} />
+            <DetailsSection observation={observation} />
+            <MoreSection observation={observation} />
+          </>
         )}
-        <StatusSection observation={observation} />
-        <DetailsSection observation={observation} />
-        <MoreSection observation={observation} />
       </ScrollView>
       {currentUser && (
         <FloatingButtons

src/components/ObsDetailsDefaultMode/ObsDetailsDefaultModeContainer.js

@@ -11,6 +11,7 @@ import type { Node } from "react";
 import React, {
   useCallback,
   useEffect,
+  useMemo,
   useReducer,
   useState
 } from "react";
@@ -180,6 +181,17 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
     || ( !observation?.user && !observation?.id )
   );
 
+  const isSimpleMode = useMemo( () => (
+    // Simple mode applies only when:
+    // 1. It's the current user's observation (or an observation being created)
+    // 2. AND the observation hasn't been synced yet
+    // 3. AND the user isn't logged in
+    ( belongsToCurrentUser || !observation?.user )
+      && localObservation
+      && !localObservation.wasSynced()
+      && !currentUser
+  ), [belongsToCurrentUser, localObservation, currentUser, observation?.user] );
+
   const { data: subscriptions, refetch: refetchSubscriptions } = useAuthenticatedQuery(
     [
       "fetchSubscriptions"
@@ -342,6 +354,7 @@ const ObsDetailsDefaultModeContainer = ( ): Node => {
         belongsToCurrentUser={belongsToCurrentUser}
         currentUser={currentUser}
         isConnected={isConnected}
+        isSimpleMode={isSimpleMode}
         navToSuggestions={navToSuggestions}
         observation={observationShown}
         openAddCommentSheet={openAddCommentSheet}

src/components/SharedComponents/DisplayTaxon.js

@@ -1,7 +1,12 @@
 // @flow
 
 import classnames from "classnames";
-import { DisplayTaxonName, IconicTaxonIcon } from "components/SharedComponents";
+import {
+  Body1,
+  DisplayTaxonName,
+  IconicTaxonIcon,
+  Subheading2
+} from "components/SharedComponents";
 import { Image, Pressable, View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
@@ -12,6 +17,7 @@ type Props = {
   accessibilityHint?: string,
   accessibilityLabel?: string,
   handlePress: Function,
+  largerText?: boolean,
   taxon: Object,
   testID?: string,
   withdrawn?: boolean
@@ -21,6 +27,7 @@ const DisplayTaxon = ( {
   accessibilityHint,
   accessibilityLabel,
   handlePress,
+  largerText = false,
   taxon,
   testID,
   withdrawn
@@ -74,6 +81,12 @@ const DisplayTaxon = ( {
               withdrawn={withdrawn}
               scientificNameFirst={currentUser?.prefers_scientific_name_first}
               prefersCommonNames={currentUser?.prefers_common_names}
+              topTextComponent={largerText
+                ? Subheading2
+                : undefined}
+              bottomTextComponent={largerText
+                ? Body1
+                : undefined}
             />
           </View>
         </View>