Merge pull request #50721 from ChavdaSachin/fix/Sort-DIstanceRates-IO…

…UStepDistanceRates#50304 Sort Distance Rates on IOURequestsStepDistanceRate.tsx
Expensify · Oct 15, 2024 · e9de4f2 · e9de4f2
2 parents b4b5965 + c3249f1
commit e9de4f2
Showing 1 changed file with 22 additions and 44 deletions.
diff --git a/src/pages/iou/request/step/IOURequestStepDistanceRate.tsx b/src/pages/iou/request/step/IOURequestStepDistanceRate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
 import Text from '@components/Text';
@@ -23,35 +23,23 @@ import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
 import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound';
 import withWritableReportOrNotFound from './withWritableReportOrNotFound';
 
-type IOURequestStepDistanceRateOnyxProps = {
-    /** Policy details */
-    policy: OnyxEntry<OnyxTypes.Policy>;
-
-    /** Collection of categories attached to the policy */
-    policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;
-
-    /** Collection of tags attached to the policy */
-    policyTags: OnyxEntry<OnyxTypes.PolicyTagLists>;
+type IOURequestStepDistanceRateProps = WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_DISTANCE_RATE> & {
+    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+    transaction: OnyxEntry<OnyxTypes.Transaction>;
 };
 
-type IOURequestStepDistanceRateProps = IOURequestStepDistanceRateOnyxProps &
-    WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_DISTANCE_RATE> & {
-        /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-        transaction: OnyxEntry<OnyxTypes.Transaction>;
-    };
-
 function IOURequestStepDistanceRate({
-    policy: policyReal,
     report,
     reportDraft,
     route: {
         params: {action, reportID, backTo, transactionID},
     },
     transaction,
-    policyTags,
-    policyCategories,
 }: IOURequestStepDistanceRateProps) {
     const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${IOU.getIOURequestPolicyID(transaction, reportDraft) ?? '-1'}`);
+    const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`);
+    const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`);
+    const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`);
 
     const policy = policyReal ?? policyDraft;
 
@@ -70,18 +58,20 @@ function IOURequestStepDistanceRate({
         Navigation.goBack(backTo);
     };
 
-    const sections = Object.values(rates).map((rate) => {
-        const rateForDisplay = DistanceRequestUtils.getRateForDisplay(rate.unit, rate.rate, rate.currency, translate, toLocaleDigit);
-
-        return {
-            text: rate.name ?? rateForDisplay,
-            alternateText: rate.name ? rateForDisplay : '',
-            keyForList: rate.customUnitRateID,
-            value: rate.customUnitRateID,
-            isDisabled: !rate.enabled,
-            isSelected: currentRateID ? currentRateID === rate.customUnitRateID : rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE,
-        };
-    });
+    const sections = Object.values(rates)
+        .sort((rateA, rateB) => (rateA?.rate ?? 0) - (rateB?.rate ?? 0))
+        .map((rate) => {
+            const rateForDisplay = DistanceRequestUtils.getRateForDisplay(rate.unit, rate.rate, rate.currency, translate, toLocaleDigit);
+
+            return {
+                text: rate.name ?? rateForDisplay,
+                alternateText: rate.name ? rateForDisplay : '',
+                keyForList: rate.customUnitRateID,
+                value: rate.customUnitRateID,
+                isDisabled: !rate.enabled,
+                isSelected: currentRateID ? currentRateID === rate.customUnitRateID : rate.name === CONST.CUSTOM_UNITS.DEFAULT_RATE,
+            };
+        });
 
     const unit = (Object.values(rates).at(0)?.unit === CONST.CUSTOM_UNITS.DISTANCE_UNIT_MILES ? translate('common.mile') : translate('common.kilometer')) as Unit;
 
@@ -133,20 +123,8 @@ function IOURequestStepDistanceRate({
 
 IOURequestStepDistanceRate.displayName = 'IOURequestStepDistanceRate';
 
-const IOURequestStepDistanceRateWithOnyx = withOnyx<IOURequestStepDistanceRateProps, IOURequestStepDistanceRateOnyxProps>({
-    policy: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '-1'}`,
-    },
-    policyCategories: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
-    },
-    policyTags: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
-    },
-})(IOURequestStepDistanceRate);
-
 // eslint-disable-next-line rulesdir/no-negated-variables
-const IOURequestStepDistanceRateWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepDistanceRateWithOnyx);
+const IOURequestStepDistanceRateWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepDistanceRate);
 // eslint-disable-next-line rulesdir/no-negated-variables
 const IOURequestStepDistanceRateWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepDistanceRateWithWritableReportOrNotFound);