From cc24a973e993f141dba37895b8f745b18ebe218e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 8 Jan 2024 14:20:41 -0700
Subject: [PATCH 01/22] Add the data to be loaded from onyx

---
 .../report/withReportAndReportActionOrNotFound.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index fb0a00e2d10d..5d4590ac4746 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -27,6 +27,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>;
 
@@ -114,6 +117,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, props) => {
+                    const parentReportActionID = lodashGet(props, 'report.parentReportActionID');
+                    if (!parentReportActionID) {
+                        return {};
+                    }
+                    return parentReportActions[parentReportActionID];
+                },
+                canEvict: false,
+            },
         }),
         withWindowDimensions,
     )(React.forwardRef(WithReportOrNotFound));

From d318c952d017a1b59d1672bce48fabd3fd483d84 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 8 Jan 2024 14:25:49 -0700
Subject: [PATCH 02/22] Remove the use of lodash.

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 5d4590ac4746..adc9663a4f34 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -120,7 +120,7 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
             parentReportAction: {
                 key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`,
                 selector: (parentReportActions, props) => {
-                    const parentReportActionID = lodashGet(props, 'report.parentReportActionID');
+                    const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
                         return {};
                     }

From b2b8868c71539cacd95d4f3275bf92cdc3937723 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 8 Jan 2024 14:38:53 -0700
Subject: [PATCH 03/22] Remove deprecated method

---
 .../home/report/withReportAndReportActionOrNotFound.tsx      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index adc9663a4f34..83c62bca5e4a 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -9,7 +9,6 @@ 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';
@@ -52,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();
 

From 4237770a84762af4549ec8c3713a4990e139373b Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 13:37:23 -0700
Subject: [PATCH 04/22] Update onyx

---
 package-lock.json | 18 +++++++++---------
 package.json      |  2 +-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 373610463b38..ac012bea728f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,7 +94,7 @@
         "react-native-linear-gradient": "^2.8.1",
         "react-native-localize": "^2.2.6",
         "react-native-modal": "^13.0.0",
-        "react-native-onyx": "1.0.118",
+        "react-native-onyx": "1.0.126",
         "react-native-pager-view": "6.2.2",
         "react-native-pdf": "^6.7.4",
         "react-native-performance": "^5.1.0",
@@ -47034,17 +47034,17 @@
       }
     },
     "node_modules/react-native-onyx": {
-      "version": "1.0.118",
-      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.118.tgz",
-      "integrity": "sha512-w54jO+Bpu1ElHsrxZXIIpcBqNkrUvuVCQmwWdfOW5LvO4UwsPSwmMxzExbUZ4ip+7CROmm10IgXFaAoyfeYSVQ==",
+      "version": "1.0.126",
+      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.126.tgz",
+      "integrity": "sha512-tUJI1mQaWXLfyBFYQQWM6mm9GiCqIXGvjbqJkH1fLY3OqbGW6DyH4CxC+qJrqfi4bKZgZHp5xlBHhkPV4pKK2A==",
       "dependencies": {
         "ascii-table": "0.0.9",
         "fast-equals": "^4.0.3",
         "underscore": "^1.13.6"
       },
       "engines": {
-        "node": ">=16.15.1 <=20.9.0",
-        "npm": ">=8.11.0 <=10.1.0"
+        "node": "20.9.0",
+        "npm": "10.1.0"
       },
       "peerDependencies": {
         "idb-keyval": "^6.2.1",
@@ -89702,9 +89702,9 @@
       }
     },
     "react-native-onyx": {
-      "version": "1.0.118",
-      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.118.tgz",
-      "integrity": "sha512-w54jO+Bpu1ElHsrxZXIIpcBqNkrUvuVCQmwWdfOW5LvO4UwsPSwmMxzExbUZ4ip+7CROmm10IgXFaAoyfeYSVQ==",
+      "version": "1.0.126",
+      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-1.0.126.tgz",
+      "integrity": "sha512-tUJI1mQaWXLfyBFYQQWM6mm9GiCqIXGvjbqJkH1fLY3OqbGW6DyH4CxC+qJrqfi4bKZgZHp5xlBHhkPV4pKK2A==",
       "requires": {
         "ascii-table": "0.0.9",
         "fast-equals": "^4.0.3",
diff --git a/package.json b/package.json
index e8b724587ca0..4a28617f649d 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,7 @@
     "react-native-linear-gradient": "^2.8.1",
     "react-native-localize": "^2.2.6",
     "react-native-modal": "^13.0.0",
-    "react-native-onyx": "1.0.118",
+    "react-native-onyx": "1.0.126",
     "react-native-pager-view": "6.2.2",
     "react-native-pdf": "^6.7.4",
     "react-native-performance": "^5.1.0",

From 83b1547492510fc2390c5969db15d40fc092a4b8 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 13:43:03 -0700
Subject: [PATCH 05/22] Fix types

---
 .../home/report/withReportAndReportActionOrNotFound.tsx  | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 83c62bca5e4a..ccad69282fcb 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -117,15 +117,14 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
                 canEvict: false,
             },
             parentReportAction: {
-                key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`,
-                selector: (parentReportActions, props) => {
+                key: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
+                selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {
                     const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
-                        return {};
+                        return null;
                     }
-                    return parentReportActions[parentReportActionID];
+                    return parentReportActions?.[parentReportActionID] ?? null;
                 },
-                canEvict: false,
             },
         }),
         withWindowDimensions,

