Load parent report action from withOnyx in report action HOC

package.json

@@ -144,7 +144,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "2.0.1",
+    "react-native-onyx": "2.0.2",
     "react-native-pager-view": "6.2.2",
     "react-native-pdf": "6.7.3",
     "react-native-performance": "^5.1.0",

src/pages/FlagCommentPage.js

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -17,7 +16,6 @@ import * as ReportUtils from '@libs/ReportUtils';
 import * as Report from '@userActions/Report';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
-import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import reportActionPropTypes from './home/report/reportActionPropTypes';
 import withReportAndReportActionOrNotFound from './home/report/withReportAndReportActionOrNotFound';
@@ -44,13 +42,13 @@ const propTypes = {
     ...withLocalizePropTypes,
 
     /* Onyx Props */
-    /** All the report actions from the parent report */
-    parentReportActions: PropTypes.objectOf(PropTypes.shape(reportActionPropTypes)),
+    /** The full action from the parent report */
+    parentReportAction: PropTypes.shape(reportActionPropTypes),
 };
 
 const defaultProps = {
     reportActions: {},
-    parentReportActions: {},
+    parentReportAction: {},
     report: {},
 };
 
@@ -124,19 +122,18 @@ function FlagCommentPage(props) {
 
         // Handle threads if needed
         if (reportAction === undefined || reportAction.reportActionID === undefined) {
-            reportAction = props.parentReportActions[props.report.parentReportActionID] || {};
+            reportAction = props.parentReportAction;
         }
 
         return reportAction;
-    }, [props.report, props.reportActions, props.route.params.reportActionID, props.parentReportActions]);
+    }, [props.reportActions, props.route.params.reportActionID, props.parentReportAction]);
 
     const flagComment = (severity) => {
         let reportID = getReportID(props.route);
         const reportAction = getActionToFlag();
-        const parentReportAction = props.parentReportActions[props.report.parentReportActionID] || {};
 
         // Handle threads if needed
-        if (ReportUtils.isChatThread(props.report) && reportAction.reportActionID === parentReportAction.reportActionID) {
+        if (ReportUtils.isChatThread(props.report) && reportAction.reportActionID === props.parentReportAction.reportActionID) {
             reportID = ReportUtils.getParentReport(props.report).reportID;
         }
 
@@ -197,13 +194,4 @@ FlagCommentPage.propTypes = propTypes;
 FlagCommentPage.defaultProps = defaultProps;
 FlagCommentPage.displayName = 'FlagCommentPage';
 
-export default compose(
-    withLocalize,
-    withReportAndReportActionOrNotFound,
-    withOnyx({
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID || report.reportID}`,
-            canEvict: false,
-        },
-    }),
-)(FlagCommentPage);
+export default compose(withLocalize, withReportAndReportActionOrNotFound)(FlagCommentPage);

src/pages/home/report/withReportAndReportActionOrNotFound.tsx

@@ -2,14 +2,13 @@
 import type {RouteProp} from '@react-navigation/native';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {useCallback, useEffect} from 'react';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import withWindowDimensions from '@components/withWindowDimensions';
 import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import compose from '@libs/compose';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Report from '@userActions/Report';
@@ -27,6 +26,9 @@ type OnyxProps = {
     /** Array of report actions for this report */
     reportActions: OnyxEntry<OnyxTypes.ReportActions>;
 
+    /** The report's parentReportAction */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
+
     /** The policies which the user has access to */
     policies: OnyxCollection<OnyxTypes.Policy>;
 
@@ -49,11 +51,11 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
 
             // Handle threads if needed
             if (!reportAction?.reportActionID) {
-                reportAction = ReportActionsUtils.getParentReportAction(props.report);
+                reportAction = props?.parentReportAction ?? {};
             }
 
             return reportAction;
-        }, [props.report, props.reportActions, props.route.params.reportActionID]);
+        }, [props.reportActions, props.route.params.reportActionID, props.parentReportAction]);
 
         const reportAction = getReportAction();
 
@@ -78,7 +80,9 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
         }
 
         // Perform the access/not found checks
-        if (shouldHideReport || isEmptyObject(reportAction)) {
+        // 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))) {
             return <NotFoundPage />;
         }
 
@@ -114,6 +118,17 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
                 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: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {
+                    const parentReportActionID = props?.report?.parentReportActionID;
+                    if (!parentReportActionID) {
+                        return null;
+                    }
+                    return parentReportActions?.[parentReportActionID] ?? null;
+                },
+                canEvict: false,
+            },
         }),
         withWindowDimensions,
     )(React.forwardRef(WithReportOrNotFound));