Merge pull request #10545 from Expensify/marcaaron-useReportIDFromURL…

…NotReportObject

Move report fetch to `ReportScreen` to populate `props.report`

(cherry picked from commit 168f56e)

src/pages/home/ReportScreen.js

@@ -61,6 +61,9 @@ const propTypes = {
 
         /** Flag to check if the report actions data are loading */
         isLoadingReportActions: PropTypes.bool,
+
+        /** ID for the report */
+        reportID: PropTypes.string,
     }),
 
     /** Array of report actions for this report */
@@ -165,22 +168,31 @@ class ReportScreen extends React.Component {
     shouldShowLoader() {
         // This means there are no reportActions at all to display, but it is still in the process of loading the next set of actions.
         const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions;
-        return !getReportID(this.props.route) || isLoadingInitialReportActions;
+        return !getReportID(this.props.route) || isLoadingInitialReportActions || !this.props.report.reportID;
     }
 
     /**
      * Persists the currently viewed report id
      */
     storeCurrentlyViewedReport() {
-        const reportID = getReportID(this.props.route);
-        if (_.isNaN(reportID)) {
+        const reportIDFromPath = getReportID(this.props.route);
+        if (_.isNaN(reportIDFromPath)) {
             Report.handleInaccessibleReport();
             return;
         }
 
         // Always reset the state of the composer view when the current reportID changes
         toggleReportActionComposeView(true);
-        Report.updateCurrentlyViewedReportID(reportID);
+        Report.updateCurrentlyViewedReportID(reportIDFromPath);
+
+        // It possible that we may not have the report object yet in Onyx yet e.g. we navigated to a URL for an accessible report that
+        // is not stored locally yet. If props.report.reportID exists, then the report has been stored locally and nothing more needs to be done.
+        // If it doesn't exist, then we fetch the report from the API.
+        if (this.props.report.reportID) {
+            return;
+        }
+
+        Report.fetchChatReportsByIDs([reportIDFromPath], true);
     }
 
     /**

src/pages/home/report/ReportActionsView.js

@@ -115,11 +115,6 @@ class ReportActionsView extends React.Component {
             Report.openReport(this.props.report.reportID);
         });
 
-        // If the reportID is not found then we have either not loaded this chat or the user is unable to access it.
-        // We will attempt to fetch it and redirect if still not accessible.
-        if (!this.props.report.reportID) {
-            Report.fetchChatReportsByIDs([this.props.report.reportID], true);
-        }
         Report.subscribeToReportTypingEvents(this.props.report.reportID);
         this.keyboardEvent = Keyboard.addListener('keyboardDidShow', () => {
             if (!ReportActionComposeFocusManager.isFocused()) {