From 8ca9f85da763614f5fc0eac1affd8fdc76dce2f4 Mon Sep 17 00:00:00 2001 From: sepeterson <10458078+sepeterson@users.noreply.github.com> Date: Mon, 23 Mar 2026 16:51:30 -0500 Subject: [PATCH] MOB-1224: set header options inside ProjectListContainer --- .../ObsDetails/DetailsTab/ProjectSection.tsx | 10 +----- .../MoreSection/ProjectButton.tsx | 10 +----- .../ProjectList/ProjectListContainer.tsx | 34 +++++++++++++------ src/components/UserProfile/UserProfile.js | 34 ++----------------- 4 files changed, 29 insertions(+), 59 deletions(-) diff --git a/src/components/ObsDetails/DetailsTab/ProjectSection.tsx b/src/components/ObsDetails/DetailsTab/ProjectSection.tsx index 965877d46..9e89bbf74 100644 --- a/src/components/ObsDetails/DetailsTab/ProjectSection.tsx +++ b/src/components/ObsDetails/DetailsTab/ProjectSection.tsx @@ -9,7 +9,7 @@ import { } from "components/SharedComponents"; import { View } from "components/styledComponents"; import { t } from "i18next"; -import React, { useMemo } from "react"; +import React from "react"; const headingClass = "mt-[20px] mb-[11px] text-darkGray"; const sectionClass = "mx-[15px] mb-[20px]"; @@ -26,13 +26,6 @@ const ProjectSection = ( { observation }: Props ) => { const totalProjectCount = traditionalProjectCount + nonTraditionalProjectCount; - const headerOptions = useMemo( ( ) => ( { - headerTitle: t( "Observation" ), - headerSubtitle: t( "X-PROJECTS", { - projectCount: totalProjectCount, - } ), - } ), [totalProjectCount] ); - if ( totalProjectCount === 0 || typeof totalProjectCount !== "number" ) { return null; } @@ -49,7 +42,6 @@ const ProjectSection = ( { observation }: Props ) => { text={t( "VIEW-PROJECTS" )} onPress={( ) => navigation.navigate( "ProjectList", { observationUuid: observation.uuid, - headerOptions, } )} /> diff --git a/src/components/ObsDetailsDefaultMode/MoreSection/ProjectButton.tsx b/src/components/ObsDetailsDefaultMode/MoreSection/ProjectButton.tsx index 362cffc66..e9493b861 100644 --- a/src/components/ObsDetailsDefaultMode/MoreSection/ProjectButton.tsx +++ b/src/components/ObsDetailsDefaultMode/MoreSection/ProjectButton.tsx @@ -4,7 +4,7 @@ import type { NativeStackNavigationProp } from "@react-navigation/native-stack"; import type { ApiObservation } from "api/types"; import { Body3 } from "components/SharedComponents"; import { t } from "i18next"; -import React, { useMemo } from "react"; +import React from "react"; interface Props { observation: ApiObservation; @@ -18,13 +18,6 @@ const ProjectButton = ( { observation }: Props ) => { const totalProjectCount = traditionalProjectCount + nonTraditionalProjectCount; - const headerOptions = useMemo( ( ) => ( { - headerTitle: t( "Observation" ), - headerSubtitle: t( "X-PROJECTS", { - projectCount: totalProjectCount, - } ), - } ), [totalProjectCount] ); - if ( totalProjectCount === 0 || typeof totalProjectCount !== "number" ) { return null; } @@ -34,7 +27,6 @@ const ProjectButton = ( { observation }: Props ) => { className="underline mt-[11px]" onPress={( ) => navigation.navigate( "ProjectList", { observationUuid: observation.uuid, - headerOptions, } )} > {t( "Projects" )} diff --git a/src/components/ProjectList/ProjectListContainer.tsx b/src/components/ProjectList/ProjectListContainer.tsx index 6c96f58f2..822a4ca7e 100644 --- a/src/components/ProjectList/ProjectListContainer.tsx +++ b/src/components/ProjectList/ProjectListContainer.tsx @@ -7,7 +7,7 @@ import { ViewWrapper, } from "components/SharedComponents"; import { View } from "components/styledComponents"; -import React, { useEffect } from "react"; +import React, { useEffect, useMemo } from "react"; import Observation from "realmModels/Observation"; import { useAuthenticatedQuery, @@ -17,14 +17,9 @@ import { import ProjectList from "./ProjectList"; -interface HeaderOptions { - headerTitle?: string; - headerSubtitle?: string; -} - type ProjectListParams = - | { observationUuid: string; userId?: never; headerOptions: HeaderOptions } - | { userId: number; observationUuid?: never; headerOptions: HeaderOptions }; + | { observationUuid: string; userId?: never; userLogin?: never } + | { userId: number; userLogin: string; observationUuid?: never }; interface ProjectListRouteParams { [name: string]: ProjectListParams; @@ -33,7 +28,7 @@ interface ProjectListRouteParams { const ProjectListContainer = ( ) => { const navigation = useNavigation( ); const { params } = useRoute>( ); - const { observationUuid, userId, headerOptions } = params; + const { observationUuid, userId, userLogin } = params; const { t } = useTranslation( ); const { remoteObservation } = useRemoteObservation( @@ -62,12 +57,31 @@ const ProjectListContainer = ( ) => { { enabled: !!userId }, ); + const headerOptions = useMemo( ( ) => { + if ( observationUuid ) { + if ( !remoteObservation ) return null; + const projectCount = ( remoteObservation.project_observations?.length || 0 ) + + ( remoteObservation.non_traditional_projects?.length || 0 ); + return { + headerTitle: t( "Observation" ), + headerSubtitle: t( "X-PROJECTS", { projectCount } ), + }; + } + if ( !userProjects ) return null; + return { + headerTitle: userLogin, + headerSubtitle: t( "JOINED-X-PROJECTS", { count: userProjects.length } ), + }; + }, [observationUuid, remoteObservation, userLogin, userProjects, t] ); + const projects: ApiProject[] = observationUuid ? observationProjects : ( userProjects ?? [] ); useEffect( ( ) => { - navigation.setOptions( headerOptions ); + if ( headerOptions ) { + navigation.setOptions( headerOptions ); + } }, [headerOptions, navigation] ); return ( diff --git a/src/components/UserProfile/UserProfile.js b/src/components/UserProfile/UserProfile.js index 42983dcc1..973a30352 100644 --- a/src/components/UserProfile/UserProfile.js +++ b/src/components/UserProfile/UserProfile.js @@ -2,7 +2,7 @@ import { useNavigation, useRoute } from "@react-navigation/native"; import { fetchRelationships } from "api/relationships"; -import { fetchRemoteUser, fetchUserProjects } from "api/users"; +import { fetchRemoteUser } from "api/users"; import LoginSheet from "components/MyObservations/LoginSheet"; import { Body2, @@ -18,8 +18,7 @@ import { } from "components/SharedComponents"; import { View } from "components/styledComponents"; import type { Node } from "react"; -import React, { useCallback, useMemo, useState } from "react"; -import Observation from "realmModels/Observation"; +import React, { useCallback, useState } from "react"; import User from "realmModels/User"; import { formatLongDate } from "sharedHelpers/dateAndTime"; import { @@ -53,35 +52,8 @@ const UserProfile = ( ): Node => { const user = remoteUser || null; - const userProjectsQueryKey = ["fetchUserProjects", userId]; const relationshipsQueryKey = ["fetchRelationships", user?.login]; - const { - data: projects, - } = useAuthenticatedQuery( - userProjectsQueryKey, - optsWithAuth => fetchUserProjects( - { - id: userId, - per_page: 200, - fields: Observation.PROJECT_FIELDS, - }, - optsWithAuth, - ), - { - enabled: !!( userId ), - }, - ); - - const totalProjectCount = projects?.length; - - const projectsHeaderOptions = useMemo( ( ) => ( { - headerTitle: user?.login, - headerSubtitle: t( "JOINED-X-PROJECTS", { - count: totalProjectCount, - } ), - } ), [totalProjectCount, t, user] ); - const { data: relationships, refetch, @@ -199,7 +171,7 @@ const UserProfile = ( ): Node => { text={t( "VIEW-PROJECTS" )} onPress={( ) => navigation.navigate( "ProjectList", { userId, - headerOptions: projectsHeaderOptions, + userLogin: user.login, } )} />