Refactored localeCompare in CategoryOptionListUtils

Author: shubham1206agra

src/components/CategoryPicker.tsx

@@ -33,7 +33,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea
     const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, {canBeMissing: true});
     const {isOffline} = useNetwork();
 
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : '';
 
@@ -58,6 +58,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea
             searchValue: debouncedSearchValue,
             selectedOptions,
             categories,
+            localeCompare,
             recentlyUsedCategories: validPolicyRecentlyUsedCategories,
         });
 
@@ -68,7 +69,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea
         const showInput = !isCategoriesCountBelowThreshold;
 
         return [categoryOptions, header, showInput];
-    }, [policyRecentlyUsedCategories, debouncedSearchValue, selectedOptions, policyCategories, policyCategoriesDraft]);
+    }, [policyRecentlyUsedCategories, debouncedSearchValue, selectedOptions, policyCategories, policyCategoriesDraft, localeCompare]);
 
     const selectedOptionKey = useMemo(() => (sections?.at(0)?.data ?? []).filter((category) => category.searchText === selectedCategory).at(0)?.keyForList, [sections, selectedCategory]);
 

src/libs/CategoryOptionListUtils.ts

@@ -1,12 +1,12 @@
 // eslint-disable-next-line you-dont-need-lodash-underscore/get
 import lodashGet from 'lodash/get';
 import lodashSet from 'lodash/set';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import type {PolicyCategories} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import times from '@src/utils/times';
-import localeCompare from './LocaleCompare';
 import {translateLocal} from './Localize';
 import type {OptionTree, SectionBase} from './OptionsListUtils';
 import tokenizedSearch from './tokenizedSearch';
@@ -85,18 +85,20 @@ function getCategoryOptionTree(options: Record<string, Category> | Category[], i
  */
 function getCategoryListSections({
     categories,
+    localeCompare,
     searchValue,
     selectedOptions = [],
     recentlyUsedCategories = [],
     maxRecentReportsToShow = CONST.IOU.MAX_RECENT_REPORTS_TO_SHOW,
 }: {
     categories: PolicyCategories;
+    localeCompare: LocaleContextProps['localeCompare'];
     selectedOptions?: Category[];
     searchValue?: string;
     recentlyUsedCategories?: string[];
     maxRecentReportsToShow?: number;
 }): CategoryTreeSection[] {
-    const sortedCategories = sortCategories(categories);
+    const sortedCategories = sortCategories(categories, localeCompare);
     const enabledCategories = Object.values(sortedCategories).filter((category) => category.enabled);
     const enabledCategoriesNames = enabledCategories.map((category) => category.name);
     const selectedOptionsWithDisabledState: Category[] = [];
@@ -212,7 +214,7 @@ function getCategoryListSections({
  * It builds an hierarchy (based on an object), where each category has a name and other keys as subcategories.
  * Via the hierarchy we avoid duplicating and sort categories one by one. Subcategories are being sorted alphabetically.
  */
-function sortCategories(categories: Record<string, Category>): Category[] {
+function sortCategories(categories: Record<string, Category>, localeCompare: LocaleContextProps['localeCompare']): Category[] {
     // Sorts categories alphabetically by name.
     const sortedCategories = Object.values(categories).sort((a, b) => localeCompare(a.name, b.name));
 

tests/unit/CategoryOptionListUtilsTest.ts

@@ -5,6 +5,7 @@ import CONST from '@src/CONST';
 import IntlStore from '@src/languages/IntlStore';
 import type {PolicyCategories} from '@src/types/onyx';
 import type {PendingAction} from '@src/types/onyx/OnyxCommon';
+import {localeCompare} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 describe('CategoryOptionListUtils', () => {
@@ -509,24 +510,26 @@ describe('CategoryOptionListUtils', () => {
 
         const smallResult = getCategoryListSections({
             searchValue: emptySearch,
+            localeCompare,
             categories: smallCategoriesList,
         });
         expect(smallResult).toStrictEqual(smallResultList);
 
-        const smallSearchResult = getCategoryListSections({searchValue: search, categories: smallCategoriesList});
+        const smallSearchResult = getCategoryListSections({searchValue: search, categories: smallCategoriesList, localeCompare});
         expect(smallSearchResult).toStrictEqual(smallSearchResultList);
 
-        const smallWrongSearchResult = getCategoryListSections({searchValue: wrongSearch, categories: smallCategoriesList});
+        const smallWrongSearchResult = getCategoryListSections({searchValue: wrongSearch, categories: smallCategoriesList, localeCompare});
         expect(smallWrongSearchResult).toStrictEqual(smallWrongSearchResultList);
 
-        const employeeSearchResult = getCategoryListSections({searchValue: employeeSearch, categories: smallCategoriesList});
+        const employeeSearchResult = getCategoryListSections({searchValue: employeeSearch, categories: smallCategoriesList, localeCompare});
         expect(employeeSearchResult).toStrictEqual(employeeSearchResultList);
 
         const largeResult = getCategoryListSections({
             searchValue: emptySearch,
             selectedOptions,
             categories: largeCategoriesList,
             recentlyUsedCategories,
+            localeCompare,
         });
         expect(largeResult).toStrictEqual(largeResultList);
 
@@ -535,6 +538,7 @@ describe('CategoryOptionListUtils', () => {
             selectedOptions,
             categories: largeCategoriesList,
             recentlyUsedCategories,
+            localeCompare,
         });
         expect(largeSearchResult).toStrictEqual(largeSearchResultList);
 
@@ -543,10 +547,11 @@ describe('CategoryOptionListUtils', () => {
             selectedOptions,
             categories: largeCategoriesList,
             recentlyUsedCategories,
+            localeCompare,
         });
         expect(largeWrongSearchResult).toStrictEqual(largeWrongSearchResultList);
 
-        const emptyResult = getCategoryListSections({searchValue: search, selectedOptions, categories: emptyCategoriesList});
+        const emptyResult = getCategoryListSections({searchValue: search, selectedOptions, categories: emptyCategoriesList, localeCompare});
         expect(emptyResult).toStrictEqual(emptySelectedResultList);
     });
 
@@ -1285,8 +1290,8 @@ describe('CategoryOptionListUtils', () => {
             },
         ];
 
-        expect(sortCategories(categoriesIncorrectOrdering)).toStrictEqual(result);
-        expect(sortCategories(categoriesIncorrectOrdering2)).toStrictEqual(result2);
-        expect(sortCategories(categoriesIncorrectOrdering3)).toStrictEqual(result3);
+        expect(sortCategories(categoriesIncorrectOrdering, localeCompare)).toStrictEqual(result);
+        expect(sortCategories(categoriesIncorrectOrdering2, localeCompare)).toStrictEqual(result2);
+        expect(sortCategories(categoriesIncorrectOrdering3, localeCompare)).toStrictEqual(result3);
     });
 });

tests/utils/TestHelper.ts

@@ -346,6 +346,16 @@ async function navigateToSidebarOption(index: number): Promise<void> {
     await waitForBatchedUpdatesWithAct();
 }
 
+/**
+ * @private
+ * This is a custom collator only for testing purposes.
+ */
+const customCollator = new Intl.Collator('en', {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'});
+
+function localeCompare(a: string, b: string): number {
+    return customCollator.compare(a, b);
+}
+
 export type {MockFetch, FormData};
 export {
     assertFormDataMatchesObject,
@@ -363,4 +373,5 @@ export {
     navigateToSidebarOption,
     getOnyxData,
     getNavigateToChatHintRegex,
+    localeCompare,
 };