From 244005198afb8fb078561e7bd8b1f80affcd148e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 13:43:21 -0700
Subject: [PATCH 06/22] Remove extra onyx subscription

---
 src/pages/FlagCommentPage.js | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 47d2ad356dad..c75f76135aaf 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -44,13 +44,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 +124,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;
         }
 
@@ -200,10 +199,4 @@ FlagCommentPage.displayName = 'FlagCommentPage';
 export default compose(
     withLocalize,
     withReportAndReportActionOrNotFound,
-    withOnyx({
-        parentReportActions: {
-            key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID || report.reportID}`,
-            canEvict: false,
-        },
-    }),
 )(FlagCommentPage);

From 05b979d1411ef255ac353b3e5828008c171c7026 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 14:10:32 -0700
Subject: [PATCH 07/22] Add all withOnyx properties and import type

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index ccad69282fcb..f58315f52b88 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -4,6 +4,7 @@ import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {useCallback, useEffect} from 'react';
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
+import type {WithOnyxInstanceState} from 'react-native-onyx/lib/types';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import withWindowDimensions from '@components/withWindowDimensions';
 import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
@@ -125,6 +126,7 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
                     }
                     return parentReportActions?.[parentReportActionID] ?? null;
                 },
+                canEvict: false,
             },
         }),
         withWindowDimensions,

From 6f7b07f3be4920e96d274c1b68679e85912ef0f6 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 14:14:10 -0700
Subject: [PATCH 08/22] Remove unused imports

---
 src/pages/FlagCommentPage.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index c75f76135aaf..55346027a0ec 100644
--- a/src/pages/FlagCommentPage.js
+++ b/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';

From fe4cb1a237a69ed68a04b45184f57f1e356f9433 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Fri, 12 Jan 2024 14:47:42 -0700
Subject: [PATCH 09/22] Style

---
 src/pages/FlagCommentPage.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/pages/FlagCommentPage.js b/src/pages/FlagCommentPage.js
index 55346027a0ec..330f2fc6c44e 100644
--- a/src/pages/FlagCommentPage.js
+++ b/src/pages/FlagCommentPage.js
@@ -194,7 +194,4 @@ FlagCommentPage.propTypes = propTypes;
 FlagCommentPage.defaultProps = defaultProps;
 FlagCommentPage.displayName = 'FlagCommentPage';
 
-export default compose(
-    withLocalize,
-    withReportAndReportActionOrNotFound,
-)(FlagCommentPage);
+export default compose(withLocalize, withReportAndReportActionOrNotFound)(FlagCommentPage);

From e77f37d3dae90befa08546a936659ccc21d39f3b Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Wed, 31 Jan 2024 10:22:48 -0700
Subject: [PATCH 10/22] Update Onyx

---
 package-lock.json | 14 +++++++-------
 package.json      |  2 +-
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8bba7075ee2c..fa99eb5038ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -94,7 +94,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",
@@ -45143,9 +45143,9 @@
       }
     },
     "node_modules/react-native-onyx": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.1.tgz",
-      "integrity": "sha512-o6QNvq91qg8hFXIhmHjBqlNXD/YZxBZSRN8Vkq7xD2NYskzxK2mLqhBdhB8yMMwe6Cd8sVUK4vlZax/JU79xYw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.2.tgz",
+      "integrity": "sha512-24kcG3ChBXp+uSSCXudFvZTdCnKLRHQRgvTcnh2eA7COtKvbL8ggEJNkglSYmcf5WoDzLgYyWiKvcjcXQnmBvw==",
       "dependencies": {
         "ascii-table": "0.0.9",
         "fast-equals": "^4.0.3",
@@ -86050,9 +86050,9 @@
       }
     },
     "react-native-onyx": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.1.tgz",
-      "integrity": "sha512-o6QNvq91qg8hFXIhmHjBqlNXD/YZxBZSRN8Vkq7xD2NYskzxK2mLqhBdhB8yMMwe6Cd8sVUK4vlZax/JU79xYw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.2.tgz",
+      "integrity": "sha512-24kcG3ChBXp+uSSCXudFvZTdCnKLRHQRgvTcnh2eA7COtKvbL8ggEJNkglSYmcf5WoDzLgYyWiKvcjcXQnmBvw==",
       "requires": {
         "ascii-table": "0.0.9",
         "fast-equals": "^4.0.3",
diff --git a/package.json b/package.json
index 0c05438769d9..f5e945433f48 100644
--- a/package.json
+++ b/package.json
@@ -142,7 +142,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",

From 093b922b499efc53aabf36b2c52611974284fe53 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Wed, 31 Jan 2024 10:22:55 -0700
Subject: [PATCH 11/22] Import type

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index e0c463879b66..7b3a6b3defd9 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -2,9 +2,8 @@
 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 {withOnyx} from 'react-native-onyx';
-import type {WithOnyxInstanceState} from 'react-native-onyx/lib/types';
+import type {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import withWindowDimensions from '@components/withWindowDimensions';
 import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';

From 824f2fdcd6dcdfd67e205230200193025282af3f Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Wed, 31 Jan 2024 14:40:04 -0700
Subject: [PATCH 12/22] Update lock file

---
 package-lock.json | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e31aa2e80538..459fcf9ab76c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,7 +95,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",
@@ -45029,9 +45029,9 @@
       }
     },
     "node_modules/react-native-onyx": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.1.tgz",
-      "integrity": "sha512-o6QNvq91qg8hFXIhmHjBqlNXD/YZxBZSRN8Vkq7xD2NYskzxK2mLqhBdhB8yMMwe6Cd8sVUK4vlZax/JU79xYw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.2.tgz",
+      "integrity": "sha512-24kcG3ChBXp+uSSCXudFvZTdCnKLRHQRgvTcnh2eA7COtKvbL8ggEJNkglSYmcf5WoDzLgYyWiKvcjcXQnmBvw==",
       "dependencies": {
         "ascii-table": "0.0.9",
         "fast-equals": "^4.0.3",

From 20c290f617982a3fd6c2b3a7f48b1b2f954c1245 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Thu, 1 Feb 2024 08:32:53 -0700
Subject: [PATCH 13/22] Separate into multiple withOnyx

---
 .../withReportAndReportActionOrNotFound.tsx   | 26 +++++++++++--------
 1 file changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 7b3a6b3defd9..9f17e4e37889 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -16,7 +16,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type OnyxProps = {
+type OnyxPropsA = {
     /** The report currently being looked at */
     report: OnyxEntry<OnyxTypes.Report>;
 
@@ -26,9 +26,6 @@ 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>;
 
@@ -39,7 +36,12 @@ type OnyxProps = {
     isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type ComponentProps = OnyxProps &
+type OnyxPropsB = {
+    /** The report's parentReportAction */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
+};
+
+type ComponentProps = OnyxPropsA & OnyxPropsB &
     WindowDimensionsProps & {
         route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
     };
@@ -96,15 +98,16 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
     WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
     return compose(
-        withOnyx<TProps & RefAttributes<TRef>, OnyxProps>({
+        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsA>({
             report: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
             },
             reportMetadata: {
                 key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
             },
-            isLoadingReportData: {
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            reportActions: {
+                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
+                canEvict: false,
             },
             betas: {
                 key: ONYXKEYS.BETAS,
@@ -112,10 +115,11 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
             policies: {
                 key: ONYXKEYS.COLLECTION.POLICY,
             },
-            reportActions: {
-                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-                canEvict: false,
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
             },
+        }),
+        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsB>({
             parentReportAction: {
                 key: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
                 selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {

From 1c275d11145eb0d085a202a14795bb1cde4cd9e8 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 10:57:33 -0700
Subject: [PATCH 14/22] Try to improve the withOnyx types

---
 .../withReportAndReportActionOrNotFound.tsx   | 67 ++++++++++---------
 1 file changed, 34 insertions(+), 33 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 9f17e4e37889..382555110633 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -7,7 +7,6 @@ import type {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-nativ
 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 ReportUtils from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -16,7 +15,12 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type OnyxPropsA = {
+type OnyxPropsParentReportAction = {
+    /** The report's parentReportAction */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
+};
+
+type OnyxPropsWithoutParentReportAction = {
     /** The report currently being looked at */
     report: OnyxEntry<OnyxTypes.Report>;
 
@@ -36,16 +40,15 @@ type OnyxPropsA = {
     isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type OnyxPropsB = {
-    /** The report's parentReportAction */
-    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
-};
+type OnyxProps = OnyxPropsWithoutParentReportAction & OnyxPropsParentReportAction;
 
-type ComponentProps = OnyxPropsA & OnyxPropsB &
+type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportAction &
     WindowDimensionsProps & {
         route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
     };
 
+type ComponentProps = OnyxPropsParentReportAction & ComponentPropsWithoutParentReportAction;
+
 export default function <TProps extends ComponentProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): ComponentType<TProps & RefAttributes<TRef>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
         const getReportAction = useCallback(() => {
@@ -97,29 +100,28 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
 
     WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-    return compose(
-        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsA>({
-            report: {
-                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-            },
-            reportMetadata: {
-                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
-            },
-            reportActions: {
-                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-                canEvict: false,
-            },
-            betas: {
-                key: ONYXKEYS.BETAS,
-            },
-            policies: {
-                key: ONYXKEYS.COLLECTION.POLICY,
-            },
-            isLoadingReportData: {
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-            },
-        }),
-        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsB>({
+    return withOnyx<ComponentPropsWithoutParentReportAction, OnyxPropsWithoutParentReportAction>({
+        report: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+        },
+        reportMetadata: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
+        },
+        reportActions: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
+            canEvict: false,
+        },
+        betas: {
+            key: ONYXKEYS.BETAS,
+        },
+        policies: {
+            key: ONYXKEYS.COLLECTION.POLICY,
+        },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
+    })(
+        withOnyx<ComponentProps, OnyxPropsParentReportAction>({
             parentReportAction: {
                 key: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
                 selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {
@@ -131,7 +133,6 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
                 },
                 canEvict: false,
             },
-        }),
-        withWindowDimensions,
-    )(React.forwardRef(WithReportOrNotFound));
+        })(withWindowDimensions(React.forwardRef(WithReportOrNotFound))),
+    );
 }

From 64a65fa70558218bc810979d41e62f366c0499af Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 11:11:21 -0700
Subject: [PATCH 15/22] Use hook for dimensions

---
 .../withReportAndReportActionOrNotFound.tsx     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 382555110633..abf0ac210346 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -5,8 +5,7 @@ import React, {useCallback, useEffect} from 'react';
 import {withOnyx} from 'react-native-onyx';
 import type {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import withWindowDimensions from '@components/withWindowDimensions';
-import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import * as ReportUtils from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -42,15 +41,15 @@ type OnyxPropsWithoutParentReportAction = {
 
 type OnyxProps = OnyxPropsWithoutParentReportAction & OnyxPropsParentReportAction;
 
-type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportAction &
-    WindowDimensionsProps & {
-        route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
-    };
+type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportAction & {
+    route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
+};
 
 type ComponentProps = OnyxPropsParentReportAction & ComponentPropsWithoutParentReportAction;
 
 export default function <TProps extends ComponentProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): ComponentType<TProps & RefAttributes<TRef>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
+        const {isSmallScreenWidth} = useWindowDimensions();
         const getReportAction = useCallback(() => {
             let reportAction: OnyxTypes.ReportAction | Record<string, never> | undefined = props.reportActions?.[`${props.route.params.reportActionID}`];
 
@@ -67,12 +66,12 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
         // 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 (!props.isSmallScreenWidth || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) {
+            if (!isSmallScreenWidth || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) {
                 return;
             }
             Report.openReport(props.route.params.reportID);
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [props.isSmallScreenWidth, props.route.params.reportID]);
+        }, [isSmallScreenWidth, props.route.params.reportID]);
 
         // Perform all the loading checks
         const isLoadingReport = props.isLoadingReportData && !props.report?.reportID;
@@ -133,6 +132,6 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
                 },
                 canEvict: false,
             },
-        })(withWindowDimensions(React.forwardRef(WithReportOrNotFound))),
+        })(React.forwardRef(WithReportOrNotFound)),
     );
 }

From f18570a8320bacbff12498f94fdbd45f8c7f283d Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 12:43:16 -0700
Subject: [PATCH 16/22] Try to fix types

---
 .../report/withReportAndReportActionOrNotFound.tsx    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index abf0ac210346..b379d7e0c67d 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -47,7 +47,9 @@ type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportActio
 
 type ComponentProps = OnyxPropsParentReportAction & ComponentPropsWithoutParentReportAction;
 
-export default function <TProps extends ComponentProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): ComponentType<TProps & RefAttributes<TRef>> {
+export default function <TProps extends ComponentProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): ComponentType<Omit<Omit<TProps, keyof OnyxPropsParentReportAction> & RefAttributes<TRef>, keyof OnyxPropsWithoutParentReportAction>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
         const {isSmallScreenWidth} = useWindowDimensions();
         const getReportAction = useCallback(() => {
@@ -99,7 +101,7 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
 
     WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-    return withOnyx<ComponentPropsWithoutParentReportAction, OnyxPropsWithoutParentReportAction>({
+    return withOnyx<Omit<TProps, keyof OnyxPropsParentReportAction> & RefAttributes<TRef>, OnyxPropsWithoutParentReportAction>({
         report: {
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
         },
@@ -120,10 +122,11 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
             key: ONYXKEYS.IS_LOADING_REPORT_DATA,
         },
     })(
-        withOnyx<ComponentProps, OnyxPropsParentReportAction>({
+        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsParentReportAction>({
             parentReportAction: {
                 key: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
-                selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {
+                selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxPropsParentReportAction>): OnyxEntry<OnyxTypes.ReportAction> => {
+                    console.log('timddd', props);
                     const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
                         return null;

From 6febb6e92f15f728b3c38a7653d2f66cf75340c4 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 13:09:02 -0700
Subject: [PATCH 17/22] Remove debug

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index b379d7e0c67d..73d642b7447b 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -39,8 +39,6 @@ type OnyxPropsWithoutParentReportAction = {
     isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type OnyxProps = OnyxPropsWithoutParentReportAction & OnyxPropsParentReportAction;
-
 type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportAction & {
     route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
 };
@@ -126,7 +124,6 @@ export default function <TProps extends ComponentProps, TRef>(
             parentReportAction: {
                 key: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
                 selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxPropsParentReportAction>): OnyxEntry<OnyxTypes.ReportAction> => {
-                    console.log('timddd', props);
                     const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
                         return null;

From 240065b256f4b179acfeddb07f68f072d82499ce Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 13:32:09 -0700
Subject: [PATCH 18/22] Reset the component to an earlier point in time

---
 .../withReportAndReportActionOrNotFound.tsx   | 84 +++++++++----------
 1 file changed, 40 insertions(+), 44 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 73d642b7447b..561f5ef8f44f 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -2,10 +2,12 @@
 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 {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
-import useWindowDimensions from '@hooks/useWindowDimensions';
+import withWindowDimensions from '@components/withWindowDimensions';
+import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
+import compose from '@libs/compose';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import * as ReportUtils from '@libs/ReportUtils';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -14,12 +16,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
-type OnyxPropsParentReportAction = {
-    /** The report's parentReportAction */
-    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
-};
-
-type OnyxPropsWithoutParentReportAction = {
+type OnyxProps = {
     /** The report currently being looked at */
     report: OnyxEntry<OnyxTypes.Report>;
 
@@ -29,6 +26,9 @@ type OnyxPropsWithoutParentReportAction = {
     /** 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>;
 
@@ -39,17 +39,13 @@ type OnyxPropsWithoutParentReportAction = {
     isLoadingReportData: OnyxEntry<boolean>;
 };
 
-type ComponentPropsWithoutParentReportAction = OnyxPropsWithoutParentReportAction & {
-    route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
-};
-
-type ComponentProps = OnyxPropsParentReportAction & ComponentPropsWithoutParentReportAction;
+type ComponentProps = OnyxProps &
+    WindowDimensionsProps & {
+        route: RouteProp<{params: {reportID: string; reportActionID: string}}>;
+    };
 
-export default function <TProps extends ComponentProps, TRef>(
-    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
-): ComponentType<Omit<Omit<TProps, keyof OnyxPropsParentReportAction> & RefAttributes<TRef>, keyof OnyxPropsWithoutParentReportAction>> {
+export default function <TProps extends ComponentProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): ComponentType<TProps & RefAttributes<TRef>> {
     function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
-        const {isSmallScreenWidth} = useWindowDimensions();
         const getReportAction = useCallback(() => {
             let reportAction: OnyxTypes.ReportAction | Record<string, never> | undefined = props.reportActions?.[`${props.route.params.reportActionID}`];
 
@@ -66,12 +62,12 @@ export default function <TProps extends ComponentProps, TRef>(
         // 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 (!isSmallScreenWidth || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) {
+            if (!props.isSmallScreenWidth || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) {
                 return;
             }
             Report.openReport(props.route.params.reportID);
             // eslint-disable-next-line react-hooks/exhaustive-deps
-        }, [isSmallScreenWidth, props.route.params.reportID]);
+        }, [props.isSmallScreenWidth, props.route.params.reportID]);
 
         // Perform all the loading checks
         const isLoadingReport = props.isLoadingReportData && !props.report?.reportID;
@@ -99,30 +95,29 @@ export default function <TProps extends ComponentProps, TRef>(
 
     WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-    return withOnyx<Omit<TProps, keyof OnyxPropsParentReportAction> & RefAttributes<TRef>, OnyxPropsWithoutParentReportAction>({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
-        reportMetadata: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`,
-        },
-        reportActions: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
-            canEvict: false,
-        },
-        betas: {
-            key: ONYXKEYS.BETAS,
-        },
-        policies: {
-            key: ONYXKEYS.COLLECTION.POLICY,
-        },
-        isLoadingReportData: {
-            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-        },
-    })(
-        withOnyx<TProps & RefAttributes<TRef>, OnyxPropsParentReportAction>({
+    return compose(
+        withOnyx<TProps & RefAttributes<TRef>, OnyxProps>({
+            report: {
+                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+            },
+            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: (props) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${props?.report?.parentReportID ?? 0}`,
+                key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`,
                 selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxPropsParentReportAction>): OnyxEntry<OnyxTypes.ReportAction> => {
                     const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
@@ -132,6 +127,7 @@ export default function <TProps extends ComponentProps, TRef>(
                 },
                 canEvict: false,
             },
-        })(React.forwardRef(WithReportOrNotFound)),
-    );
+        }),
+        withWindowDimensions,
+    )(React.forwardRef(WithReportOrNotFound));
 }

