Merge pull request Expensify#67386 from shubham1206agra/refactor-onyx-9

Refactored localeCompare in TaxOptionsListUtils and TaxRate actions

Author: tgolen

src/components/TaxPicker.tsx

@@ -43,18 +43,19 @@ type TaxPickerProps = {
 };
 
 function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, action, iouType, onDismiss = Navigation.goBack, addBottomSafeAreaPadding}: TaxPickerProps) {
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const [searchValue, setSearchValue] = useState('');
-    const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`);
+    const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`, {canBeMissing: true});
 
-    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+    const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {canBeMissing: true});
     const [transaction] = useOnyx(
         (() => {
             if (shouldUseTransactionDraft(action)) {
                 return `${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}` as `${typeof ONYXKEYS.COLLECTION.TRANSACTION}${string}`;
             }
             return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
         })(),
+        {canBeMissing: true},
     );
 
     const isEditing = action === CONST.IOU.ACTION.EDIT;
@@ -86,10 +87,11 @@ function TaxPicker({selectedTaxRate = '', policyID, transactionID, onSubmit, act
             getTaxRatesSection({
                 policy,
                 searchValue,
+                localeCompare,
                 selectedOptions,
                 transaction: currentTransaction,
             }),
-        [searchValue, selectedOptions, policy, currentTransaction],
+        [searchValue, selectedOptions, policy, currentTransaction, localeCompare],
     );
 
     const headerMessage = getHeaderMessageForNonUserList((sections.at(0)?.data?.length ?? 0) > 0, searchValue);

src/libs/TaxOptionsListUtils.ts

@@ -1,8 +1,8 @@
 import type {OnyxEntry} from 'react-native-onyx';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import CONST from '@src/CONST';
 import type {Policy, TaxRate, TaxRates, Transaction} from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
-import localeCompare from './LocaleCompare';
 import tokenizedSearch from './tokenizedSearch';
 import {transformedTaxRates} from './TransactionUtils';
 
@@ -32,7 +32,7 @@ type TaxSection = {
 /**
  * Sorts tax rates alphabetically by name.
  */
-function sortTaxRates(taxRates: TaxRates): TaxRate[] {
+function sortTaxRates(taxRates: TaxRates, localeCompare: LocaleContextProps['localeCompare']): TaxRate[] {
     const sortedTaxRates = Object.values(taxRates).sort((a, b) => localeCompare(a.name, b.name));
     return sortedTaxRates;
 }
@@ -59,19 +59,21 @@ function getTaxRatesOptions(taxRates: Array<Partial<TaxRate>>): TaxRatesOption[]
 function getTaxRatesSection({
     policy,
     searchValue,
+    localeCompare,
     selectedOptions = [],
     transaction,
 }: {
     policy: OnyxEntry<Policy> | undefined;
     searchValue: string;
+    localeCompare: LocaleContextProps['localeCompare'];
     selectedOptions?: Tax[];
     transaction?: OnyxEntry<Transaction>;
 }): TaxSection[] {
     const policyRatesSections = [];
 
     const taxes = transformedTaxRates(policy, transaction);
 
-    const sortedTaxRates = sortTaxRates(taxes);
+    const sortedTaxRates = sortTaxRates(taxes, localeCompare);
     const selectedOptionNames = selectedOptions.map((selectedOption) => selectedOption.modifiedName);
     const enabledTaxRates = sortedTaxRates.filter((taxRate) => !taxRate.isDisabled);
     const enabledTaxRatesNames = enabledTaxRates.map((tax) => tax.modifiedName);

src/libs/actions/TaxRate.ts

@@ -1,6 +1,7 @@
 import type {NullishDeep, OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import Onyx from 'react-native-onyx';
 import type {FormOnyxValues} from '@components/Form/types';
+import type {LocaleContextProps} from '@components/LocaleContextProvider';
 import * as API from '@libs/API';
 import type {
     CreatePolicyTaxParams,
@@ -11,7 +12,6 @@ import type {
     UpdatePolicyTaxValueParams,
 } from '@libs/API/parameters';
 import {WRITE_COMMANDS} from '@libs/API/types';
-import localeCompare from '@libs/LocaleCompare';
 import {translateLocal} from '@libs/Localize';
 import {getDistanceRateCustomUnit} from '@libs/PolicyUtils';
 import {getFieldRequiredErrors, isExistingTaxCode, isExistingTaxName, isValidPercentage} from '@libs/ValidationUtils';
@@ -296,7 +296,7 @@ type TaxRateDeleteMap = Record<
     | null
 >;
 
-function deletePolicyTaxes(policy: OnyxEntry<Policy>, taxesToDelete: string[]) {
+function deletePolicyTaxes(policy: OnyxEntry<Policy>, taxesToDelete: string[], localeCompare: LocaleContextProps['localeCompare']) {
     const policyTaxRates = policy?.taxRates?.taxes;
     const foreignTaxDefault = policy?.taxRates?.foreignTaxDefault;
     const firstTaxID = Object.keys(policyTaxRates ?? {})

src/pages/workspace/taxes/WorkspaceEditTaxPage.tsx

@@ -34,7 +34,7 @@ function WorkspaceEditTaxPage({
     policy,
 }: WorkspaceEditTaxPageBaseProps) {
     const styles = useThemeStyles();
-    const {translate} = useLocalize();
+    const {translate, localeCompare} = useLocalize();
     const currentTaxID = getCurrentTaxID(policy, taxID);
     const currentTaxRate = currentTaxID && policy?.taxRates?.taxes?.[currentTaxID];
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
@@ -60,7 +60,7 @@ function WorkspaceEditTaxPage({
         if (!policyID) {
             return;
         }
-        deletePolicyTaxes(policy, [taxID]);
+        deletePolicyTaxes(policy, [taxID], localeCompare);
         setIsDeleteModalVisible(false);
         Navigation.goBack();
     };

src/pages/workspace/taxes/WorkspaceTaxesPage.tsx

@@ -245,13 +245,13 @@ function WorkspaceTaxesPage({
         if (!policy?.id) {
             return;
         }
-        deletePolicyTaxes(policy, selectedTaxesIDs);
+        deletePolicyTaxes(policy, selectedTaxesIDs, localeCompare);
         setIsDeleteModalVisible(false);
 
         InteractionManager.runAfterInteractions(() => {
             setSelectedTaxesIDs([]);
         });
-    }, [policy, selectedTaxesIDs]);
+    }, [policy, selectedTaxesIDs, localeCompare]);
 
     const toggleTaxes = useCallback(
         (isEnabled: boolean) => {

tests/actions/PolicyTaxTest.ts

@@ -680,7 +680,7 @@ describe('actions/PolicyTax', () => {
             const taxID = 'id_TAX_RATE_1';
 
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicy, [taxID]);
+            deletePolicyTaxes(fakePolicy, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>
@@ -734,7 +734,7 @@ describe('actions/PolicyTax', () => {
                 },
             };
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicyWithForeignTaxDefault, [taxID]);
+            deletePolicyTaxes(fakePolicyWithForeignTaxDefault, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>
@@ -781,7 +781,7 @@ describe('actions/PolicyTax', () => {
             const taxID = 'id_TAX_RATE_1';
 
             mockFetch?.pause?.();
-            deletePolicyTaxes(fakePolicy, [taxID]);
+            deletePolicyTaxes(fakePolicy, [taxID], TestHelper.localeCompare);
             return waitForBatchedUpdates()
                 .then(
                     () =>

tests/unit/TaxOptionsListUtilsTest.ts

@@ -2,6 +2,7 @@ import type {Section} from '@libs/OptionsListUtils';
 import {getTaxRatesSection} from '@libs/TaxOptionsListUtils';
 import IntlStore from '@src/languages/IntlStore';
 import type {Policy, TaxRatesWithDefault, Transaction} from '@src/types/onyx';
+import {localeCompare} from '../utils/TestHelper';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 describe('TaxOptionsListUtils', () => {
@@ -121,6 +122,7 @@ describe('TaxOptionsListUtils', () => {
         const result = getTaxRatesSection({
             policy,
             searchValue: emptySearch,
+            localeCompare,
             transaction,
         });
 
@@ -129,20 +131,23 @@ describe('TaxOptionsListUtils', () => {
         const searchResult = getTaxRatesSection({
             policy,
             searchValue: search,
+            localeCompare,
             transaction,
         });
         expect(searchResult).toStrictEqual(searchResultList);
 
         const tokenizeSearchResult = getTaxRatesSection({
             policy,
             searchValue: tokenizeSearch,
+            localeCompare,
             transaction,
         });
         expect(tokenizeSearchResult).toStrictEqual(searchResultList);
 
         const wrongSearchResult = getTaxRatesSection({
             policy,
             searchValue: wrongSearch,
+            localeCompare,
             transaction,
         });
         expect(wrongSearchResult).toStrictEqual(wrongSearchResultList);