refactor: thread localeCompare through utils

TaduJR · TaduJR · commit a8234f840e88 · 2026-04-30T07:46:30.000+03:00
diff --git a/src/libs/Localize/index.ts b/src/libs/Localize/index.ts
@@ -199,5 +199,23 @@ function getDevicePreferredLocale(): Locale {
     return RNLocalize.findBestLanguageTag(Object.values(CONST.LOCALES))?.languageTag ?? CONST.LOCALES.DEFAULT;
 }
 
+const COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
+const localeCompareCache = new Map<string, (a: string, b: string) => number>();
+
+/**
+ * Locale-aware string comparator for non-React callers (mirrors `translateLocal`). React code should use the
+ * `localeCompare` returned by `useLocalize` instead.
+ */
+function localeCompareLocal(a: string, b: string): number {
+    const locale = IntlStore.getCurrentLocale() ?? '';
+    let compare = localeCompareCache.get(locale);
+    if (!compare) {
+        const collator = new Intl.Collator(locale || undefined, COLLATOR_OPTIONS);
+        compare = (left, right) => collator.compare(left, right);
+        localeCompareCache.set(locale, compare);
+    }
+    return compare(a, b);
+}
+
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-export {translate, translateLocal, formatList, formatMessageElementList, getDevicePreferredLocale};
+export {translate, translateLocal, localeCompareLocal, formatList, formatMessageElementList, getDevicePreferredLocale};
diff --git a/src/libs/MergeTransactionUtils.ts b/src/libs/MergeTransactionUtils.ts
@@ -498,7 +498,14 @@ function selectTargetAndSourceTransactionsForMerge(
  * @param translate - The translation function
  * @returns The formatted display string for the field value
  */
-function getDisplayValue(field: MergeFieldKey, transaction: Transaction, policy: Policy | undefined, translate: LocaleContextProps['translate'], reports?: Array<OnyxEntry<Report>>): string {
+function getDisplayValue(
+    field: MergeFieldKey,
+    transaction: Transaction,
+    policy: Policy | undefined,
+    translate: LocaleContextProps['translate'],
+    localeCompare: LocaleContextProps['localeCompare'],
+    reports?: Array<OnyxEntry<Report>>,
+): string {
     const fieldValue = getMergeFieldValue(getTransactionDetails(transaction), transaction, field);
 
     if (isEmptyMergeValue(fieldValue) || fieldValue === undefined) {
@@ -528,7 +535,7 @@ function getDisplayValue(field: MergeFieldKey, transaction: Transaction, policy:
         return transaction?.reportName ?? getReportName(getReportOrDraftReport(SafeString(fieldValue), reports));
     }
     if (field === 'attendees') {
-        return Array.isArray(fieldValue) ? getAttendeesListDisplayString(fieldValue) : '';
+        return Array.isArray(fieldValue) ? getAttendeesListDisplayString(fieldValue, localeCompare) : '';
     }
 
     if (field === 'taxValue') {
@@ -554,6 +561,7 @@ function buildMergeFieldsData(
     targetTransactionPolicy: Policy | undefined,
     sourceTransactionPolicy: Policy | undefined,
     translate: LocaleContextProps['translate'],
+    localeCompare: LocaleContextProps['localeCompare'],
     reports: Array<OnyxEntry<Report>> = [],
 ): MergeFieldData[] {
     if (!targetTransaction || !sourceTransaction) {
@@ -568,12 +576,12 @@ function buildMergeFieldsData(
         const options: MergeFieldOption[] = [
             {
                 transaction: targetTransaction,
-                displayValue: getDisplayValue(field, targetTransaction, targetTransactionPolicy, translate, reports),
+                displayValue: getDisplayValue(field, targetTransaction, targetTransactionPolicy, translate, localeCompare, reports),
                 isSelected: selectedTransactionId === targetTransaction.transactionID,
             },
             {
                 transaction: sourceTransaction,
-                displayValue: getDisplayValue(field, sourceTransaction, sourceTransactionPolicy, translate, reports),
+                displayValue: getDisplayValue(field, sourceTransaction, sourceTransactionPolicy, translate, localeCompare, reports),
                 isSelected: selectedTransactionId === sourceTransaction.transactionID,
             },
         ];
diff --git a/src/libs/ModifiedExpenseMessage.ts b/src/libs/ModifiedExpenseMessage.ts
@@ -1,7 +1,7 @@
 import isEmpty from 'lodash/isEmpty';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {Entries, ValueOf} from 'type-fest';
-import type {LocalizedTranslate} from '@components/LocaleContextProvider';
+import type {LocaleContextProps, LocalizedTranslate} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
 import type {Policy, PolicyTagLists, Report, ReportAction, ReportAttributesDerivedValue} from '@src/types/onyx';
@@ -246,6 +246,7 @@ function getRulesModifiedMessage(
  */
 function getForReportAction({
     translate,
+    localeCompare,
     reportAction,
     policy,
     movedFromReport,
@@ -255,6 +256,7 @@ function getForReportAction({
     reportAttributes,
 }: {
     translate: LocalizedTranslate;
+    localeCompare: LocaleContextProps['localeCompare'];
     reportAction: OnyxEntry<ReportAction>;
     policy: OnyxEntry<Policy>;
     movedFromReport?: OnyxEntry<Report>;
@@ -452,7 +454,7 @@ function getForReportAction({
 
     const hasModifiedAttendees = isReportActionOriginalMessageAnObject && 'oldAttendees' in reportActionOriginalMessage && 'newAttendees' in reportActionOriginalMessage;
     if (hasModifiedAttendees) {
-        const [oldAttendees, attendees] = getFormattedAttendees(reportActionOriginalMessage.newAttendees, reportActionOriginalMessage.oldAttendees);
+        const [oldAttendees, attendees] = getFormattedAttendees(localeCompare, reportActionOriginalMessage.newAttendees, reportActionOriginalMessage.oldAttendees);
         buildMessageFragmentForValue(translate, oldAttendees, attendees, translate('iou.attendees'), false, setFragments, removalFragments, changeFragments);
     }
 
diff --git a/src/libs/Notification/LocalNotification/BrowserNotifications.ts b/src/libs/Notification/LocalNotification/BrowserNotifications.ts
@@ -4,7 +4,7 @@ import type {ImageSourcePropType} from 'react-native';
 import EXPENSIFY_ICON_URL from '@assets/images/expensify-logo-round-clearspace.png';
 import * as AppUpdate from '@libs/actions/AppUpdate';
 // eslint-disable-next-line @typescript-eslint/no-deprecated -- translateLocal is deprecated; BrowserNotifications is non-React code that cannot use the translate hook
-import {translateLocal} from '@libs/Localize';
+import {localeCompareLocal, translateLocal} from '@libs/Localize';
 import {getForReportAction} from '@libs/ModifiedExpenseMessage';
 import {getTextFromHtml} from '@libs/ReportActionsUtils';
 import {getReportName} from '@libs/ReportNameUtils';
@@ -153,6 +153,7 @@ export default {
         const bodyWithHTML = getForReportAction({
             // eslint-disable-next-line @typescript-eslint/no-deprecated -- translateLocal is deprecated; BrowserNotifications is non-React code that cannot use the translate hook
             translate: translateLocal,
+            localeCompare: localeCompareLocal,
             reportAction,
             policy,
             movedFromReport,
diff --git a/src/libs/OptionsListUtils/index.ts b/src/libs/OptionsListUtils/index.ts
@@ -15,7 +15,7 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {isReportMessageAttachment} from '@libs/isReportMessageAttachment';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from '@libs/LocalePhoneNumber';
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-import {translateLocal} from '@libs/Localize';
+import {localeCompareLocal, translateLocal} from '@libs/Localize';
 import {appendCountryCode, getPhoneNumberWithoutSpecialChars} from '@libs/LoginUtils';
 import {MaxHeap} from '@libs/MaxHeap';
 import {MinHeap} from '@libs/MinHeap';
@@ -754,6 +754,7 @@ function getLastMessageTextForReport({
     } else if (isModifiedExpenseAction(lastReportAction)) {
         const properSchemaForModifiedExpenseMessageWithHTML = getForReportAction({
             translate,
+            localeCompare: localeCompareLocal,
             reportAction: lastReportAction,
             policy,
             movedFromReport,
diff --git a/src/libs/ReportNameUtils.ts b/src/libs/ReportNameUtils.ts
@@ -25,7 +25,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import {convertToDisplayString} from './CurrencyUtils';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from './LocalePhoneNumber';
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-import {translateLocal} from './Localize';
+import {localeCompareLocal, translateLocal} from './Localize';
 // eslint-disable-next-line import/no-cycle
 import {getForReportAction, getMovedReportID} from './ModifiedExpenseMessage';
 import Parser from './Parser';
@@ -835,6 +835,7 @@ function computeChatThreadReportName(
         const movedToReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(parentReportAction, CONST.REPORT.MOVE_TYPE.TO)}`];
         const modifiedMessageWithHTML = getForReportAction({
             translate,
+            localeCompare: localeCompareLocal,
             reportAction: parentReportAction,
             movedFromReport,
             movedToReport,
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -111,7 +111,7 @@ import getBase62ReportID from './getBase62ReportID';
 import {isReportMessageAttachment} from './isReportMessageAttachment';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from './LocalePhoneNumber';
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-import {translateLocal} from './Localize';
+import {localeCompareLocal, translateLocal} from './Localize';
 import Log from './Log';
 import {isEmailPublicDomain} from './LoginUtils';
 // eslint-disable-next-line import/no-cycle
@@ -5862,6 +5862,7 @@ function getReportName(reportNameInformation: GetReportNameParams): string {
             const modifiedMessageWithHTML = getForReportAction({
                 // eslint-disable-next-line @typescript-eslint/no-deprecated -- translateLocal is deprecated; getReportName is non-React code that cannot use the translate hook
                 translate: translateLocal,
+                localeCompare: localeCompareLocal,
                 reportAction: parentReportAction,
                 policy,
                 movedFromReport,
diff --git a/src/libs/TransactionUtils/index.ts b/src/libs/TransactionUtils/index.ts
@@ -5,6 +5,7 @@ import lodashSet from 'lodash/set';
 import type {NullishDeep, OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import type {Coordinate} from '@components/MapView/MapViewTypes';
 import utils from '@components/MapView/utils';
 import type {UnreportedExpenseListItemType} from '@components/Search/SearchList/ListItem/types';
@@ -1201,39 +1202,24 @@ function getAttendees(transaction: OnyxInputOrEntry<Transaction>, currentUserPer
     return attendees;
 }
 
-// Mirrors LocaleContextProvider (same options + same IntlStore source) so non-React callers sort by the user's preferred locale.
-const ATTENDEES_DISPLAY_COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
-const attendeesDisplayCollatorCache = new Map<string, Intl.Collator>();
-
-function getAttendeesDisplayCollator(): Intl.Collator {
-    const locale = IntlStore.getCurrentLocale() ?? '';
-    let collator = attendeesDisplayCollatorCache.get(locale);
-    if (!collator) {
-        collator = new Intl.Collator(locale || undefined, ATTENDEES_DISPLAY_COLLATOR_OPTIONS);
-        attendeesDisplayCollatorCache.set(locale, collator);
-    }
-    return collator;
-}
-
 /**
  * Returns attendees joined as an alphabetically sorted display string. Sort is part of the contract — every consumer relies on it.
  */
-function getAttendeesListDisplayString(attendees: Attendee[]): string {
-    const collator = getAttendeesDisplayCollator();
+function getAttendeesListDisplayString(attendees: Attendee[], localeCompare: LocaleContextProps['localeCompare']): string {
     // Lowercase to match sortAlphabetically (the pill sort) so joined string and pill order never disagree on case.
     return [...attendees]
-        .sort((a, b) => collator.compare((a.displayName ?? a.login ?? '').toLowerCase(), (b.displayName ?? b.login ?? '').toLowerCase()))
+        .sort((a, b) => localeCompare((a.displayName ?? a.login ?? '').toLowerCase(), (b.displayName ?? b.login ?? '').toLowerCase()))
         .map((item) => item.displayName ?? item.login)
         .join(', ');
 }
 
 /**
  * Return the list of attendees as a string and modified list of attendees as a string if present.
  */
-function getFormattedAttendees(modifiedAttendees?: Attendee[], attendees?: Attendee[]): [string, string] {
+function getFormattedAttendees(localeCompare: LocaleContextProps['localeCompare'], modifiedAttendees?: Attendee[], attendees?: Attendee[]): [string, string] {
     const oldAttendees = modifiedAttendees ?? [];
     const newAttendees = attendees ?? [];
-    return [getAttendeesListDisplayString(oldAttendees), getAttendeesListDisplayString(newAttendees)];
+    return [getAttendeesListDisplayString(oldAttendees, localeCompare), getAttendeesListDisplayString(newAttendees, localeCompare)];
 }
 
 /**
diff --git a/src/pages/TransactionMerge/DetailsReviewPage.tsx b/src/pages/TransactionMerge/DetailsReviewPage.tsx
@@ -150,7 +150,7 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
     // Build merge fields array with all necessary information
     const mergeFields = useMemo(
         () =>
-            buildMergeFieldsData(conflictFields, targetTransaction, sourceTransaction, mergeTransaction, targetTransactionPolicy, sourceTransactionPolicy, translate, [
+            buildMergeFieldsData(conflictFields, targetTransaction, sourceTransaction, mergeTransaction, targetTransactionPolicy, sourceTransactionPolicy, translate, localeCompare, [
                 targetTransactionReport,
                 sourceTransactionReport,
             ]),
@@ -164,6 +164,7 @@ function DetailsReviewPage({route}: DetailsReviewPageProps) {
             targetTransactionPolicy,
             sourceTransactionPolicy,
             translate,
+            localeCompare,
         ],
     );
 
diff --git a/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx b/src/pages/inbox/report/ContextMenu/ContextMenuActions.tsx
@@ -18,6 +18,7 @@ import {getEnvironmentURL} from '@libs/Environment/Environment';
 import fileDownload from '@libs/fileDownload';
 import getAttachmentDetails from '@libs/fileDownload/getAttachmentDetails';
 import {formatPhoneNumber as formatPhoneNumberPhoneUtils} from '@libs/LocalePhoneNumber';
+import {localeCompareLocal} from '@libs/Localize';
 import {getForReportAction} from '@libs/ModifiedExpenseMessage';
 import createDynamicRoute from '@libs/Navigation/helpers/dynamicRoutesUtils/createDynamicRoute';
 import Navigation from '@libs/Navigation/Navigation';
@@ -852,6 +853,7 @@ const ContextMenuActions: ContextMenuAction[] = [
                 } else if (isModifiedExpenseAction(reportAction)) {
                     const modifyExpenseMessageWithHTML = getForReportAction({
                         translate,
+                        localeCompare: localeCompareLocal,
                         reportAction,
                         policy,
                         movedFromReport,
diff --git a/src/pages/inbox/report/actionContents/ModifiedExpenseContent.tsx b/src/pages/inbox/report/actionContents/ModifiedExpenseContent.tsx
@@ -18,7 +18,7 @@ type ModifiedExpenseContentProps = {
 };
 
 function ModifiedExpenseContent({action, report, childReport, originalReport}: ModifiedExpenseContentProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const {email: currentUserEmail} = useCurrentUserPersonalDetails();
     const {policyForMovingExpensesID} = usePolicyForMovingExpenses();
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`);
@@ -32,6 +32,7 @@ function ModifiedExpenseContent({action, report, childReport, originalReport}: M
 
     const modifiedExpenseMessage = getForReportAction({
         translate,
+        localeCompare,
         reportAction: action,
         policy,
         movedFromReport,
diff --git a/tests/perf-test/ModifiedExpenseMessage.perf-test.ts b/tests/perf-test/ModifiedExpenseMessage.perf-test.ts
@@ -5,6 +5,7 @@ import CONST from '@src/CONST';
 import IntlStore from '@src/languages/IntlStore';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Policy, Report} from '@src/types/onyx';
+import {localeCompareLocal} from '../../src/libs/Localize';
 import {getForReportAction} from '../../src/libs/ModifiedExpenseMessage';
 import createCollection from '../utils/collections/createCollection';
 import createRandomPolicy from '../utils/collections/policies';
@@ -65,5 +66,14 @@ test('[ModifiedExpenseMessage] getForReportAction on 1k reports and policies', a
     });
 
     await waitForBatchedUpdates();
-    await measureFunction(() => getForReportAction({translate: translateLocal, reportAction, policy: undefined, policyTags: mockedPolicyTags, currentUserLogin: CURRENT_USER_LOGIN}));
+    await measureFunction(() =>
+        getForReportAction({
+            translate: translateLocal,
+            localeCompare: localeCompareLocal,
+            reportAction,
+            policy: undefined,
+            policyTags: mockedPolicyTags,
+            currentUserLogin: CURRENT_USER_LOGIN,
+        }),
+    );
 });
diff --git a/tests/unit/MergeTransactionUtilsTest.ts b/tests/unit/MergeTransactionUtilsTest.ts
diff --git a/tests/unit/ModifiedExpenseMessageTest.ts b/tests/unit/ModifiedExpenseMessageTest.ts
diff --git a/tests/unit/TransactionUtilsTest.ts b/tests/unit/TransactionUtilsTest.ts
