Fix: Blank screen after creating an account

src/SCREENS.js

@@ -4,6 +4,7 @@
  */
 export default {
     HOME: 'Home',
+    LOADING: 'Loading',
     REPORT: 'Report',
     SIGN_IN: 'SignIn',
 };

src/libs/Navigation/AppNavigator/AuthScreens.js

@@ -84,15 +84,11 @@ const propTypes = {
         isOffline: PropTypes.bool,
     }),
 
-    // The initial report for the home screen
-    initialReportID: PropTypes.string,
-
     ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
     network: {isOffline: true},
-    initialReportID: null,
 };
 
 class AuthScreens extends React.Component {
@@ -101,8 +97,6 @@ class AuthScreens extends React.Component {
 
         Timing.start(CONST.TIMING.HOMEPAGE_INITIAL_RENDER);
         Timing.start(CONST.TIMING.HOMEPAGE_REPORTS_LOADED);
-
-        this.initialReportID = props.initialReportID;
     }
 
     componentDidMount() {
@@ -119,7 +113,7 @@ class AuthScreens extends React.Component {
         PersonalDetails.fetch();
         User.getUserDetails();
         User.getBetas();
-        fetchAllReports(true, true, true);
+        fetchAllReports(true, true);
         fetchCountryCodeByRequestIP();
         UnreadIndicatorUpdater.listenForReportChanges();
 
@@ -148,15 +142,6 @@ class AuthScreens extends React.Component {
             return true;
         }
 
-        // Skip when `this.initialReportID` is already assigned. We no longer want to update it
-        if (!this.initialReportID) {
-            // Either we have a reportID or fetchAllReports resolved with no reports. Otherwise keep waiting
-            if (nextProps.initialReportID || nextProps.initialReportID === '') {
-                this.initialReportID = nextProps.initialReportID;
-                return true;
-            }
-        }
-
         return false;
     }
 
@@ -168,11 +153,6 @@ class AuthScreens extends React.Component {
     }
 
     render() {
-        // Wait to resolve initial Home route params.
-        if (!this.initialReportID) {
-            return null;
-        }
-
         const modalScreenOptions = {
             headerShown: false,
             cardStyle: getNavigationModalCardStyle(this.props.isSmallScreenWidth),
@@ -196,12 +176,6 @@ class AuthScreens extends React.Component {
                         headerShown: false,
                         title: 'Expensify.cash',
                     }}
-                    initialParams={{
-                        screen: SCREENS.REPORT,
-                        params: {
-                            reportID: this.initialReportID,
-                        },
-                    }}
                     component={MainDrawerNavigator}
                 />
                 <RootStack.Screen
@@ -278,8 +252,5 @@ export default compose(
         network: {
             key: ONYXKEYS.NETWORK,
         },
-        initialReportID: {
-            key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID,
-        },
     }),
 )(AuthScreens);

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -1,49 +1,87 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import _ from 'underscore';
 import {createDrawerNavigator} from '@react-navigation/drawer';
+import {withOnyx} from 'react-native-onyx';
 
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
+import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
+import {getLastAccessedReport} from '../../reportUtils';
 import styles, {
     getNavigationDrawerType,
     getNavigationDrawerStyle,
 } from '../../../styles/styles';
+import ONYXKEYS from '../../../ONYXKEYS';
+import compose from '../../compose';
+import SCREENS from '../../../SCREENS';
 
 // Screens
 import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
 import ReportScreen from '../../../pages/home/ReportScreen';
 
 const propTypes = {
+    // Available reports that would be displayed in this navigator
+    reports: PropTypes.objectOf(PropTypes.shape({
+        reportID: PropTypes.number,
+    })),
+
     ...windowDimensionsPropTypes,
 };
 
+const defaultProps = {
+    reports: {},
+};
+
 const Drawer = createDrawerNavigator();
 
-const MainDrawerNavigator = props => (
-    <Drawer.Navigator
-        openByDefault
-        drawerType={getNavigationDrawerType(props.isSmallScreenWidth)}
-        drawerStyle={getNavigationDrawerStyle(
-            props.windowWidth,
-            props.isSmallScreenWidth,
-        )}
-        sceneContainerStyle={styles.navigationSceneContainer}
-        edgeWidth={500}
-        drawerContent={() => <SidebarScreen />}
-    >
-        <Drawer.Screen
-            name="Report"
-            component={ReportScreen}
-
-            // Providing an empty string here will ensure that the ReportScreen does not show as '/r/undefined'
-            // eslint-disable-next-line react/jsx-props-no-multi-spaces
-            initialParams={{reportID: ''}}
-            options={{
+// Decorated to always returning the result of the first call - keeps Screen initialParams from changing
+const getInitialReport = _.once(getLastAccessedReport);
+
+const MainDrawerNavigator = (props) => {
+    // When there are no reports there's no point to render the empty navigator
+    if (_.size(props.reports) === 0) {
+        return <FullScreenLoadingIndicator visible />;
+    }
+
+    const initialReportID = getInitialReport(props.reports).reportID;
+
+    /* After the app initializes and reports are available the home navigation is mounted
+    * This way routing information is updated (if needed) based on the initial report ID resolved.
+    * This is usually needed after login/create account and re-launches */
+    return (
+        <Drawer.Navigator
+            openByDefault
+            drawerType={getNavigationDrawerType(props.isSmallScreenWidth)}
+            drawerStyle={getNavigationDrawerStyle(
+                props.windowWidth,
+                props.isSmallScreenWidth,
+            )}
+            sceneContainerStyle={styles.navigationSceneContainer}
+            edgeWidth={500}
+            drawerContent={() => <SidebarScreen />}
+            screenOptions={{
                 cardStyle: styles.navigationScreenCardStyle,
                 headerShown: false,
             }}
-        />
-    </Drawer.Navigator>
-);
+        >
+            <Drawer.Screen
+                name={SCREENS.REPORT}
+                component={ReportScreen}
+                initialParams={{reportID: initialReportID.toString()}}
+            />
+        </Drawer.Navigator>
+    );
+};
 
 MainDrawerNavigator.propTypes = propTypes;
+MainDrawerNavigator.defaultProps = defaultProps;
 MainDrawerNavigator.displayName = 'MainDrawerNavigator';
-export default withWindowDimensions(MainDrawerNavigator);
+
+export default compose(
+    withWindowDimensions,
+    withOnyx({
+        reports: {
+            key: ONYXKEYS.COLLECTION.REPORT,
+        },
+    }),
+)(MainDrawerNavigator);

src/libs/Navigation/linkingConfig.js

@@ -18,6 +18,7 @@ export default {
                 screens: {
                     // Report route
                     [SCREENS.REPORT]: ROUTES.REPORT_WITH_ID,
+                    [SCREENS.LOADING]: ROUTES.REPORT,
                 },
             },
 

src/libs/actions/Report.js

@@ -708,12 +708,10 @@ function fetchActions(reportID, offset) {
 /**
  * Get all of our reports
  *
- * @param {Boolean} shouldRedirectToReport this is set to false when the network reconnect code runs
  * @param {Boolean} shouldRecordHomePageTiming whether or not performance timing should be measured
  * @param {Boolean} shouldDelayActionsFetch when the app loads we want to delay the fetching of additional actions
  */
 function fetchAllReports(
-    shouldRedirectToReport = true,
     shouldRecordHomePageTiming = false,
     shouldDelayActionsFetch = false,
 ) {
@@ -727,15 +725,20 @@ function fetchAllReports(
                 return;
             }
 
-            // The string cast here is necessary as Get rvl='chatList' may return an int
-            reportIDs = String(response.chatList).split(',');
+            // The cast here is necessary as Get rvl='chatList' may return an int or Array
+            reportIDs = String(response.chatList)
+                .split(',')
+                .filter(_.identity);
 
             // Get all the chat reports if they have any, otherwise create one with concierge
-            if (reportIDs.length) {
+            if (reportIDs.length > 0) {
                 return fetchChatReportsByIDs(reportIDs);
             }
 
-            return fetchOrCreateChatReport([currentUserEmail, 'concierge@expensify.com']);
+            return fetchOrCreateChatReport([currentUserEmail, 'concierge@expensify.com'], false)
+                .then((createdReportID) => {
+                    reportIDs = [createdReportID];
+                });
         })
         .then(() => {
             Onyx.set(ONYXKEYS.INITIAL_REPORT_DATA_LOADED, true);
@@ -754,16 +757,6 @@ function fetchAllReports(
             // We are waiting 8 seconds since this provides a good time window to allow the UI to finish loading before
             // bogging it down with more requests and operations.
             }, shouldDelayActionsFetch ? 8000 : 0);
-
-            // Update currentlyViewedReportID to be our first reportID from our report collection if we don't have
-            // one already.
-            if (!shouldRedirectToReport || lastViewedReportID) {
-                return;
-            }
-
-            const firstReportID = _.first(reportIDs);
-            const currentReportID = firstReportID ? String(firstReportID) : '';
-            Onyx.merge(ONYXKEYS.CURRENTLY_VIEWED_REPORTID, currentReportID);
         });
 }
 
@@ -960,7 +953,7 @@ Onyx.connect({
 
 // When the app reconnects from being offline, fetch all of the reports and their actions
 NetworkConnection.onReconnect(() => {
-    fetchAllReports(false);
+    fetchAllReports();
 });
 
 export {

src/libs/reportUtils.js

@@ -21,7 +21,22 @@ function isReportMessageAttachment(reportMessageText) {
     return reportMessageText === '[Attachment]';
 }
 
+/**
+ * Given a collection of reports returns the most recently accessed one
+ *
+ * @param {Record<String, {lastVisitedTimestamp}>|Array<{lastVisitedTimestamp}>} reports
+ * @returns {Object}
+ */
+function getLastAccessedReport(reports) {
+    return _.chain(reports)
+        .toArray()
+        .sortBy('lastVisitedTimestamp')
+        .last()
+        .value();
+}
+
 export {
     getReportParticipantsTitle,
     isReportMessageAttachment,
+    getLastAccessedReport,
 };