fix: Migrate withReportAndReportActionOrNotFound from withOnyx to useOnyx

src/pages/FlagCommentPage.tsx

@@ -1,7 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useCallback} from 'react';
+import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import type {ValueOf} from 'type-fest';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
@@ -20,18 +19,12 @@ import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import type SCREENS from '@src/SCREENS';
-import type * as OnyxTypes from '@src/types/onyx';
 import withReportAndReportActionOrNotFound from './home/report/withReportAndReportActionOrNotFound';
 import type {WithReportAndReportActionOrNotFoundProps} from './home/report/withReportAndReportActionOrNotFound';
 
-type FlagCommentPageWithOnyxProps = {
-    /** The report action from the parent report */
-    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
-};
-
 type FlagCommentPageNavigationProps = StackScreenProps<FlagCommentNavigatorParamList, typeof SCREENS.FLAG_COMMENT_ROOT>;
 
-type FlagCommentPageProps = WithReportAndReportActionOrNotFoundProps & FlagCommentPageNavigationProps & FlagCommentPageWithOnyxProps;
+type FlagCommentPageProps = WithReportAndReportActionOrNotFoundProps & FlagCommentPageNavigationProps;
 
 type Severity = ValueOf<typeof CONST.MODERATION>;
 
@@ -53,7 +46,7 @@ function getReportID(route: FlagCommentPageNavigationProps['route']) {
     return route.params.reportID.toString();
 }
 
