Merge pull request Expensify#71735 from shubham1206agra/revert-71724-revert-71570-refactor-onyx-57

Refactored usage of localeCompare in ReportUtils (part 4)

Author: mountiny

cspell.json

@@ -800,7 +800,7 @@
         "src/TIMEZONES.ts",
         "tests/unit/EmojiTest.ts",
         "tests/unit/FastSearchTest.ts",
-        "tests/unit/LocaleCompareTest.ts",
+        "tests/unit/useLocalizeTest.tsx",
         "tests/unit/removeInvisibleCharacters.ts",
         "tests/unit/searchCountryOptionsTest.ts",
         "tests/unit/currencyList.json",

src/libs/LocaleCompare.ts

@@ -101,7 +101,6 @@ import {getMicroSecondOnyxErrorWithTranslationKey, isReceiptError} from './Error
 import getAttachmentDetails from './fileDownload/getAttachmentDetails';
 import getBase62ReportID from './getBase62ReportID';
 import {isReportMessageAttachment} from './isReportMessageAttachment';
-import localeCompareLibs from './LocaleCompare';
 import {formatPhoneNumber} from './LocalePhoneNumber';
 import {translateLocal} from './Localize';
 import Log from './Log';
@@ -3107,6 +3106,14 @@ function buildParticipantsFromAccountIDs(accountIDs: number[]): Participants {
     }, finalParticipants);
 }
 
+/**
+ * @private
+ * This is a custom collator only for getGroupChatName function.
+ * The reason for this is that the computation of default group name should not depend on the locale.
+ * This is used to ensure that group name stays consistent across locales.
+ */
+const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+
 /**
  * Returns the report name if the report is a group chat
  */
@@ -3138,7 +3145,7 @@ function getGroupChatName(participants?: SelectedParticipant[], shouldApplyLimit
                 (participantAccountID, index) =>
                     getDisplayNameForParticipant({accountID: participantAccountID, shouldUseShortForm: isMultipleParticipantReport}) || formatPhoneNumber(participants?.[index]?.login ?? ''),
             )
-            .sort((first, second) => localeCompareLibs(first ?? '', second ?? ''))
+            .sort((first, second) => customCollator.compare(first ?? '', second ?? ''))
             .filter(Boolean)
             .join(', ')
             .slice(0, CONST.REPORT_NAME_LIMIT)

src/libs/ReportUtils.ts

@@ -0,0 +1,78 @@
+import {renderHook} from '@testing-library/react-native';
+import React from 'react';
+import Onyx from 'react-native-onyx';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import useLocalize from '@hooks/useLocalize';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+describe('useLocalize', () => {
+    beforeAll(async () => {
+        Onyx.init({keys: ONYXKEYS});
+        await Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.DEFAULT);
+        return waitForBatchedUpdatesWithAct();
+    });
+
+    function TestWrapper({children}: {children: React.ReactNode}) {
+        return <LocaleContextProvider>{children}</LocaleContextProvider>;
+    }
+
+    describe('localeCompare', () => {
+        it('should return -1 for descending comparison', async () => {
+            const {result} = renderHook(() => useLocalize(), {
+                wrapper: TestWrapper,
+            });
+            await waitForBatchedUpdatesWithAct();
+            const ans = result.current.localeCompare('Da Vinci', 'Tesla');
+
+            expect(ans).toBe(-1);
+        });
+
+        it('should return -1 for ascending comparison', async () => {
+            const {result} = renderHook(() => useLocalize(), {
+                wrapper: TestWrapper,
+            });
+            await waitForBatchedUpdatesWithAct();
+            const ans = result.current.localeCompare('Zidane', 'Messi');
+
+            expect(ans).toBe(1);
+        });
+
+        it('should return 0 for equal strings', async () => {
+            const {result} = renderHook(() => useLocalize(), {
+                wrapper: TestWrapper,
+            });
+            await waitForBatchedUpdatesWithAct();
+            const ans = result.current.localeCompare('Cat', 'Cat');
+
+            expect(ans).toBe(0);
+        });
+
+        it('should put uppercase letters first', async () => {
+            const {result} = renderHook(() => useLocalize(), {
+                wrapper: TestWrapper,
+            });
+            await waitForBatchedUpdatesWithAct();
+            const ans = result.current.localeCompare('apple', 'Apple');
+
+            expect(ans).toBe(1);
+        });
+
+        it('distinguishes spanish diacritic characters', async () => {
+            await Onyx.set(ONYXKEYS.NVP_PREFERRED_LOCALE, CONST.LOCALES.ES);
+            await waitForBatchedUpdatesWithAct();
+
+            const {result} = renderHook(() => useLocalize(), {
+                wrapper: TestWrapper,
+            });
+            await waitForBatchedUpdatesWithAct();
+
+            const input = ['zorro', 'árbol', 'jalapeño', 'jalapeno', 'nino', 'niño'];
+
+            input.sort(result.current.localeCompare);
+
+            expect(input).toEqual(['árbol', 'jalapeno', 'jalapeño', 'nino', 'niño', 'zorro']);
+        });
+    });
+});