Merge pull request #34113 from Expensify/tgolen-refactor-hocsideloading

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.tsx

@@ -1,7 +1,6 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback} from 'react';
 import {ScrollView, View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import type {SvgProps} from 'react-native-svg';
 import type {ValueOf} from 'type-fest';
@@ -19,16 +18,15 @@ 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 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 = {
-    /** All the report actions from the parent report */
-    parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;
+    /** The report action from the parent report */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
 };
 
 type FlagCommentPageNavigationProps = StackScreenProps<FlagCommentNavigatorParamList, typeof SCREENS.FLAG_COMMENT_ROOT>;
@@ -55,7 +53,7 @@ function getReportID(route: FlagCommentPageNavigationProps['route']) {
     return route.params.reportID.toString();
 }
 
-function FlagCommentPage({parentReportActions, route, report, reportActions}: FlagCommentPageProps) {
+function FlagCommentPage({parentReportAction, route, report, reportActions}: FlagCommentPageProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
@@ -114,21 +112,20 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl
         let reportAction = reportActions?.[`${route.params.reportActionID.toString()}`];
 
         // Handle threads if needed
-        if (reportAction?.reportActionID === undefined) {
-            reportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
+        if (reportAction?.reportActionID === undefined && parentReportAction) {
+            reportAction = parentReportAction;
         }
 
         if (!reportAction) {
             return null;
         }
 
         return reportAction;
-    }, [report, reportActions, route.params.reportActionID, parentReportActions]);
+    }, [reportActions, route.params.reportActionID, parentReportAction]);
 
     const flagComment = (severity: Severity) => {
         let reportID: string | undefined = getReportID(route);
         const reportAction = getActionToFlag();
-        const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? ''];
 
         // Handle threads if needed
         if (ReportUtils.isChatThread(report) && reportAction?.reportActionID === parentReportAction?.reportActionID) {
@@ -190,11 +187,4 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl
 
 FlagCommentPage.displayName = 'FlagCommentPage';
 
-export default withReportAndReportActionOrNotFound(
-    withOnyx<FlagCommentPageProps, FlagCommentPageWithOnyxProps>({
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID ?? report?.reportID}`,
-            canEvict: false,
-        },
-    })(FlagCommentPage),
-);
+export default withReportAndReportActionOrNotFound(FlagCommentPage);

src/pages/home/report/withReportAndReportActionOrNotFound.tsx

@@ -2,15 +2,14 @@
 import type {StackScreenProps} from '@react-navigation/stack';
 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 type {FlagCommentNavigatorParamList} from '@libs/Navigation/types';
-import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Report from '@userActions/Report';
@@ -29,6 +28,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>;
 
@@ -50,11 +52,11 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
 
             // 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();
 
@@ -79,7 +81,9 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
         }
 
         // 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 />;
         }
 
@@ -115,6 +119,17 @@ export default function <TProps extends WithReportAndReportActionOrNotFoundProps
                 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));