From 0c5631025cd89a87496e3ea771affdb36efefc5e Mon Sep 17 00:00:00 2001
From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com>
Date: Tue, 4 Jun 2024 10:52:23 +0100
Subject: [PATCH 1/2] Memorize functions, fix types and rename variable

---
 src/libs/Navigation/types.ts     |  1 +
 src/pages/NewChatConfirmPage.tsx | 39 +++++++++++++++++---------------
 src/pages/ReportDetailsPage.tsx  |  4 ++--
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
index c9c83bb2cc11..d4ee4aba1f51 100644
--- a/src/libs/Navigation/types.ts
+++ b/src/libs/Navigation/types.ts
@@ -408,6 +408,7 @@ type SettingsNavigatorParamList = {
 
 type NewChatNavigatorParamList = {
     [SCREENS.NEW_CHAT.ROOT]: undefined;
+    [SCREENS.NEW_CHAT.NEW_CHAT_CONFIRM]: undefined;
     [SCREENS.NEW_CHAT.NEW_CHAT_EDIT_NAME]: undefined;
 };
 
diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
index 8152a61d31e9..9d0f65860a11 100644
--- a/src/pages/NewChatConfirmPage.tsx
+++ b/src/pages/NewChatConfirmPage.tsx
@@ -1,4 +1,4 @@
-import React, {useMemo, useRef} from 'react';
+import React, {useCallback, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
@@ -35,6 +35,14 @@ type NewChatConfirmPageOnyxProps = {
 
 type NewChatConfirmPageProps = NewChatConfirmPageOnyxProps;
 
+function navigateBack() {
+    Navigation.goBack(ROUTES.NEW_CHAT);
+}
+
+function navigateToEditChatName() {
+    Navigation.navigate(ROUTES.NEW_CHAT_EDIT_NAME);
+}
+
 function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmPageProps) {
     const optimisticReportID = useRef<string>(ReportUtils.generateReportID());
     const fileRef = useRef<File | CustomRNImageManipulatorResult | undefined>();
@@ -79,30 +87,25 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP
     /**
      * Removes a selected option from list if already selected.
      */
-    const unselectOption = (option: ListItem) => {
-        if (!newGroupDraft) {
-            return;
-        }
-        const newSelectedParticipants = (newGroupDraft.participants ?? []).filter((participant) => participant.login !== option.login);
-        Report.setGroupDraft({participants: newSelectedParticipants});
-    };
+    const unselectOption = useCallback(
+        (option: ListItem) => {
+            if (!newGroupDraft) {
+                return;
+            }
+            const newSelectedParticipants = (newGroupDraft.participants ?? []).filter((participant) => participant.login !== option.login);
+            Report.setGroupDraft({participants: newSelectedParticipants});
+        },
+        [newGroupDraft],
+    );
 
-    const createGroup = () => {
+    const createGroup = useCallback(() => {
         if (!newGroupDraft) {
             return;
         }
 
         const logins: string[] = (newGroupDraft.participants ?? []).map((participant) => participant.login);
         Report.navigateToAndOpenReport(logins, true, newGroupDraft.reportName ?? '', newGroupDraft.avatarUri ?? '', fileRef.current, optimisticReportID.current, true);
-    };
-
-    const navigateBack = () => {
-        Navigation.goBack(ROUTES.NEW_CHAT);
-    };
-
-    const navigateToEditChatName = () => {
-        Navigation.navigate(ROUTES.NEW_CHAT_EDIT_NAME);
-    };
+    }, [newGroupDraft]);
 
     const stashedLocalAvatarImage = newGroupDraft?.avatarUri;
     return (
diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 02f97397e4cd..cfbe4e22f5fb 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -261,7 +261,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         />
     ) : null;
 
-    const renderAvatar = useMemo(() => {
+    const renderedAvatar = useMemo(() => {
         if (isMoneyRequestReport || isInvoiceReport) {
             return (
                 <View style={styles.mb3}>
@@ -318,7 +318,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                 />
                 <ScrollView style={[styles.flex1]}>
                     <View style={styles.reportDetailsTitleContainer}>
-                        {renderAvatar}
+                        {renderedAvatar}
                         <View style={[styles.reportDetailsRoomInfo, styles.mw100]}>
                             <View style={[styles.alignSelfCenter, styles.w100, styles.mt1]}>
                                 <DisplayNames

From 2dd376963e3d5457c6afc19dcb0ed731f9a302fe Mon Sep 17 00:00:00 2001
From: Abdelhafidh Belalia <16493223+s77rt@users.noreply.github.com>
Date: Tue, 4 Jun 2024 12:02:33 +0100
Subject: [PATCH 2/2] Show participant details page for valid members only

---
 src/pages/ReportParticipantDetailsPage.tsx | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/pages/ReportParticipantDetailsPage.tsx b/src/pages/ReportParticipantDetailsPage.tsx
index d6c59915f0f5..86f787d2925b 100644
--- a/src/pages/ReportParticipantDetailsPage.tsx
+++ b/src/pages/ReportParticipantDetailsPage.tsx
@@ -26,6 +26,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {PersonalDetails, PersonalDetailsList} from '@src/types/onyx';
+import NotFoundPage from './ErrorPage/NotFoundPage';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
 
@@ -69,6 +70,10 @@ function ReportParticipantDetails({personalDetails, report, route}: ReportPartic
         Navigation.navigate(ROUTES.REPORT_PARTICIPANTS_ROLE_SELECTION.getRoute(report.reportID, accountID));
     }, [accountID, report.reportID]);
 
+    if (!member) {
+        return <NotFoundPage />;
+    }
+
     return (
         <ScreenWrapper testID={ReportParticipantDetails.displayName}>
             <HeaderWithBackButton