Merge pull request #34106 from callstack-internal/pac-guerreiro/refac…

…tor/migrate-moneyrequestheader-to-typescript [TS migration] Migrate 'MoneyRequestHeader.js' component to TypeScript
Expensify · Feb 8, 2024 · 67be38b · 67be38b
2 parents 9aa9a72 + 4a3e418
commit 67be38b
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 65 deletions.
diff --git a/src/components/MoneyRequestHeader.js → src/components/MoneyRequestHeader.tsx b/src/components/MoneyRequestHeader.js → src/components/MoneyRequestHeader.tsx
@@ -1,83 +1,69 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
+import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
-import compose from '@libs/compose';
 import * as HeaderUtils from '@libs/HeaderUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
-import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
 import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type {Policy, Report, ReportAction, ReportActions, Session, Transaction} from '@src/types/onyx';
+import type {OriginalMessageIOU} from '@src/types/onyx/OriginalMessage';
 import ConfirmModal from './ConfirmModal';
 import HeaderWithBackButton from './HeaderWithBackButton';
 import * as Expensicons from './Icon/Expensicons';
 import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
 import {usePersonalDetails} from './OnyxProvider';
-import transactionPropTypes from './transactionPropTypes';
 
-const propTypes = {
-    /** The report currently being looked at */
-    report: iouReportPropTypes.isRequired,
-
-    /** The policy which the report is tied to */
-    policy: PropTypes.shape({
-        /** Name of the policy */
-        name: PropTypes.string,
-    }),
-
-    /* Onyx Props */
+type MoneyRequestHeaderOnyxProps = {
     /** Session info for the currently logged in user. */
-    session: PropTypes.shape({
-        /** Currently logged in user email */
-        email: PropTypes.string,
-    }),
+    session: OnyxEntry<Session>;
 
     /** The expense report or iou report (only will have a value if this is a transaction thread) */
-    parentReport: iouReportPropTypes,
-
-    /** The report action the transaction is tied to from the parent report */
-    parentReportAction: PropTypes.shape(reportActionPropTypes),
+    parentReport: OnyxEntry<Report>;
 
     /** All the data for the transaction */
-    transaction: transactionPropTypes,
+    transaction: OnyxEntry<Transaction>;
+
+    /** All report actions */
+    // eslint-disable-next-line react/no-unused-prop-types
+    parentReportActions: OnyxEntry<ReportActions>;
 };
 
-const defaultProps = {
-    session: {
-        email: null,
-    },
-    parentReport: {},
-    parentReportAction: {},
-    transaction: {},
-    policy: {},
+type MoneyRequestHeaderProps = MoneyRequestHeaderOnyxProps & {
+    /** The report currently being looked at */
+    report: Report;
+
+    /** The policy which the report is tied to */
+    policy: Policy;
+
+    /** The report action the transaction is tied to from the parent report */
+    parentReportAction: ReportAction & OriginalMessageIOU;
 };
 
-function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy}) {
+function MoneyRequestHeader({session, parentReport, report, parentReportAction, transaction, policy}: MoneyRequestHeaderProps) {
     const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
     const moneyRequestReport = parentReport;
-    const isSettled = ReportUtils.isSettled(moneyRequestReport.reportID);
+    const isSettled = ReportUtils.isSettled(moneyRequestReport?.reportID);
     const isApproved = ReportUtils.isReportApproved(moneyRequestReport);
     const {isSmallScreenWidth, windowWidth} = useWindowDimensions();
 
     // Only the requestor can take delete the request, admins can only edit it.
-    const isActionOwner = lodashGet(parentReportAction, 'actorAccountID') === lodashGet(session, 'accountID', null);
+    const isActionOwner = typeof parentReportAction?.actorAccountID === 'number' && typeof session?.accountID === 'number' && parentReportAction.actorAccountID === session?.accountID;
 
     const deleteTransaction = useCallback(() => {
-        IOU.deleteMoneyRequest(lodashGet(parentReportAction, 'originalMessage.IOUTransactionID'), parentReportAction, true);
+        IOU.deleteMoneyRequest(parentReportAction?.originalMessage?.IOUTransactionID ?? '', parentReportAction, true);
         setIsDeleteModalVisible(false);
     }, [parentReportAction, setIsDeleteModalVisible]);
 
@@ -109,7 +95,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                         ROUTES.MONEY_REQUEST_STEP_SCAN.getRoute(
                             CONST.IOU.ACTION.EDIT,
                             CONST.IOU.TYPE.REQUEST,
-                            transaction.transactionID,
+                            transaction?.transactionID ?? '',
                             report.reportID,
                             Navigation.getActiveRouteWithoutParams(),
                         ),
@@ -137,7 +123,7 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
                     threeDotsAnchorPosition={styles.threeDotsPopoverOffsetNoCloseButton(windowWidth)}
                     report={{
                         ...report,
-                        ownerAccountID: lodashGet(parentReport, 'ownerAccountID', null),
+                        ownerAccountID: parentReport?.ownerAccountID,
                     }}
                     policy={policy}
                     personalDetails={personalDetails}
@@ -174,29 +160,25 @@ function MoneyRequestHeader({session, parentReport, report, parentReportAction,
 }
 
 MoneyRequestHeader.displayName = 'MoneyRequestHeader';
-MoneyRequestHeader.propTypes = propTypes;
-MoneyRequestHeader.defaultProps = defaultProps;
 
-export default compose(
-    withOnyx({
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
-        parentReport: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`,
+const MoneyRequestHeaderWithTransaction = withOnyx<MoneyRequestHeaderProps, Pick<MoneyRequestHeaderOnyxProps, 'transaction'>>({
+    transaction: {
+        key: ({report, parentReportActions}) => {
+            const parentReportAction = (report.parentReportActionID && parentReportActions ? parentReportActions[report.parentReportActionID] : {}) as ReportAction & OriginalMessageIOU;
+            return `${ONYXKEYS.COLLECTION.TRANSACTION}${parentReportAction.originalMessage.IOUTransactionID ?? 0}`;
         },
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '0'}`,
-            canEvict: false,
-        },
-    }),
-    // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
-    withOnyx({
-        transaction: {
-            key: ({report, parentReportActions}) => {
-                const parentReportAction = lodashGet(parentReportActions, [report.parentReportActionID]);
-                return `${ONYXKEYS.COLLECTION.TRANSACTION}${lodashGet(parentReportAction, 'originalMessage.IOUTransactionID', 0)}`;
-            },
-        },
-    }),
-)(MoneyRequestHeader);
+    },
+})(MoneyRequestHeader);
+
+export default withOnyx<Omit<MoneyRequestHeaderProps, 'transaction'>, Omit<MoneyRequestHeaderOnyxProps, 'transaction'>>({
+    session: {
+        key: ONYXKEYS.SESSION,
+    },
+    parentReport: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report.parentReportID}`,
+    },
+    parentReportActions: {
+        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID ?? '0'}`,
+        canEvict: false,
+    },
+})(MoneyRequestHeaderWithTransaction);
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
@@ -646,7 +646,7 @@ export default compose(
                     if (!parentReportActionID) {
                         return {};
                     }
-                    return lodashGet(parentReportActions, parentReportActionID);
+                    return lodashGet(parentReportActions, parentReportActionID, {});
                 },
                 canEvict: false,
             },