MOB-1224: set header options inside ProjectListContainer

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,
           } )}
         />
       </View>

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" )}

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<RouteProp<ProjectListRouteParams, "ProjectList">>( );
-  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 (

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,
             } )}
           />
         </View>