Merge pull request #38995 from software-mansion-labs/ts/war-in/iou-re…

…quest-step-desc-date [TS migration] Migrate IOURequestStepDescription, IOURequestStepDate and IOURequestStepCurrency pages to TypeScript
Expensify · Apr 2, 2024 · 5cdfbb7 · 5cdfbb7
2 parents ae57f45 + bbce2e0
commit 5cdfbb7
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 174 deletions.
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -357,47 +357,48 @@ type MoneyRequestNavigatorParamList = {
         iouType: string;
         reportID: string;
         currency: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_DATE]: {
         action: ValueOf<typeof CONST.IOU.ACTION>;
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_DESCRIPTION]: {
         action: ValueOf<typeof CONST.IOU.ACTION>;
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
+        reportActionID: string;
     };
     [SCREENS.MONEY_REQUEST.STEP_CATEGORY]: {
         action: ValueOf<typeof CONST.IOU.ACTION>;
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_TAX_AMOUNT]: {
         iouType: string;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_TAG]: {
         action: ValueOf<typeof CONST.IOU.ACTION>;
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_TAX_RATE]: {
         iouType: string;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.STEP_WAYPOINT]: {
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
@@ -412,7 +413,7 @@ type MoneyRequestNavigatorParamList = {
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.IOU_SEND.ENABLE_PAYMENTS]: undefined;
     [SCREENS.IOU_SEND.ADD_BANK_ACCOUNT]: undefined;
@@ -428,7 +429,7 @@ type MoneyRequestNavigatorParamList = {
         iouType: ValueOf<typeof CONST.IOU.TYPE>;
         transactionID: string;
         reportID: string;
-        backTo: string;
+        backTo: Routes;
     };
     [SCREENS.MONEY_REQUEST.RECEIPT]: {
         iouType: string;

diff --git a/...es/iou/request/step/IOURequestStepDate.js → ...s/iou/request/step/IOURequestStepDate.tsx b/...es/iou/request/step/IOURequestStepDate.js → ...s/iou/request/step/IOURequestStepDate.tsx
@@ -1,58 +1,46 @@
-import lodashGet from 'lodash/get';
 import lodashIsEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
-import categoryPropTypes from '@components/categoryPropTypes';
 import DatePicker from '@components/DatePicker';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
-import tagPropTypes from '@components/tagPropTypes';
-import transactionPropTypes from '@components/transactionPropTypes';
+import type {FormOnyxValues} from '@components/Form/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import {policyPropTypes} from '@src/pages/workspace/withPolicy';
+import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/MoneyRequestDateForm';
-import IOURequestStepRoutePropTypes from './IOURequestStepRoutePropTypes';
+import type * as OnyxTypes from '@src/types/onyx';
 import StepScreenWrapper from './StepScreenWrapper';
 import withFullTransactionOrNotFound from './withFullTransactionOrNotFound';
+import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound';
 import withWritableReportOrNotFound from './withWritableReportOrNotFound';
 
-const propTypes = {
-    /** Navigation route context info provided by react navigation */
-    route: IOURequestStepRoutePropTypes.isRequired,
-
-    /** Onyx Props */
-    /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
-    transaction: transactionPropTypes,
-
+type IOURequestStepDateOnyxProps = {
     /** The draft transaction that holds data to be persisted on the current transaction */
-    splitDraftTransaction: transactionPropTypes,
+    splitDraftTransaction: OnyxEntry<OnyxTypes.Transaction>;
 
     /** The policy of the report */
-    policy: policyPropTypes.policy,
+    policy: OnyxEntry<OnyxTypes.Policy>;
 
     /** Collection of categories attached to a policy */
-    policyCategories: PropTypes.objectOf(categoryPropTypes),
+    policyCategories: OnyxEntry<OnyxTypes.PolicyCategories>;
 
     /** Collection of tags attached to a policy */
-    policyTags: tagPropTypes,
+    policyTags: OnyxEntry<OnyxTypes.PolicyTagList>;
 };
 
-const defaultProps = {
-    transaction: {},
-    splitDraftTransaction: {},
-    policy: null,
-    policyTags: null,
-    policyCategories: null,
-};
+type IOURequestStepDateProps = IOURequestStepDateOnyxProps &
+    WithWritableReportOrNotFoundProps<typeof SCREENS.MONEY_REQUEST.STEP_WAYPOINT> & {
+        /** Holds data related to Money Request view state, rather than the underlying Money Request data. */
+        transaction: OnyxEntry<OnyxTypes.Transaction>;
+    };
 
 function IOURequestStepDate({
     route: {
@@ -63,7 +51,7 @@ function IOURequestStepDate({
     policy,
     policyTags,
     policyCategories,
-}) {
+}: IOURequestStepDateProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const isEditing = action === CONST.IOU.ACTION.EDIT;
@@ -75,11 +63,7 @@ function IOURequestStepDate({
         Navigation.goBack(backTo);
     };
 
-    /**
-     * @param {Object} value
-     * @param {String} value.moneyRequestCreated
-     */
-    const updateDate = (value) => {
+    const updateDate = (value: FormOnyxValues<typeof ONYXKEYS.FORMS.MONEY_REQUEST_DATE_FORM>) => {
         const newCreated = value.moneyRequestCreated;
 
         // Only update created if it has changed
@@ -90,15 +74,15 @@ function IOURequestStepDate({
 
         // In the split flow, when editing we use SPLIT_TRANSACTION_DRAFT to save draft value
         if (isEditingSplitBill) {
-            IOU.setDraftSplitTransaction(transaction.transactionID, {created: newCreated});
+            IOU.setDraftSplitTransaction(transaction?.transactionID ?? '0', {created: newCreated});
             navigateBack();
             return;
         }
 
-        IOU.setMoneyRequestCreated(transaction.transactionID, newCreated, action === CONST.IOU.ACTION.CREATE);
+        IOU.setMoneyRequestCreated(transaction?.transactionID ?? '0', newCreated, action === CONST.IOU.ACTION.CREATE);
 
         if (isEditing) {
-            IOU.updateMoneyRequestDate(transaction.transactionID, reportID, newCreated, policy, policyTags, policyCategories);
+            IOU.updateMoneyRequestDate(transaction?.transactionID ?? '0', reportID, newCreated, policy, policyTags, policyCategories);
         }
 
         navigateBack();
@@ -108,7 +92,7 @@ function IOURequestStepDate({
         <StepScreenWrapper
             headerTitle={translate('common.date')}
             onBackButtonPress={navigateBack}
-            shouldShowNotFound={!IOUUtils.isValidMoneyRequestType(iouType)}
+            shouldShowNotFoundPage={!IOUUtils.isValidMoneyRequestType(iouType)}
             shouldShowWrapper
             testID={IOURequestStepDate.displayName}
         >
@@ -132,28 +116,29 @@ function IOURequestStepDate({
     );
 }
 
-IOURequestStepDate.propTypes = propTypes;
-IOURequestStepDate.defaultProps = defaultProps;
 IOURequestStepDate.displayName = 'IOURequestStepDate';
 
-export default compose(
-    withWritableReportOrNotFound,
-    withFullTransactionOrNotFound,
-    withOnyx({
-        splitDraftTransaction: {
-            key: ({route}) => {
-                const transactionID = lodashGet(route, 'params.transactionID', 0);
-                return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
-            },
-        },
-        policy: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
-        },
-        policyCategories: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
-        },
-        policyTags: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
+const IOURequestStepDateWithOnyx = withOnyx<IOURequestStepDateProps, IOURequestStepDateOnyxProps>({
+    splitDraftTransaction: {
+        key: ({route}) => {
+            const transactionID = route?.params.transactionID ?? 0;
+            return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
         },
-    }),
-)(IOURequestStepDate);
+    },
+    policy: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report ? report.policyID : '0'}`,
+    },
+    policyCategories: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${report ? report.policyID : '0'}`,
+    },
+    policyTags: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${report ? report.policyID : '0'}`,
+    },
+})(IOURequestStepDate);
+
+// eslint-disable-next-line rulesdir/no-negated-variables
+const IOURequestStepDateWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepDateWithOnyx);
+// eslint-disable-next-line rulesdir/no-negated-variables
+const IOURequestStepDateWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepDateWithWritableReportOrNotFound);
+
+export default IOURequestStepDateWithFullTransactionOrNotFound;