-function FlagCommentPage({parentReportAction, route, report, parentReport, reportActions}: FlagCommentPageProps) {
+function FlagCommentPage({parentReportAction, route, report, parentReport, reportAction}: FlagCommentPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -108,24 +101,8 @@ function FlagCommentPage({parentReportAction, route, report, parentReport, repor
         },
     ];
 
-    const getActionToFlag = useCallback((): OnyxTypes.ReportAction | null => {
-        let reportAction = reportActions?.[`${route.params.reportActionID.toString()}`];
-
-        // Handle threads if needed
-        if (reportAction?.reportActionID === undefined && parentReportAction) {
-            reportAction = parentReportAction;
-        }
-
-        if (!reportAction) {
-            return null;
-        }
-
-        return reportAction;
-    }, [reportActions, route.params.reportActionID, parentReportAction]);
-
     const flagComment = (severity: Severity) => {
         let reportID: string | undefined = getReportID(route);
-        const reportAction = getActionToFlag();
 
         // Handle threads if needed
         if (ReportUtils.isChatThread(report) && reportAction?.reportActionID === parentReportAction?.reportActionID) {
@@ -158,7 +135,7 @@ function FlagCommentPage({parentReportAction, route, report, parentReport, repor
             testID={FlagCommentPage.displayName}
         >
             {({safeAreaPaddingBottomStyle}) => (
-                <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(getActionToFlag(), report)}>
+                <FullPageNotFoundView shouldShow={!ReportUtils.shouldShowFlagComment(reportAction, report)}>
                     <HeaderWithBackButton title={translate('reportActionContextMenu.flagAsOffensive')} />
                     <ScrollView
                         contentContainerStyle={safeAreaPaddingBottomStyle}

src/pages/home/report/withReportAndReportActionOrNotFound.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable rulesdir/no-negated-variables */
 import type {StackScreenProps} from '@react-navigation/stack';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
-import React, {useCallback, useEffect} from 'react';
-import type {OnyxCollection, OnyxEntry, WithOnyxState} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import React, {useEffect, useMemo} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
@@ -16,68 +16,71 @@ import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type OnyxProps = {
+type WithReportAndReportActionOrNotFoundProps = StackScreenProps<
+    FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList,
+    typeof SCREENS.FLAG_COMMENT_ROOT | typeof SCREENS.SPLIT_DETAILS.ROOT
+> & {
     /** The report currently being looked at */
-    report: OnyxEntry<OnyxTypes.Report>;
+    report: OnyxTypes.Report;
+
+    /** The reportAction from the current route */
+    reportAction: OnyxTypes.ReportAction;
 
     /** The parent report if the current report is a thread and it has a parent */
     parentReport: OnyxEntry<OnyxTypes.Report>;
 
-    /** The report metadata */
-    reportMetadata: OnyxEntry<OnyxTypes.ReportMetadata>;
-
-    /** Array of report actions for this report */
-    reportActions: OnyxEntry<OnyxTypes.ReportActions>;
-
     /** The report's parentReportAction */
     parentReportAction: NonNullable<OnyxEntry<OnyxTypes.ReportAction>> | null;
-
-    /** The policies which the user has access to */
-    policies: OnyxCollection<OnyxTypes.Policy>;
-
-    /** Beta features list */
-    betas: OnyxEntry<OnyxTypes.Beta[]>;
-
-    /** Indicated whether the report data is loading */
-    isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type WithReportAndReportActionOrNotFoundProps = OnyxProps &
-    StackScreenProps<FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList, typeof SCREENS.FLAG_COMMENT_ROOT | typeof SCREENS.SPLIT_DETAILS.ROOT>;
-
 export default function <TProps extends WithReportAndReportActionOrNotFoundProps, TRef>(
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
-): ComponentType<Omit<TProps & RefAttributes<TRef>, keyof OnyxProps>> {
+): ComponentType<TProps & RefAttributes<TRef>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
-        const getReportAction = useCallback(() => {
-            let reportAction: OnyxEntry<OnyxTypes.ReportAction> = props.reportActions?.[`${props.route.params.reportActionID}`];
+        const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`);
+        const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`);
+        const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`);
+        const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
+        const [betas] = useOnyx(ONYXKEYS.BETAS);
+        const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+        const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props.route.params.reportID}`, {canEvict: false});
+        const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '-1'}`, {
+            selector: (parentReportActions) => {
+                const parentReportActionID = report?.parentReportActionID;
+                if (!parentReportActionID) {
+                    return null;
+                }
+                return parentReportActions?.[parentReportActionID] ?? null;
+            },
+            canEvict: false,
+        });
+        const linkedReportAction = useMemo(() => {
+            let reportAction: OnyxEntry<OnyxTypes.ReportAction> = reportActions?.[`${props.route.params.reportActionID}`];
 
             // Handle threads if needed
             if (!reportAction?.reportActionID) {
-                reportAction = props?.parentReportAction ?? undefined;
+                reportAction = parentReportAction ?? undefined;
             }
 
             return reportAction;
-        }, [props.reportActions, props.route.params.reportActionID, props.parentReportAction]);
-
-        const reportAction = getReportAction();
+        }, [reportActions, props.route.params.reportActionID, parentReportAction]);
 
         const {shouldUseNarrowLayout} = useResponsiveLayout();
 
         // For small screen, we don't call openReport API when we go to a sub report page by deeplink
         // So we need to call openReport here for small screen
         useEffect(() => {
-            if (!shouldUseNarrowLayout || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) {
+            if (!shouldUseNarrowLayout || (!isEmptyObject(report) && !isEmptyObject(linkedReportAction))) {
                 return;
             }
             Report.openReport(props.route.params.reportID);
             // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
         }, [shouldUseNarrowLayout, props.route.params.reportID]);
 
         // Perform all the loading checks
-        const isLoadingReport = props.isLoadingReportData && !props.report?.reportID;
-        const isLoadingReportAction = isEmptyObject(props.reportActions) || (props.reportMetadata?.isLoadingInitialReportActions && isEmptyObject(getReportAction()));
-        const shouldHideReport = !isLoadingReport && (!props.report?.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas));
+        const isLoadingReport = isLoadingReportData && !report?.reportID;
+        const isLoadingReportAction = isEmptyObject(reportActions) || (reportMetadata?.isLoadingInitialReportActions && isEmptyObject(linkedReportAction));
+        const shouldHideReport = !isLoadingReport && (!report?.reportID || !ReportUtils.canAccessReport(report, policies, betas));
 
         // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
         if ((isLoadingReport || isLoadingReportAction) && !shouldHideReport) {
@@ -86,57 +89,28 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
 
         // Perform the access/not found checks
         // Be sure to avoid showing the not-found page while the parent report actions are still being read from Onyx. The parentReportAction will be undefined while it's being read from Onyx
-        // and then reportAction will either be a valid parentReportAction or an empty object. In the case of an empty object, then it's OK to show the not-found page.
-        if (shouldHideReport || (props?.parentReportAction !== undefined && isEmptyObject(reportAction))) {
+        // and then linkedReportAction will either be a valid parentReportAction or an empty object. In the case of an empty object, then it's OK to show the not-found page.
+        if (shouldHideReport || (parentReportAction !== undefined && isEmptyObject(linkedReportAction))) {
             return <NotFoundPage />;
         }
 
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                report={report}
+                parentReport={parentReport}
+                reportActions={reportActions}
+                reportAction={linkedReportAction}
+                parentReportAction={parentReportAction}
                 ref={ref}
             />
         );
     }
 
     WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-    return withOnyx<TProps & RefAttributes<TRef>, OnyxProps>({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
-        parentReport: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`,
-        },
-        reportMetadata: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
-        },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-        policies: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-        reportActions: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-            canEvict: false,
-        },
-        parentReportAction: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`,
-            selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props?: WithOnyxState<OnyxProps>): NonNullable<OnyxEntry<OnyxTypes.ReportAction>> | null => {
-                const parentReportActionID = props?.report?.parentReportActionID;
-                if (!parentReportActionID) {
-                    return null;
-                }
-                return parentReportActions?.[parentReportActionID] ?? null;
-            },
-            canEvict: false,
-        },
-    })(React.forwardRef(WithReportOrNotFound));
+    return React.forwardRef(WithReportOrNotFound);
 }
 
 export type {WithReportAndReportActionOrNotFoundProps};

src/pages/iou/SplitBillDetailsPage.tsx

@@ -1,9 +1,7 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import type {ComponentType} from 'react';
-import React, {useCallback, useMemo, useState} from 'react';
+import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
-import type {OnyxEntry} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Icon from '@components/Icon';
@@ -26,46 +24,25 @@ import * as IOU from '@userActions/IOU';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
-import type {PersonalDetailsList, Report, ReportAction, Session, Transaction} from '@src/types/onyx';
 import type {Participant} from '@src/types/onyx/IOU';
-import type {ReportActions} from '@src/types/onyx/ReportAction';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type SplitBillDetailsPageTransactionOnyxProps = {
-    /** The current transaction */
-    transaction: OnyxEntry<Transaction>;
+type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & StackScreenProps<SplitDetailsNavigatorParamList, typeof SCREENS.SPLIT_DETAILS.ROOT>;
 
-    /** The draft transaction that holds data to be persisited on the current transaction */
-    draftTransaction: OnyxEntry<Transaction>;
-};
-
-type SplitBillDetailsPageOnyxPropsWithoutTransaction = {
-    /** The personal details of the person who is logged in */
-    personalDetails: OnyxEntry<PersonalDetailsList>;
-
-    /** The active report */
-    report: OnyxEntry<Report>;
-
-    /** Array of report actions for this report */
-    reportActions: OnyxEntry<ReportActions>;
-
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
-};
-
-type SplitBillDetailsPageOnyxProps = SplitBillDetailsPageTransactionOnyxProps & SplitBillDetailsPageOnyxPropsWithoutTransaction;
-
-type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps &
-    SplitBillDetailsPageOnyxProps &
-    StackScreenProps<SplitDetailsNavigatorParamList, typeof SCREENS.SPLIT_DETAILS.ROOT>;
-
-function SplitBillDetailsPage({personalDetails, report, route, reportActions, transaction, draftTransaction, session}: SplitBillDetailsPageProps) {
+function SplitBillDetailsPage({report, reportAction}: SplitBillDetailsPageProps) {
     const styles = useThemeStyles();
-    const reportID = report?.reportID ?? '-1';
     const {translate} = useLocalize();
     const theme = useTheme();
-    const reportAction = useMemo(() => reportActions?.[route.params.reportActionID] ?? ({} as ReportAction), [reportActions, route.params.reportActionID]);
-    const participantAccountIDs = ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction)?.participantAccountIDs ?? [] : [];
+
+    const reportID = report?.reportID ?? '-1';
+    const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined;
+    const IOUTransactionID = originalMessage?.IOUTransactionID ?? '-1';
+    const participantAccountIDs = originalMessage?.participantAccountIDs ?? [];
+
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`);
+    const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${IOUTransactionID}`);
+    const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+    const [session] = useOnyx(ONYXKEYS.SESSION);
 
     // In case this is workspace split expense, we manually add the workspace as the second participant of the split expense
     // because we don't save any accountID in the report action's originalMessage other than the payee's accountID
@@ -162,37 +139,4 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr
 
 SplitBillDetailsPage.displayName = 'SplitBillDetailsPage';
 
-const WrappedComponent = withOnyx<SplitBillDetailsPageProps, SplitBillDetailsPageTransactionOnyxProps>({
-    transaction: {
-        key: ({route, reportActions}) => {
-            const reportAction = reportActions?.[route.params.reportActionID];
-            const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined;
-            const IOUTransactionID = reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && originalMessage?.IOUTransactionID ? originalMessage.IOUTransactionID : 0;
-            return `${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`;
-        },
-    },
-    draftTransaction: {
-        key: ({route, reportActions}) => {
-            const reportAction = reportActions?.[route.params.reportActionID];
-            const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined;
-            const IOUTransactionID = reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && originalMessage?.IOUTransactionID ? originalMessage.IOUTransactionID : 0;
-            return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${IOUTransactionID}`;
-        },
-    },
-})(withReportAndReportActionOrNotFound(SplitBillDetailsPage) as ComponentType<SplitBillDetailsPageProps>);
-
-export default withOnyx<Omit<SplitBillDetailsPageProps, keyof SplitBillDetailsPageTransactionOnyxProps>, SplitBillDetailsPageOnyxPropsWithoutTransaction>({
-    report: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-    },
-    reportActions: {
-        key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-        canEvict: false,
-    },
-    personalDetails: {
-        key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-    },
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(WrappedComponent);
+export default withReportAndReportActionOrNotFound(SplitBillDetailsPage);