From 4cf35fdee2dfc6b5fce6473ee4118a6cf79addd7 Mon Sep 17 00:00:00 2001
From: Peter Velkov <kidroca@gmail.com>
Date: Sat, 3 Apr 2021 04:37:34 +0300
Subject: [PATCH] refactor: ReportScreen handle initial state

---
 src/components/Loading/LoadingIndicator.js |  1 +
 src/pages/home/ReportScreen.js             | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/components/Loading/LoadingIndicator.js b/src/components/Loading/LoadingIndicator.js
index f64a0c4b7075..708d59ba44ba 100644
--- a/src/components/Loading/LoadingIndicator.js
+++ b/src/components/Loading/LoadingIndicator.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/jsx-props-no-spreading */
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {
diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js
index fa0cbf08ad77..36eee9c4ae94 100644
--- a/src/pages/home/ReportScreen.js
+++ b/src/pages/home/ReportScreen.js
@@ -13,7 +13,11 @@ import ONYXKEYS from '../../ONYXKEYS';
 
 const propTypes = {
     /* The ID of the report this screen should display */
-    reportID: PropTypes.string.isRequired,
+    reportID: PropTypes.string,
+};
+
+const defaultProps = {
+    reportID: '0',
 };
 
 class ReportScreen extends React.Component {
@@ -26,18 +30,20 @@ class ReportScreen extends React.Component {
         };
     }
 
+    componentDidMount() {
+        this.fetchReport();
+    }
+
     componentDidUpdate(prevProps) {
         // Reports changed, reset and load new data
         if (this.props.reportID !== prevProps.reportID) {
-            if (this.reportID) {
-                this.fetchReport();
-            }
+            this.fetchReport();
         }
     }
 
     // Todo: ask why getters aren't on top?
     get canRenderMainContent() {
-        return !this.state.isLoading && !this.state.error;
+        return this.reportID && !this.state.isLoading && !this.state.error;
     }
 
     get reportID() {
@@ -45,6 +51,8 @@ class ReportScreen extends React.Component {
     }
 
     fetchReport() {
+        if (!this.reportID) { return; }
+
         console.debug('[ReportScreen] Fetch started: ');
         this.setState({
             isLoading: true,
@@ -91,6 +99,8 @@ class ReportScreen extends React.Component {
 
 ReportScreen.displayName = 'ReportScreen';
 ReportScreen.propTypes = propTypes;
+ReportScreen.defaultProps = defaultProps;
+
 export default withOnyx({
     reportID: {
         key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,