From 9d609f59d75a0441827c212a2cf50a124382fdbd Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 2 Aug 2024 15:51:24 +0700 Subject: [PATCH 1/6] fix: New users are not displayed in group name --- src/libs/ReportUtils.ts | 8 ++++---- src/pages/GroupChatNameEditPage.tsx | 6 ++---- src/pages/NewChatConfirmPage.tsx | 3 +-- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 142b319240f1..acb77b6af39a 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 {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,14 +2017,13 @@ 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(draftParticipants?: 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 participants = draftParticipants?.map((participant) => participant.accountID) ?? Object.keys(report?.participants ?? {}).map(Number); if (shouldApplyLimit) { participants = participants.slice(0, 5); } @@ -2031,7 +2031,7 @@ function getGroupChatName(participantAccountIDs?: number[], shouldApplyLimit = f if (isMultipleParticipantReport) { return participants - .map((participant) => getDisplayNameForParticipant(participant, isMultipleParticipantReport)) + .map((participant, index) => getDisplayNameForParticipant(participant, isMultipleParticipantReport) || draftParticipants?.[index]?.login) .sort((first, second) => localeCompare(first ?? '', second ?? '')) .filter(Boolean) .join(', '); 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 From 0ce56d7bbb9265f7bca4a2b5327300c1cacdd56f Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Fri, 2 Aug 2024 16:10:39 +0700 Subject: [PATCH 2/6] fix lint --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index acb77b6af39a..1a618117af0d 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -43,7 +43,7 @@ import type { UserWallet, } from '@src/types/onyx'; import type {Participant} from '@src/types/onyx/IOU'; -import {SelectedParticipant} from '@src/types/onyx/NewGroupChatDraft'; +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'; From e7c8629e31cfe587a951f29a7fd2b102d8fe8445 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 5 Aug 2024 14:54:01 +0700 Subject: [PATCH 3/6] fix: rename variable and add check format phone number --- src/libs/ReportUtils.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1a618117af0d..1d745e5cf5e3 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2017,13 +2017,13 @@ function buildParticipantsFromAccountIDs(accountIDs: number[]): Participants { /** * Returns the report name if the report is a group chat */ -function getGroupChatName(draftParticipants?: SelectedParticipant[], shouldApplyLimit = false, report?: OnyxEntry): string | undefined { +function getGroupChatName(groupParticipants?: 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; } - let participants = draftParticipants?.map((participant) => participant.accountID) ?? Object.keys(report?.participants ?? {}).map(Number); + let participants = groupParticipants?.map((participant) => participant.accountID) ?? Object.keys(report?.participants ?? {}).map(Number); if (shouldApplyLimit) { participants = participants.slice(0, 5); } @@ -2031,7 +2031,10 @@ function getGroupChatName(draftParticipants?: SelectedParticipant[], shouldApply if (isMultipleParticipantReport) { return participants - .map((participant, index) => getDisplayNameForParticipant(participant, isMultipleParticipantReport) || draftParticipants?.[index]?.login) + .map( + (participant, index) => + getDisplayNameForParticipant(participant, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(groupParticipants?.[index]?.login ?? ''), + ) .sort((first, second) => localeCompare(first ?? '', second ?? '')) .filter(Boolean) .join(', '); From 9dfdae27b10fb161f9c3189ea3b69aa2c545b5ae Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 7 Aug 2024 10:04:41 +0700 Subject: [PATCH 4/6] rename variable --- src/libs/ReportUtils.ts | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 1d745e5cf5e3..109670b4ff76 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2017,30 +2017,27 @@ function buildParticipantsFromAccountIDs(accountIDs: number[]): Participants { /** * Returns the report name if the report is a group chat */ -function getGroupChatName(groupParticipants?: SelectedParticipant[], 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; } - let participants = groupParticipants?.map((participant) => participant.accountID) ?? 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, index) => - getDisplayNameForParticipant(participant, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(groupParticipants?.[index]?.login ?? ''), - ) + return participantAccountIDs + .map((participant, index) => getDisplayNameForParticipant(participant, 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) { From abac971e94360c65c54896ba452f696c8a84e6cf Mon Sep 17 00:00:00 2001 From: nkdengineer <161821005+nkdengineer@users.noreply.github.com> Date: Wed, 7 Aug 2024 17:53:54 +0700 Subject: [PATCH 5/6] Update src/libs/ReportUtils.ts Co-authored-by: Vinh Hoang --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 109670b4ff76..478ec8a14799 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2031,7 +2031,7 @@ function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit if (isMultipleParticipantReport) { return participantAccountIDs - .map((participant, index) => getDisplayNameForParticipant(participant, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? '')) + .map((participantAccountID, index) => getDisplayNameForParticipant(participantAccountID, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? '')) .sort((first, second) => localeCompare(first ?? '', second ?? '')) .filter(Boolean) .join(', '); From 6c41a31bd6cde94d2e8462bde4159cf3a4630d64 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 7 Aug 2024 18:07:37 +0700 Subject: [PATCH 6/6] fix lint --- src/libs/ReportUtils.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 478ec8a14799..b6c89ee1a08b 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -2031,7 +2031,10 @@ function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit if (isMultipleParticipantReport) { return participantAccountIDs - .map((participantAccountID, index) => getDisplayNameForParticipant(participantAccountID, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? '')) + .map( + (participantAccountID, index) => + getDisplayNameForParticipant(participantAccountID, isMultipleParticipantReport) || LocalePhoneNumber.formatPhoneNumber(participants?.[index]?.login ?? ''), + ) .sort((first, second) => localeCompare(first ?? '', second ?? '')) .filter(Boolean) .join(', ');