Merge pull request #35053 from software-mansion-labs/@szymczak/EditSp…

…litPage [TS Migration] Migrate EditSplitBillPage to typescript
Expensify · Feb 13, 2024 · 67dd595 · 67dd595
2 parents d50d603 + eec89d2
commit 67dd595
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 74 deletions.
diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts
@@ -333,7 +333,12 @@ type SplitDetailsNavigatorParamList = {
     [SCREENS.SPLIT_DETAILS.ROOT]: {
         reportActionID: string;
     };
-    [SCREENS.SPLIT_DETAILS.EDIT_REQUEST]: undefined;
+    [SCREENS.SPLIT_DETAILS.EDIT_REQUEST]: {
+        field: string;
+        reportID: string;
+        reportActionID: string;
+        currency: string;
+    };
     [SCREENS.SPLIT_DETAILS.EDIT_CURRENCY]: undefined;
 };
 

diff --git a/src/libs/TransactionUtils.ts b/src/libs/TransactionUtils.ts
@@ -601,3 +601,5 @@ export {
     getRecentTransactions,
     hasViolation,
 };
+
+export type {TransactionChanges};
diff --git a/src/pages/EditRequestMerchantPage.js b/src/pages/EditRequestMerchantPage.js
@@ -21,7 +21,11 @@ const propTypes = {
     onSubmit: PropTypes.func.isRequired,
 
     /** Boolean to enable validation */
-    isPolicyExpenseChat: PropTypes.bool.isRequired,
+    isPolicyExpenseChat: PropTypes.bool,
+};
+
+const defaultProps = {
+    isPolicyExpenseChat: false,
 };
 
 function EditRequestMerchantPage({defaultMerchant, onSubmit, isPolicyExpenseChat}) {
@@ -75,6 +79,7 @@ function EditRequestMerchantPage({defaultMerchant, onSubmit, isPolicyExpenseChat
 }
 
 EditRequestMerchantPage.propTypes = propTypes;
+EditRequestMerchantPage.defaultProps = defaultProps;
 EditRequestMerchantPage.displayName = 'EditRequestMerchantPage';
 
 export default EditRequestMerchantPage;
diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js
@@ -16,12 +16,16 @@ const propTypes = {
     policyID: PropTypes.string.isRequired,
 
     /** The tag name to which the default tag belongs to */
-    tagName: PropTypes.string.isRequired,
+    tagName: PropTypes.string,
 
     /** Callback to fire when the Save button is pressed  */
     onSubmit: PropTypes.func.isRequired,
 };
 
+const defaultProps = {
+    tagName: '',
+};
+
 function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -58,6 +62,7 @@ function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) {
 }
 
 EditRequestTagPage.propTypes = propTypes;
+EditRequestTagPage.defaultProps = defaultProps;
 EditRequestTagPage.displayName = 'EditRequestTagPage';
 
 export default EditRequestTagPage;
diff --git a/src/pages/EditSplitBillPage.js → src/pages/EditSplitBillPage.tsx b/src/pages/EditSplitBillPage.js → src/pages/EditSplitBillPage.tsx
@@ -1,84 +1,71 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
-import transactionPropTypes from '@components/transactionPropTypes';
-import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SplitDetailsNavigatorParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
+import type {TransactionChanges} from '@libs/TransactionUtils';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type SCREENS from '@src/SCREENS';
+import type {Report, ReportActions, Transaction} from '@src/types/onyx';
+import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
 import EditRequestAmountPage from './EditRequestAmountPage';
 import EditRequestCategoryPage from './EditRequestCategoryPage';
 import EditRequestMerchantPage from './EditRequestMerchantPage';
 import EditRequestTagPage from './EditRequestTagPage';
-import reportPropTypes from './reportPropTypes';
 
-const propTypes = {
-    /** Route from navigation */
-    route: PropTypes.shape({
-        /** Params from the route */
-        params: PropTypes.shape({
-            /** The transaction field we are editing */
-            field: PropTypes.string,
-
-            /** The chat reportID of the split */
-            reportID: PropTypes.string,
+type EditSplitBillOnyxProps = {
+    /** The report currently being used */
+    report: OnyxEntry<Report>;
 
-            /** reportActionID of the split action */
-            reportActionID: PropTypes.string,
-        }),
-    }).isRequired,
+    /** The report action for currently used report */
+    // Used in withOnyx
+    // eslint-disable-next-line react/no-unused-prop-types
+    reportActions: OnyxEntry<ReportActions>;
 
     /** The current transaction */
-    transaction: transactionPropTypes.isRequired,
+    transaction: OnyxEntry<Transaction>;
 
     /** The draft transaction that holds data to be persisted on the current transaction */
-    draftTransaction: transactionPropTypes,
-
-    /** The report currently being used */
-    report: reportPropTypes.isRequired,
+    draftTransaction: OnyxEntry<Transaction>;
 };
 
-const defaultProps = {
-    draftTransaction: undefined,
-};
+type EditSplitBillProps = EditSplitBillOnyxProps & StackScreenProps<SplitDetailsNavigatorParamList, typeof SCREENS.SPLIT_DETAILS.EDIT_REQUEST>;
 
-function EditSplitBillPage({route, transaction, draftTransaction, report}) {
-    const fieldToEdit = lodashGet(route, ['params', 'field'], '');
-    const reportID = lodashGet(route, ['params', 'reportID'], '');
-    const reportActionID = lodashGet(route, ['params', 'reportActionID'], '');
+function EditSplitBillPage({route, transaction, draftTransaction, report}: EditSplitBillProps) {
+    const {field: fieldToEdit, reportID, reportActionID, currency} = route.params;
 
     const {
         amount: transactionAmount,
         currency: transactionCurrency,
         merchant: transactionMerchant,
         category: transactionCategory,
         tag: transactionTag,
-    } = draftTransaction ? ReportUtils.getTransactionDetails(draftTransaction) : ReportUtils.getTransactionDetails(transaction);
-
-    const defaultCurrency = lodashGet(route, 'params.currency', '') || transactionCurrency;
+    } = ReportUtils.getTransactionDetails(draftTransaction ?? transaction) ?? {};
 
+    const defaultCurrency = currency ?? transactionCurrency;
     function navigateBackToSplitDetails() {
         Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(reportID, reportActionID));
     }
 
-    const setDraftSplitTransaction = (transactionChanges) => {
-        IOU.setDraftSplitTransaction(transaction.transactionID, transactionChanges);
+    const setDraftSplitTransaction = (transactionChanges: TransactionChanges) => {
+        if (transaction) {
+            IOU.setDraftSplitTransaction(transaction.transactionID, transactionChanges);
+        }
         navigateBackToSplitDetails();
     };
 
     if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.AMOUNT) {
         return (
             <EditRequestAmountPage
-                defaultAmount={transactionAmount}
-                defaultCurrency={defaultCurrency}
-                reportID={reportID}
-                isEdittingSplitBill
+                defaultAmount={transactionAmount ?? 0}
+                defaultCurrency={defaultCurrency ?? ''}
                 onSubmit={(transactionChanges) => {
                     const amount = CurrencyUtils.convertToBackendAmount(Number.parseFloat(transactionChanges.amount));
 
@@ -98,7 +85,7 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
     if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.MERCHANT) {
         return (
             <EditRequestMerchantPage
-                defaultMerchant={transactionMerchant}
+                defaultMerchant={transactionMerchant ?? ''}
                 onSubmit={(transactionChanges) => {
                     setDraftSplitTransaction({merchant: transactionChanges.merchant.trim()});
                 }}
@@ -109,8 +96,8 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
     if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.CATEGORY) {
         return (
             <EditRequestCategoryPage
-                defaultCategory={transactionCategory}
-                policyID={lodashGet(report, 'policyID', '')}
+                defaultCategory={transactionCategory ?? ''}
+                policyID={report?.policyID ? report.policyID : ''}
                 onSubmit={(transactionChanges) => {
                     setDraftSplitTransaction({category: transactionChanges.category.trim()});
                 }}
@@ -121,8 +108,8 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
     if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.TAG) {
         return (
             <EditRequestTagPage
-                defaultTag={transactionTag}
-                policyID={lodashGet(report, 'policyID', '')}
+                defaultTag={transactionTag ?? ''}
+                policyID={report?.policyID ?? ''}
                 onSubmit={(transactionChanges) => {
                     setDraftSplitTransaction({tag: transactionChanges.tag.trim()});
                 }}
@@ -134,31 +121,27 @@ function EditSplitBillPage({route, transaction, draftTransaction, report}) {
 }
 
 EditSplitBillPage.displayName = 'EditSplitBillPage';
-EditSplitBillPage.propTypes = propTypes;
-EditSplitBillPage.defaultProps = defaultProps;
-export default compose(
-    withOnyx({
-        reportActions: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-            canEvict: false,
-        },
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
-    }),
-    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
-        transaction: {
-            key: ({route, reportActions}) => {
-                const reportAction = reportActions[`${route.params.reportActionID.toString()}`];
-                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`;
-            },
+
+export default withOnyx<EditSplitBillProps, EditSplitBillOnyxProps>({
+    report: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+    },
+    reportActions: {
+        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
+        canEvict: false,
+    },
+    transaction: {
+        key: ({route, reportActions}: Partial<EditSplitBillProps>) => {
+            const reportAction = reportActions?.[`${route?.params.reportActionID.toString()}`];
+            const transactionID = (reportAction as OriginalMessageIOU)?.originalMessage.IOUTransactionID ? (reportAction as OriginalMessageIOU).originalMessage.IOUTransactionID : 0;
+            return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
         },
-        draftTransaction: {
-            key: ({route, reportActions}) => {
-                const reportAction = reportActions[`${route.params.reportActionID.toString()}`];
-                return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${lodashGet(reportAction, 'originalMessage.IOUTransactionID', 0)}`;
-            },
+    },
+    draftTransaction: {
+        key: ({route, reportActions}: Partial<EditSplitBillProps>) => {
+            const reportAction = reportActions?.[`${route?.params.reportActionID.toString()}`];
+            const transactionID = (reportAction as OriginalMessageIOU)?.originalMessage.IOUTransactionID ? (reportAction as OriginalMessageIOU).originalMessage.IOUTransactionID : 0;
+            return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`;
         },
-    }),
-)(EditSplitBillPage);
+    },
+})(EditSplitBillPage);