fix native bug

src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

@@ -51,25 +51,19 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {MoneyRequestPreviewProps, PendingMessageProps} from './types';
 
 function MoneyRequestPreviewContent({
-    iouReport,
     isBillSplit,
-    session,
     action,
-    personalDetails,
-    chatReport,
-    transaction,
     contextMenuAnchor,
     chatReportID,
     reportID,
     onPreviewPressed,
     containerStyles,
-    walletTerms,
     checkIfContextMenuActive = () => {},
     shouldShowPendingConversionMessage = false,
     isHovered = false,
     isWhisper = false,
-    transactionViolations,
     shouldDisplayContextMenu = true,
+    iouReportID,
 }: MoneyRequestPreviewProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -78,6 +72,16 @@ function MoneyRequestPreviewContent({
     const {windowWidth} = useWindowDimensions();
     const route = useRoute<RouteProp<TransactionDuplicateNavigatorParamList, typeof SCREENS.TRANSACTION_DUPLICATE.REVIEW>>();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || '-1'}`);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${iouReportID || '-1'}`);
+
+    const isMoneyRequestAction = ReportActionsUtils.isMoneyRequestAction(action);
+    const transactionID = isMoneyRequestAction ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : '-1';
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [walletTerms] = useOnyx(ONYXKEYS.WALLET_TERMS);
+    const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
 
     const sessionAccountID = session?.accountID;
     const managerID = iouReport?.managerID ?? -1;

src/components/ReportActionItem/MoneyRequestPreview/index.tsx

@@ -1,44 +1,18 @@
 import lodashIsEmpty from 'lodash/isEmpty';
 import React from 'react';
-import {withOnyx} from 'react-native-onyx';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
+import {useOnyx} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
 import MoneyRequestPreviewContent from './MoneyRequestPreviewContent';
-import type {MoneyRequestPreviewOnyxProps, MoneyRequestPreviewProps} from './types';
+import type {MoneyRequestPreviewProps} from './types';
 
 function MoneyRequestPreview(props: MoneyRequestPreviewProps) {
+    const [iouReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.iouReportID || '-1'}`);
     // We should not render the component if there is no iouReport and it's not a split or track expense.
     // Moved outside of the component scope to allow for easier use of hooks in the main component.
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return lodashIsEmpty(props.iouReport) && !(props.isBillSplit || props.isTrackExpense) ? null : <MoneyRequestPreviewContent {...props} />;
+    return lodashIsEmpty(iouReport) && !(props.isBillSplit || props.isTrackExpense) ? null : <MoneyRequestPreviewContent {...props} />;
 }
 
 MoneyRequestPreview.displayName = 'MoneyRequestPreview';
 
-export default withOnyx<MoneyRequestPreviewProps, MoneyRequestPreviewOnyxProps>({
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    chatReport: {
-        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-    },
-    iouReport: {
-        key: ({iouReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${iouReportID}`,
-    },
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-    transaction: {
-        key: ({action}) => {
-            const isMoneyRequestAction = ReportActionsUtils.isMoneyRequestAction(action);
-            const transactionID = isMoneyRequestAction ? ReportActionsUtils.getOriginalMessage(action)?.IOUTransactionID : 0;
-            return `${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`;
-        },
-    },
-    walletTerms: {
-        key: ONYXKEYS.WALLET_TERMS,
-    },
-    transactionViolations: {
-        key: ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS,
-    },
-})(MoneyRequestPreview);
+export default MoneyRequestPreview;

src/components/ReportActionItem/MoneyRequestPreview/types.ts

@@ -1,33 +1,9 @@
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import type {ContextMenuAnchor} from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import type * as OnyxTypes from '@src/types/onyx';
 import type IconAsset from '@src/types/utils/IconAsset';
 
-type MoneyRequestPreviewOnyxProps = {
-    /** All of the personal details for everyone */
-    personalDetails: OnyxEntry<OnyxTypes.PersonalDetailsList>;
-
-    /** Chat report associated with iouReport */
-    chatReport: OnyxEntry<OnyxTypes.Report>;
-
-    /** IOU report data object */
-    iouReport: OnyxEntry<OnyxTypes.Report>;
-
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<OnyxTypes.Session>;
-
-    /** The transaction attached to the action.message.iouTransactionID */
-    transaction: OnyxEntry<OnyxTypes.Transaction>;
-
-    /** The transaction violations attached to the action.message.iouTransactionID */
-    transactionViolations: OnyxCollection<OnyxTypes.TransactionViolation[]>;
-
-    /** Information about the user accepting the terms for payments */
-    walletTerms: OnyxEntry<OnyxTypes.WalletTerms>;
-};
-
-type MoneyRequestPreviewProps = MoneyRequestPreviewOnyxProps & {
+type MoneyRequestPreviewProps = {
     /** The active IOUReport, used for Onyx subscription */
     // The iouReportID is used inside withOnyx HOC
     // eslint-disable-next-line react/no-unused-prop-types
@@ -90,4 +66,4 @@ type PendingProps = {
 
 type PendingMessageProps = PendingProps | NoPendingProps;
 
-export type {MoneyRequestPreviewProps, MoneyRequestPreviewOnyxProps, PendingMessageProps};
+export type {MoneyRequestPreviewProps, PendingMessageProps};