[TS migration] Migrate 'ReportActionItemMoneyRequest' component to TypeScript

src/ONYXKEYS.ts

@@ -445,7 +445,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.DOWNLOAD]: OnyxTypes.Download;
     [ONYXKEYS.COLLECTION.POLICY]: OnyxTypes.Policy;
     [ONYXKEYS.COLLECTION.POLICY_DRAFTS]: OnyxTypes.Policy;
-    [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategory;
+    [ONYXKEYS.COLLECTION.POLICY_CATEGORIES]: OnyxTypes.PolicyCategories;
     [ONYXKEYS.COLLECTION.POLICY_TAGS]: OnyxTypes.PolicyTags;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers;
     [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember;
@@ -467,6 +467,7 @@ type OnyxValues = {
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
     [ONYXKEYS.COLLECTION.TRANSACTION_DRAFT]: OnyxTypes.Transaction;
+    [ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS]: OnyxTypes.TransactionViolations;
     [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS]: OnyxTypes.RecentlyUsedTags;
     [ONYXKEYS.COLLECTION.SELECTED_TAB]: string;
     [ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS]: OnyxTypes.TransactionViolation[];

src/components/ImageWithSizeCalculation.tsx

@@ -1,6 +1,6 @@
 import delay from 'lodash/delay';
 import React, {useEffect, useRef, useState} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
+import type {ImageSourcePropType, StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
@@ -19,7 +19,7 @@ type OnLoadNativeEvent = {
 
 type ImageWithSizeCalculationProps = {
     /** Url for image to display */
-    url: string | number;
+    url: string | ImageSourcePropType;
 
     /** Any additional styles to apply */
     style?: StyleProp<ViewStyle>;

src/components/MenuItem.tsx

@@ -204,7 +204,7 @@ type MenuItemProps = (IconProps | AvatarProps | NoIcon) & {
     shouldBlockSelection?: boolean;
 
     /** Whether should render title as HTML or as Text */
-    shouldParseTitle?: false;
+    shouldParseTitle?: boolean;
 
     /** Should check anonymous user in onPress function */
     shouldCheckActionAllowedOnPress?: boolean;

src/components/ReportActionItem/MoneyRequestAction.js → src/components/ReportActionItem/MoneyRequestAction.tsx

@@ -1,83 +1,66 @@
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
 import React from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import _ from 'underscore';
-import networkPropTypes from '@components/networkPropTypes';
-import {withNetwork} from '@components/OnyxProvider';
-import refPropTypes from '@components/refPropTypes';
+import type {OnyxEntry} from 'react-native-onyx/lib/types';
 import RenderHTML from '@components/RenderHTML';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
-import compose from '@libs/compose';
 import * as IOUUtils from '@libs/IOUUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
-import reportActionPropTypes from '@pages/home/report/reportActionPropTypes';
-import iouReportPropTypes from '@pages/iouReportPropTypes';
-import reportPropTypes from '@pages/reportPropTypes';
+import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
+import type * as OnyxTypes from '@src/types/onyx';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import MoneyRequestPreview from './MoneyRequestPreview';
 
-const propTypes = {
+type MoneyRequestActionOnyxProps = {
+    /** Chat report associated with iouReport */
+    chatReport: OnyxEntry<OnyxTypes.Report>;
+
+    /** IOU report data object */
+    iouReport: OnyxEntry<OnyxTypes.Report>;
+
+    /** Report actions for this report */
+    reportActions: OnyxEntry<OnyxTypes.ReportActions>;
+};
+
+type MoneyRequestActionProps = MoneyRequestActionOnyxProps & {
     /** All the data of the action */
-    action: PropTypes.shape(reportActionPropTypes).isRequired,
+    action: OnyxTypes.ReportAction;
 
     /** The ID of the associated chatReport */
-    chatReportID: PropTypes.string.isRequired,
+    chatReportID: string;
 
     /** The ID of the associated request report */
-    requestReportID: PropTypes.string.isRequired,
+    requestReportID: string;
 
     /** The ID of the current report */
-    reportID: PropTypes.string.isRequired,
+    reportID: string;
 
     /** Is this IOUACTION the most recent? */
-    isMostRecentIOUReportAction: PropTypes.bool.isRequired,
+    isMostRecentIOUReportAction: boolean;
 
     /** Popover context menu anchor, used for showing context menu */
-    contextMenuAnchor: refPropTypes,
+    contextMenuAnchor?: ContextMenuAnchor;
 
     /** Callback for updating context menu active state, used for showing context menu */
-    checkIfContextMenuActive: PropTypes.func,
-
-    /* Onyx Props */
-    /** chatReport associated with iouReport */
-    chatReport: reportPropTypes,
-
-    /** IOU report data object */
-    iouReport: iouReportPropTypes,
-
-    /** Array of report actions for this report */
-    reportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+    checkIfContextMenuActive?: () => void;
 
     /** Whether the IOU is hovered so we can modify its style */
-    isHovered: PropTypes.bool,
-
-    network: networkPropTypes.isRequired,
+    isHovered?: boolean;
 
     /** Whether a message is a whisper */
-    isWhisper: PropTypes.bool,
+    isWhisper?: boolean;
 
     /** Styles to be assigned to Container */
-    // eslint-disable-next-line react/forbid-prop-types
-    style: PropTypes.arrayOf(PropTypes.object),
-};
-
-const defaultProps = {
-    contextMenuAnchor: undefined,
-    checkIfContextMenuActive: () => {},
-    chatReport: {},
-    iouReport: {},
-    reportActions: {},
-    isHovered: false,
-    style: [],
-    isWhisper: false,
+    style?: StyleProp<ViewStyle>;
 };
 
 function MoneyRequestAction({
@@ -87,31 +70,32 @@ function MoneyRequestAction({
     reportID,
     isMostRecentIOUReportAction,
     contextMenuAnchor,
-    checkIfContextMenuActive,
+    checkIfContextMenuActive = () => {},
     chatReport,
     iouReport,
     reportActions,
-    isHovered,
-    network,
+    isHovered = false,
     style,
-    isWhisper,
-}) {
+    isWhisper = false,
+}: MoneyRequestActionProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const isSplitBillAction = lodashGet(action, 'originalMessage.type', '') === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
+    const {isOffline} = useNetwork();
+
+    const isSplitBillAction = action.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && action.originalMessage.type === CONST.IOU.REPORT_ACTION_TYPE.SPLIT;
 
     const onMoneyRequestPreviewPressed = () => {
         if (isSplitBillAction) {
-            const reportActionID = lodashGet(action, 'reportActionID', '0');
+            const reportActionID = action.reportActionID ?? '0';
             Navigation.navigate(ROUTES.SPLIT_BILL_DETAILS.getRoute(chatReportID, reportActionID));
             return;
         }
 
         // If the childReportID is not present, we need to create a new thread
-        const childReportID = lodashGet(action, 'childReportID', 0);
+        const childReportID = action?.childReportID ?? '0';
         if (!childReportID) {
             const thread = ReportUtils.buildTransactionThread(action, requestReportID);
-            const userLogins = PersonalDetailsUtils.getLoginsByAccountIDs(thread.participantAccountIDs);
+            const userLogins = PersonalDetailsUtils.getLoginsByAccountIDs(thread.participantAccountIDs ?? []);
             Report.openReport(thread.reportID, userLogins, thread, action.reportActionID);
             Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(thread.reportID));
             return;
@@ -124,12 +108,12 @@ function MoneyRequestAction({
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(action);
     const isReversedTransaction = ReportActionsUtils.isReversedTransaction(action);
     if (
-        !_.isEmpty(iouReport) &&
-        !_.isEmpty(reportActions) &&
-        chatReport.iouReportID &&
+        !isEmptyObject(iouReport) &&
+        !isEmptyObject(reportActions) &&
+        chatReport?.iouReportID &&
         isMostRecentIOUReportAction &&
         action.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD &&
-        network.isOffline
+        isOffline
     ) {
         shouldShowPendingConversionMessage = IOUUtils.isIOUReportPendingCurrencyConversion(iouReport);
     }
@@ -147,29 +131,24 @@ function MoneyRequestAction({
             checkIfContextMenuActive={checkIfContextMenuActive}
             shouldShowPendingConversionMessage={shouldShowPendingConversionMessage}
             onPreviewPressed={onMoneyRequestPreviewPressed}
-            containerStyles={[styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, ...style]}
+            containerStyles={[styles.cursorPointer, isHovered ? styles.reportPreviewBoxHoverBorder : undefined, style]}
             isHovered={isHovered}
             isWhisper={isWhisper}
         />
     );
 }
 
-MoneyRequestAction.propTypes = propTypes;
-MoneyRequestAction.defaultProps = defaultProps;
 MoneyRequestAction.displayName = 'MoneyRequestAction';
 
-export default compose(
-    withOnyx({
-        chatReport: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-        },
-        iouReport: {
-            key: ({requestReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${requestReportID}`,
-        },
-        reportActions: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`,
-            canEvict: false,
-        },
-    }),
-    withNetwork(),
-)(MoneyRequestAction);
+export default withOnyx<MoneyRequestActionProps, MoneyRequestActionOnyxProps>({
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+    iouReport: {
+        key: ({requestReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${requestReportID}`,
+    },
+    reportActions: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${chatReportID}`,
+        canEvict: false,
+    },
+})(MoneyRequestAction);