Create HOC for get report data or navigate to home

src/pages/ReportDetailsPage.js

@@ -22,6 +22,7 @@ import MenuItem from '../components/MenuItem';
 import Text from '../components/Text';
 import CONST from '../CONST';
 import reportPropTypes from './reportPropTypes';
+import withReportOrNavigateHome from './home/report/withReportOrNavigateHome';
 
 const propTypes = {
     ...withLocalizePropTypes,
@@ -66,7 +67,7 @@ class ReportDetailsPage extends Component {
             key: CONST.REPORT_DETAILS_MENU_ITEM.MEMBERS,
             translationKey: 'common.members',
             icon: Expensicons.Users,
-            subtitle: props.report.participants.length,
+            subtitle: lodashGet(props.report, 'participants', []).length,
             action: () => { Navigation.navigate(ROUTES.getReportParticipantsRoute(props.report.reportID)); },
         });
 
@@ -177,10 +178,8 @@ ReportDetailsPage.propTypes = propTypes;
 
 export default compose(
     withLocalize,
+    withReportOrNavigateHome,
     withOnyx({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
         },

src/pages/ReportParticipantsPage.js

@@ -19,6 +19,7 @@ import withLocalize, {withLocalizePropTypes} from '../components/withLocalize';
 import compose from '../libs/compose';
 import * as ReportUtils from '../libs/ReportUtils';
 import reportPropTypes from './reportPropTypes';
+import withReportOrNavigateHome from './home/report/withReportOrNavigateHome';
 
 const propTypes = {
     /* Onyx Props */
@@ -113,12 +114,10 @@ ReportParticipantsPage.displayName = 'ReportParticipantsPage';
 
 export default compose(
     withLocalize,
+    withReportOrNavigateHome,
     withOnyx({
         personalDetails: {
             key: ONYXKEYS.PERSONAL_DETAILS,
         },
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
     }),
 )(ReportParticipantsPage);

src/pages/ReportSettingsPage.js

@@ -21,6 +21,7 @@ import Picker from '../components/Picker';
 import * as ValidationUtils from '../libs/ValidationUtils';
 import OfflineWithFeedback from '../components/OfflineWithFeedback';
 import reportPropTypes from './reportPropTypes';
+import withReportOrNavigateHome from './home/report/withReportOrNavigateHome';
 
 const propTypes = {
     /** Route params */
@@ -243,10 +244,8 @@ ReportSettingsPage.propTypes = propTypes;
 
 export default compose(
     withLocalize,
+    withReportOrNavigateHome,
     withOnyx({
-        report: {
-            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
-        },
         policies: {
             key: ONYXKEYS.COLLECTION.POLICY,
         },

src/pages/home/report/withReportOrNavigateHome.js

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import getComponentDisplayName from '../../../libs/getComponentDisplayName';
+import Navigation from '../../../libs/Navigation/Navigation';
+import ONYXKEYS from '../../../ONYXKEYS';
+import reportPropTypes from '../../reportPropTypes';
+
+export default function (WrappedComponent) {
+    const propTypes = {
+        /** The HOC takes an optional ref as a prop and passes it as a ref to the wrapped component.
+          * That way, if a ref is passed to a component wrapped in the HOC, the ref is a reference to the wrapped component, not the HOC. */
+        forwardedRef: PropTypes.func,
+
+        /** The report currently being looked at */
+        report: reportPropTypes,
+    };
+
+    const defaultProps = {
+        forwardedRef: () => {},
+        report: {},
+    };
+
+    class WithReportOrNavigateHome extends Component {
+        componentDidMount() {
+            if (!_.isEmpty(this.props.report)) {
+                return;
+            }
+            Navigation.dismissModal();
+        }
+
+        render() {
+            const rest = _.omit(this.props, ['forwardedRef']);
+
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...rest}
+                    ref={this.props.forwardedRef}
+                />
+            );
+        }
+    }
+
+    WithReportOrNavigateHome.propTypes = propTypes;
+    WithReportOrNavigateHome.defaultProps = defaultProps;
+    WithReportOrNavigateHome.displayName = `withReportOrNavigateHome(${getComponentDisplayName(WrappedComponent)})`;
+    const withReportOrNavigateHome = React.forwardRef((props, ref) => (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <WithReportOrNavigateHome {...props} forwardedRef={ref} />
+    ));
+
+    return withOnyx({
+        report: {
+            key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+        },
+    })(withReportOrNavigateHome);
+}