Merge pull request Expensify#66755 from shubham1206agra/refactor-onyx-1

Refactored the localeCompare to use hook useLocalize

Author: tgolen

src/components/LocaleContextProvider.tsx

@@ -46,6 +46,9 @@ type LocaleContextProps = {
     /** Gets the standard digit corresponding to a locale digit */
     fromLocaleDigit: (digit: string) => string;
 
+    /** This is a wrapper around the localeCompare function that uses the preferred locale from the user's settings. */
+    localeCompare: (a: string, b: string) => number;
+
     /** The user's preferred locale e.g. 'en', 'es' */
     preferredLocale: Locale | undefined;
 };
@@ -60,9 +63,12 @@ const LocaleContext = createContext<LocaleContextProps>({
     toLocaleDigit: () => '',
     toLocaleOrdinal: () => '',
     fromLocaleDigit: () => '',
+    localeCompare: () => 0,
     preferredLocale: undefined,
 });
 
+const COLLATOR_OPTIONS: Intl.CollatorOptions = {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'};
+
 function LocaleContextProvider({children}: LocaleContextProviderProps) {
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
     const [areTranslationsLoading = true] = useOnyx(ONYXKEYS.ARE_TRANSLATIONS_LOADING, {initWithStoredValues: false, canBeMissing: true});
@@ -83,6 +89,8 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) {
 
     const selectedTimezone = useMemo(() => currentUserPersonalDetails?.timezone?.selected, [currentUserPersonalDetails]);
 
+    const collator = useMemo(() => new Intl.Collator(currentLocale, COLLATOR_OPTIONS), [currentLocale]);
+
     const translate = useMemo<LocaleContextProps['translate']>(
         () =>
             (path, ...parameters) =>
@@ -119,6 +127,8 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) {
 
     const fromLocaleDigit = useMemo<LocaleContextProps['fromLocaleDigit']>(() => (localeDigit) => fromLocaleDigitLocaleDigitUtils(currentLocale, localeDigit), [currentLocale]);
 
+    const localeCompare = useMemo<LocaleContextProps['localeCompare']>(() => (a, b) => collator.compare(a, b), [collator]);
+
     const contextValue = useMemo<LocaleContextProps>(
         () => ({
             translate,
@@ -130,9 +140,22 @@ function LocaleContextProvider({children}: LocaleContextProviderProps) {
             toLocaleDigit,
             toLocaleOrdinal,
             fromLocaleDigit,
+            localeCompare,
             preferredLocale: currentLocale,
         }),
-        [translate, numberFormat, getLocalDateFromDatetime, datetimeToRelative, datetimeToCalendarTime, formatPhoneNumber, toLocaleDigit, toLocaleOrdinal, fromLocaleDigit, currentLocale],
+        [
+            translate,
+            numberFormat,
+            getLocalDateFromDatetime,
+            datetimeToRelative,
+            datetimeToCalendarTime,
+            formatPhoneNumber,
+            toLocaleDigit,
+            toLocaleOrdinal,
+            fromLocaleDigit,
+            localeCompare,
+            currentLocale,
+        ],
     );
 
     return <LocaleContext.Provider value={contextValue}>{children}</LocaleContext.Provider>;

src/components/Search/SearchAutocompleteList.tsx

@@ -166,7 +166,7 @@ function SearchAutocompleteList(
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
 
     const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: true});
@@ -503,8 +503,8 @@ function SearchAutocompleteList(
     ]);
 
     const sortedRecentSearches = useMemo(() => {
-        return Object.values(recentSearches ?? {}).sort((a, b) => b.timestamp.localeCompare(a.timestamp));
-    }, [recentSearches]);
+        return Object.values(recentSearches ?? {}).sort((a, b) => localeCompare(b.timestamp, a.timestamp));
+    }, [recentSearches, localeCompare]);
 
     const recentSearchesData = sortedRecentSearches?.slice(0, 5).map(({query, timestamp}) => {
         const searchQueryJSON = buildSearchQueryJSON(query);

src/components/TagPicker/index.tsx

@@ -58,7 +58,7 @@ function TagPicker({
     const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, {canBeMissing: true});
     const [policyRecentlyUsedTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, {canBeMissing: true});
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
 
     const policyRecentlyUsedTagsList = useMemo(() => policyRecentlyUsedTags?.[tagListName] ?? [], [policyRecentlyUsedTags, tagListName]);
@@ -117,10 +117,10 @@ function TagPicker({
         return shouldOrderListByTagName
             ? tagSections.map((option) => ({
                   ...option,
-                  data: option.data.sort((a, b) => a.text?.localeCompare(b.text ?? '') ?? 0),
+                  data: option.data.sort((a, b) => localeCompare(a.text ?? '', b.text ?? '')),
               }))
             : tagSections;
-    }, [searchValue, selectedOptions, enabledTags, policyRecentlyUsedTagsList, shouldOrderListByTagName]);
+    }, [searchValue, selectedOptions, enabledTags, policyRecentlyUsedTagsList, shouldOrderListByTagName, localeCompare]);
 
     const headerMessage = getHeaderMessageForNonUserList((sections?.at(0)?.data?.length ?? 0) > 0, searchValue);
 

src/hooks/useCardFeedsForDisplay.ts

@@ -2,9 +2,11 @@ import {useMemo} from 'react';
 import {getCardFeedsForDisplayPerPolicy} from '@libs/CardFeedUtils';
 import {isPaidGroupPolicy} from '@libs/PolicyUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
+import useLocalize from './useLocalize';
 import useOnyx from './useOnyx';
 
 const useCardFeedsForDisplay = () => {
+    const {localeCompare} = useLocalize();
     const [allFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true});
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID, {canBeMissing: true});
     const [eligiblePoliciesIDs] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {
@@ -30,18 +32,18 @@ const useCardFeedsForDisplay = () => {
         if (activePolicyID && eligiblePoliciesIDs.has(activePolicyID)) {
             const policyCardFeeds = cardFeedsByPolicy[activePolicyID];
             if (policyCardFeeds?.length) {
-                return policyCardFeeds.sort((a, b) => a.name.localeCompare(b.name)).at(0);
+                return policyCardFeeds.sort((a, b) => localeCompare(a.name, b.name)).at(0);
             }
         }
 
         // If the active policy doesn't have card feeds, use the first eligible policy that does
         for (const eligiblePolicyID of eligiblePoliciesIDs) {
             const policyCardFeeds = cardFeedsByPolicy[eligiblePolicyID];
             if (policyCardFeeds?.length) {
-                return policyCardFeeds.sort((a, b) => a.name.localeCompare(b.name)).at(0);
+                return policyCardFeeds.sort((a, b) => localeCompare(a.name, b.name)).at(0);
             }
         }
-    }, [eligiblePoliciesIDs, activePolicyID, cardFeedsByPolicy]);
+    }, [eligiblePoliciesIDs, activePolicyID, cardFeedsByPolicy, localeCompare]);
 
     return {defaultCardFeed, cardFeedsByPolicy};
 };

