Merge pull request #43027 from s77rt/group-chat-cleanup

Group chat cleanup

Author: marcaaron

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;
 };
 

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 (

src/pages/ReportDetailsPage.tsx

@@ -262,7 +262,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         />
     ) : null;
 
-    const renderAvatar = useMemo(() => {
+    const renderedAvatar = useMemo(() => {
         if (isMoneyRequestReport || isInvoiceReport) {
             return (
                 <View style={styles.mb3}>
@@ -319,7 +319,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

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