diff --git a/src/components/ObsDetailsDefaultMode/CommunityTaxon.js b/src/components/ObsDetailsDefaultMode/CommunityTaxon.js index 73a2977e0..125b77ffe 100644 --- a/src/components/ObsDetailsDefaultMode/CommunityTaxon.js +++ b/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 = ( ) => ( - - ); - 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 ( - - + const showCommunityTaxon = ( ) => { + if ( !communityTaxon ) { + return ( + + {t( "Unknown--taxon" )} + + ); + } + + return isSimpleMode + ? ( + + ) + : ( - {observation && showCommunityTaxon( )} + + ); + }; + + return ( + + + {observation && showCommunityTaxon( )} { ( diff --git a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js b/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js index b324c88e9..dcccf5412 100644 --- a/src/components/ObsDetailsDefaultMode/ObsDetailsDefaultMode.js +++ b/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 ); }} > - + {!isSimpleMode && ( + + )} - + - - {addingActivityItem && ( - - - + {!isSimpleMode && ( + <> + + {addingActivityItem && ( + + + + )} + + + + )} - - - {currentUser && ( { || ( !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} diff --git a/src/components/SharedComponents/DisplayTaxon.js b/src/components/SharedComponents/DisplayTaxon.js index 7103a369d..ab35a582c 100644 --- a/src/components/SharedComponents/DisplayTaxon.js +++ b/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} />