From 0a10216307ea3103efae5d1079e32d047be7b084 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 13:47:11 -0700
Subject: [PATCH 19/22] Add a better check for when to show the not-found page

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 561f5ef8f44f..1aae12095f0c 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -80,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 it 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 />;
         }
 

From e112608682b907b35f496c1bce15ac439612054e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Mon, 5 Feb 2024 13:58:32 -0700
Subject: [PATCH 20/22] Fix selector types

---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 1aae12095f0c..644162a04cb7 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -2,7 +2,7 @@
 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';
@@ -120,7 +120,7 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
             },
             parentReportAction: {
                 key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`,
-                selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxPropsParentReportAction>): OnyxEntry<OnyxTypes.ReportAction> => {
+                selector: (parentReportActions: OnyxEntry<OnyxTypes.ReportActions>, props: WithOnyxInstanceState<OnyxProps>): OnyxEntry<OnyxTypes.ReportAction> => {
                     const parentReportActionID = props?.report?.parentReportActionID;
                     if (!parentReportActionID) {
                         return null;

From cf4be5f2e21249625a57066e1b7f1a36c49fac62 Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@gmail.com>
Date: Tue, 6 Feb 2024 09:21:12 -0700
Subject: [PATCH 21/22] Update
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx

Co-authored-by: Carlos Martins <cmartins@expensify.com>
---
 src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 644162a04cb7..1738e632ab85 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -81,7 +81,7 @@ export default function <TProps extends ComponentProps, TRef>(WrappedComponent:
 
         // 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 it 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.
+        // 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 />;
         }

From d698da342997a28e7eff1840ba8018077da5708e Mon Sep 17 00:00:00 2001
From: Tim Golen <tgolen@expensify.com>
Date: Thu, 8 Feb 2024 11:16:46 -0700
Subject: [PATCH 22/22] Fix changes from TS migration

---
 src/pages/FlagCommentPage.tsx                 | 23 ++++++-------------
 .../withReportAndReportActionOrNotFound.tsx   |  1 -
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/src/pages/FlagCommentPage.tsx b/src/pages/FlagCommentPage.tsx
index a7bde0807407..00c38dabc4ec 100644
--- a/src/pages/FlagCommentPage.tsx
+++ b/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';
@@ -26,8 +25,8 @@ import withReportAndReportActionOrNotFound from './home/report/withReportAndRepo
 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>;
@@ -54,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();
 
@@ -113,8 +112,8 @@ 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) {
@@ -122,12 +121,11 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl
         }
 
         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) {
@@ -189,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);
diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
index 5bcd91966463..3fe43e96266a 100644
--- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
+++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx
@@ -10,7 +10,6 @@ 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';