src/libs/KeyboardShortcut/index.ts

@@ -1,7 +1,6 @@
 import {Str} from 'expensify-common';
 import * as KeyCommand from 'react-native-key-command';
 import getOperatingSystem from '@libs/getOperatingSystem';
-import localeCompare from '@libs/LocaleCompare';
 import CONST from '@src/CONST';
 import bindHandlerToKeydownEvent from './bindHandlerToKeydownEvent';
 
@@ -32,10 +31,6 @@ type Shortcut = {
 // Documentation information for keyboard shortcuts that are displayed in the keyboard shortcuts informational modal
 const documentedShortcuts: Record<string, Shortcut> = {};
 
-function getDocumentedShortcuts(): Shortcut[] {
-    return Object.values(documentedShortcuts).sort((a, b) => localeCompare(a.displayName, b.displayName));
-}
-
 const keyInputEnter = KeyCommand?.constants?.keyInputEnter?.toString() ?? 'keyInputEnter';
 const keyInputEscape = KeyCommand?.constants?.keyInputEscape?.toString() ?? 'keyInputEscape';
 const keyInputUpArrow = KeyCommand?.constants?.keyInputUpArrow?.toString() ?? 'keyInputUpArrow';
@@ -192,7 +187,6 @@ function subscribe(
 const KeyboardShortcut = {
     subscribe,
     getDisplayName,
-    getDocumentedShortcuts,
     getPlatformEquivalentForKeys,
 };
 

src/libs/SuggestionUtils.ts

@@ -1,4 +1,7 @@
 import CONST from '@src/CONST';
+import type {PersonalDetails} from '@src/types/onyx';
+import localeCompare from './LocaleCompare';
+import {getDisplayNameForParticipant} from './ReportUtils';
 
 /**
  * Trims first character of the string if it is a space
@@ -20,4 +23,28 @@ function hasEnoughSpaceForLargeSuggestionMenu(listHeight: number, composerHeight
     return availableHeight > menuHeight;
 }
 
-export {trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu};
+function getDisplayName(details: PersonalDetails) {
+    const displayNameFromAccountID = getDisplayNameForParticipant({accountID: details.accountID});
+    if (!displayNameFromAccountID) {
+        return details.login?.length ? details.login : '';
+    }
+    return displayNameFromAccountID;
+}
+
+/**
+ * Comparison function to sort users. It compares weights, display names, and accountIDs in that order
+ */
+function compareUserInList(first: PersonalDetails & {weight: number}, second: PersonalDetails & {weight: number}) {
+    if (first.weight !== second.weight) {
+        return first.weight - second.weight;
+    }
+
+    const displayNameLoginOrder = localeCompare(getDisplayName(first), getDisplayName(second));
+    if (displayNameLoginOrder !== 0) {
+        return displayNameLoginOrder;
+    }
+
+    return first.accountID - second.accountID;
+}
+
+export {trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu, compareUserInList};

src/libs/TaxOptionsListUtils.ts

@@ -145,5 +145,5 @@ function getTaxRatesSection({
     return policyRatesSections;
 }
 
-export {getTaxRatesSection, sortTaxRates, getTaxRatesOptions};
+export {getTaxRatesSection, getTaxRatesOptions};
 export type {TaxRatesOption, Tax};

src/pages/Debug/DebugDetails.tsx

@@ -53,15 +53,15 @@ type DebugDetailsProps = {
 };
 
 function DebugDetails({formType, data, policyHasEnabledTags, policyID, children, onSave, onDelete, validate}: DebugDetailsProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const styles = useThemeStyles();
     const [formDraftData] = useOnyx(ONYXKEYS.FORMS.DEBUG_DETAILS_FORM_DRAFT, {canBeMissing: true});
     const booleanFields = useMemo(
         () =>
             Object.entries(data ?? {})
                 .filter(([, value]) => typeof value === 'boolean')
-                .sort((a, b) => a[0].localeCompare(b[0])) as Array<[string, boolean]>,
-        [data],
+                .sort((a, b) => localeCompare(a[0], b[0])) as Array<[string, boolean]>,
+        [data, localeCompare],
     );
     const constantFields = useMemo(
         () =>
@@ -73,15 +73,15 @@ function DebugDetails({formType, data, policyHasEnabledTags, policyID, children,
                     }
                     return DETAILS_CONSTANT_FIELDS[formType].some(({fieldName}) => fieldName === entry[0]);
                 })
-                .sort((a, b) => a[0].localeCompare(b[0])),
-        [data, formType, policyHasEnabledTags],
+                .sort((a, b) => localeCompare(a[0], b[0])),
+        [data, formType, policyHasEnabledTags, localeCompare],
     );
     const numberFields = useMemo(
         () =>
             Object.entries(data ?? {})
                 .filter((entry): entry is [string, number] => typeof entry[1] === 'number')
-                .sort((a, b) => a[0].localeCompare(b[0])),
-        [data],
+                .sort((a, b) => localeCompare(a[0], b[0])),
+        [data, localeCompare],
     );
     const textFields = useMemo(
         () =>
@@ -93,8 +93,8 @@ function DebugDetails({formType, data, policyHasEnabledTags, policyID, children,
                         !DETAILS_DATETIME_FIELDS.includes(entry[0]),
                 )
                 .map(([key, value]) => [key, DebugUtils.onyxDataToString(value)])
-                .sort((a, b) => (a.at(0) ?? '').localeCompare(b.at(0) ?? '')),
-        [data, formType],
+                .sort((a, b) => localeCompare(a.at(0) ?? '', b.at(0) ?? '')),
+        [data, formType, localeCompare],
     );
     const dateTimeFields = useMemo(() => Object.entries(data ?? {}).filter((entry): entry is [string, string] => DETAILS_DATETIME_FIELDS.includes(entry[0])), [data]);
 

src/pages/EditReportFieldDropdown.tsx

@@ -8,9 +8,8 @@ import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import useTheme from '@hooks/useTheme';
-import localeCompare from '@libs/LocaleCompare';
-import * as OptionsListUtils from '@libs/OptionsListUtils';
-import * as ReportFieldOptionsListUtils from '@libs/ReportFieldOptionsListUtils';
+import {getHeaderMessageForNonUserList} from '@libs/OptionsListUtils';
+import {getReportFieldOptionsSection} from '@libs/ReportFieldOptionsListUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
 
 type EditReportFieldDropdownPageProps = {
@@ -28,11 +27,11 @@ type EditReportFieldDropdownPageProps = {
 };
 
 function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptions}: EditReportFieldDropdownPageProps) {
-    const [recentlyUsedReportFields] = useOnyx(ONYXKEYS.RECENTLY_USED_REPORT_FIELDS);
+    const [recentlyUsedReportFields] = useOnyx(ONYXKEYS.RECENTLY_USED_REPORT_FIELDS, {canBeMissing: true});
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const theme = useTheme();
-    const {translate} = useLocalize();
-    const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey]?.sort(localeCompare) ?? [], [recentlyUsedReportFields, fieldKey]);
+    const {translate, localeCompare} = useLocalize();
+    const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey]?.sort(localeCompare) ?? [], [recentlyUsedReportFields, fieldKey, localeCompare]);
 
     const itemRightSideComponent = useCallback(
         (item: ListItem) => {
@@ -53,7 +52,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
     const [sections, headerMessage] = useMemo(() => {
         const validFieldOptions = fieldOptions?.filter((option) => !!option)?.sort(localeCompare);
 
-        const policyReportFieldOptions = ReportFieldOptionsListUtils.getReportFieldOptionsSection({
+        const policyReportFieldOptions = getReportFieldOptionsSection({
             searchValue: debouncedSearchValue,
             selectedOptions: [
                 {
@@ -67,10 +66,10 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
         });
 
         const policyReportFieldData = policyReportFieldOptions.at(0)?.data ?? [];
-        const header = OptionsListUtils.getHeaderMessageForNonUserList(policyReportFieldData.length > 0, debouncedSearchValue);
+        const header = getHeaderMessageForNonUserList(policyReportFieldData.length > 0, debouncedSearchValue);
 
         return [policyReportFieldOptions, header];
-    }, [recentlyUsedOptions, debouncedSearchValue, fieldValue, fieldOptions]);
+    }, [fieldOptions, localeCompare, debouncedSearchValue, fieldValue, recentlyUsedOptions]);
 
     const selectedOptionKey = useMemo(() => (sections.at(0)?.data ?? []).filter((option) => option.searchText === fieldValue)?.at(0)?.keyForList, [sections, fieldValue]);
     return (

src/pages/NewChatConfirmPage.tsx

@@ -36,11 +36,11 @@ function navigateToEditChatName() {
 function NewChatConfirmPage() {
     const optimisticReportID = useRef<string>(generateReportID());
     const [avatarFile, setAvatarFile] = useState<File | CustomRNImageManipulatorResult | undefined>();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const styles = useThemeStyles();
     const personalData = useCurrentUserPersonalDetails();
-    const [newGroupDraft, newGroupDraftMetaData] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT);
-    const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [newGroupDraft, newGroupDraftMetaData] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT, {canBeMissing: true});
+    const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: false});
 
     const selectedOptions = useMemo((): Participant[] => {
         if (!newGroupDraft?.participants) {
@@ -72,8 +72,8 @@ function NewChatConfirmPage() {
                     };
                     return section;
                 })
-                .sort((a, b) => a.text?.toLowerCase().localeCompare(b.text?.toLowerCase() ?? '') ?? -1),
-        [selectedOptions, personalData.accountID, translate],
+                .sort((a, b) => localeCompare(a.text?.toLowerCase() ?? '', b.text?.toLowerCase() ?? '')),
+        [selectedOptions, personalData.accountID, translate, localeCompare],
     );
 
     /**