diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 142b319240f1..b6c89ee1a08b 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -43,6 +43,7 @@ import type { UserWallet, } from '@src/types/onyx'; import type {Participant} from '@src/types/onyx/IOU'; +import type {SelectedParticipant} from '@src/types/onyx/NewGroupChatDraft'; import type {OriginalMessageExportedToIntegration} from '@src/types/onyx/OldDotAction'; import type Onboarding from '@src/types/onyx/Onboarding'; import type {Errors, Icon, PendingAction} from '@src/types/onyx/OnyxCommon'; @@ -2016,28 +2017,30 @@ function buildParticipantsFromAccountIDs(accountIDs: number[]): Participants { /** * Returns the report name if the report is a group chat */ -function getGroupChatName(participantAccountIDs?: number[], shouldApplyLimit = false, report?: OnyxEntry): string | undefined { +function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit = false, report?: OnyxEntry): string | undefined { // If we have a report always try to get the name from the report. if (report?.reportName) { return report.reportName; } - // Get participantAccountIDs from participants object - let participants = participantAccountIDs ?? Object.keys(report?.participants ?? {}).map(Number); + let participantAccountIDs = participants?.map((participant) => participant.accountID) ?? Object.keys(report?.participants ?? {}).map(Number); if (shouldApplyLimit) { - participants = participants.slice(0, 5); + participantAccountIDs = participantAccountIDs.slice(0, 5); } - const isMultipleParticipantReport = participants.length > 1; + const isMultipleParticipantReport = participantAccountIDs.length > 1; if (isMultipleParticipantReport) { - return participants - .map((participant) => getDisplayNameForParticipant(participant, isMultipleParticipantReport)) + return participantAccountIDs + .map( + (participantAccountID, index) => + getDisplayNameForParticipant(participantAccountID, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? ''), + ) .sort((first, second) => localeCompare(first ?? '', second ?? '')) .filter(Boolean) .join(', '); } - return Localize.translateLocal('groupChat.defaultReportName', {displayName: getDisplayNameForParticipant(participants[0], false)}); + return Localize.translateLocal('groupChat.defaultReportName', {displayName: getDisplayNameForParticipant(participantAccountIDs[0], false)}); } function getParticipants(reportID: string) { diff --git a/src/pages/GroupChatNameEditPage.tsx b/src/pages/GroupChatNameEditPage.tsx index 10c7357611e9..8f41e09477fe 100644 --- a/src/pages/GroupChatNameEditPage.tsx +++ b/src/pages/GroupChatNameEditPage.tsx @@ -44,11 +44,9 @@ function GroupChatNameEditPage({groupChatDraft, report}: GroupChatNameEditPagePr const {translate} = useLocalize(); const {inputCallbackRef} = useAutoFocusInput(); - // We will try to get the chatName from the report or draft depending on what flow we are in - const draftParticipantAccountIDs = useMemo(() => (groupChatDraft?.participants ?? []).map((participant) => participant.accountID), [groupChatDraft?.participants]); const existingReportName = useMemo( - () => (report ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getGroupChatName(draftParticipantAccountIDs)), - [draftParticipantAccountIDs, report], + () => (report ? ReportUtils.getGroupChatName(undefined, false, report) : ReportUtils.getGroupChatName(groupChatDraft?.participants)), + [groupChatDraft?.participants, report], ); // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const currentChatName = reportID ? existingReportName : groupChatDraft?.reportName || existingReportName; diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx index f72850c8f7bd..d6b199def243 100644 --- a/src/pages/NewChatConfirmPage.tsx +++ b/src/pages/NewChatConfirmPage.tsx @@ -50,7 +50,6 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP const {translate} = useLocalize(); const styles = useThemeStyles(); const personalData = useCurrentUserPersonalDetails(); - const participantAccountIDs = (newGroupDraft?.participants ?? []).map((participant) => participant.accountID); const selectedOptions = useMemo((): Participant[] => { if (!newGroupDraft?.participants) { return []; @@ -61,7 +60,7 @@ function NewChatConfirmPage({newGroupDraft, allPersonalDetails}: NewChatConfirmP return options; }, [allPersonalDetails, newGroupDraft?.participants]); - const groupName = newGroupDraft?.reportName ? newGroupDraft?.reportName : ReportUtils.getGroupChatName(participantAccountIDs ?? []); + const groupName = newGroupDraft?.reportName ? newGroupDraft?.reportName : ReportUtils.getGroupChatName(newGroupDraft?.participants); const sections: ListItem[] = useMemo( () => selectedOptions