diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index e76c29c7244e..622cb777aa5d 100644 --- a/src/pages/ReportDetailsPage.js +++ b/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, }, diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js index f66c0cbfd724..eb1b63980c8a 100755 --- a/src/pages/ReportParticipantsPage.js +++ b/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); diff --git a/src/pages/ReportSettingsPage.js b/src/pages/ReportSettingsPage.js index 16893895608e..4eb29ef282cc 100644 --- a/src/pages/ReportSettingsPage.js +++ b/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, }, diff --git a/src/pages/home/report/withReportOrNavigateHome.js b/src/pages/home/report/withReportOrNavigateHome.js new file mode 100644 index 000000000000..5e74f65a0cb8 --- /dev/null +++ b/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 ( + + ); + } + } + + 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 + + )); + + return withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + })(withReportOrNavigateHome); +}