Fix crash app when opening split bill detail page by deep link

src/pages/home/report/withReportAndReportActionOrNotFound.js

@@ -0,0 +1,153 @@
+import PropTypes from 'prop-types';
+import React, {useEffect, useCallback} from 'react';
+import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
+import getComponentDisplayName from '../../../libs/getComponentDisplayName';
+import NotFoundPage from '../../ErrorPage/NotFoundPage';
+import ONYXKEYS from '../../../ONYXKEYS';
+import reportPropTypes from '../../reportPropTypes';
+import reportActionPropTypes from './reportActionPropTypes';
+import FullscreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import * as ReportActionsUtils from '../../../libs/ReportActionsUtils';
+import * as Report from '../../../libs/actions/Report';
+import compose from '../../../libs/compose';
+import withWindowDimensions from '../../../components/withWindowDimensions';
+
+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,
+
+ /** Array of report actions for this report */
+ reportActions: PropTypes.shape(reportActionPropTypes),
+
+ /** The policies which the user has access to */
+ policies: PropTypes.objectOf(
+ PropTypes.shape({
+ /** The policy name */
+ name: PropTypes.string,
+
+ /** The type of the policy */
+ type: PropTypes.string,
+ }),
+ ),
+
+ /** Route params */
+ route: PropTypes.shape({
+ params: PropTypes.shape({
+ /** Report ID passed via route */
+ reportID: PropTypes.string,
+
+ /** ReportActionID passed via route */
+ reportActionID: PropTypes.string,
+ }),
+ }).isRequired,
+
+ /** Beta features list */
+ betas: PropTypes.arrayOf(PropTypes.string),
+
+ /** Indicated whether the report data is loading */
+ isLoadingReportData: PropTypes.bool,
+
+ /** Is the window width narrow, like on a mobile device? */
+ isSmallScreenWidth: PropTypes.bool.isRequired,
+ };
+
+ const defaultProps = {
+ forwardedRef: () => {},
+ reportActions: {},
+ report: {},
+ policies: {},
+ betas: [],
+ isLoadingReportData: true,
+ };
+
+ // eslint-disable-next-line rulesdir/no-negated-variables
+ function WithReportAndReportActionOrNotFound(props) {
+ const getReportAction = useCallback(() => {
+ let reportAction = props.reportActions[`${props.route.params.reportActionID}`];
+
+ // Handle threads if needed
+ if (reportAction === undefined || reportAction.reportActionID === undefined) {
+ reportAction = ReportActionsUtils.getParentReportAction(props.report);
+ }
+
+ return reportAction;
+ }, [props.report, props.reportActions, props.route.params.reportActionID]);
+
+ const reportAction = getReportAction();
+
+ // For small screen, we don't call openReport API when we go to a sub report page by deeplink
+ // So we need to call openReport here for small screen
+ useEffect(() => {
+ if (!props.isSmallScreenWidth || (!_.isEmpty(props.report) && !_.isEmpty(reportAction))) {
+ return;
+ }
+ Report.openReport(props.route.params.reportID);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [props.isSmallScreenWidth, props.route.params.reportID]);
+
+ // Perform all the loading checks
+ const isLoadingReport = props.isLoadingReportData && (_.isEmpty(props.report) || !props.report.reportID);
+ const isLoadingReportAction = _.isEmpty(props.reportActions) || (props.report.isLoadingReportActions && _.isEmpty(getReportAction()));
+ const shouldHideReport = !isLoadingReport && (_.isEmpty(props.report) || !props.report.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.betas));
+
+ if ((isLoadingReport || isLoadingReportAction) && !shouldHideReport) {
+ return <FullscreenLoadingIndicator />;
+ }
+
+ // Perform the access/not found checks
+ if (shouldHideReport || _.isEmpty(reportAction)) {
+ return <NotFoundPage />;
+ }
+
+ const rest = _.omit(props, ['forwardedRef']);
+ return (
+ <WrappedComponent
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...rest}
+ ref={props.forwardedRef}
+ />
+ );
+ }
+
+ WithReportAndReportActionOrNotFound.propTypes = propTypes;
+ WithReportAndReportActionOrNotFound.defaultProps = defaultProps;
+ WithReportAndReportActionOrNotFound.displayName = `withReportAndReportActionOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
+
+ // eslint-disable-next-line rulesdir/no-negated-variables
+ const withReportAndReportActionOrNotFound = React.forwardRef((props, ref) => (
+ <WithReportAndReportActionOrNotFound
+ // eslint-disable-next-line react/jsx-props-no-spreading
+ {...props}
+ forwardedRef={ref}
+ />
+ ));
+
+ return compose(
+ withWindowDimensions,
+ withOnyx({
+ report: {
+ key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+ },
+ isLoadingReportData: {
+ key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+ },
+ betas: {
+ key: ONYXKEYS.BETAS,
+ },
+ policies: {
+ key: ONYXKEYS.COLLECTION.POLICY,
+ },
+ reportActions: {
+ key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`,
+ canEvict: false,
+ },
+ }),
+ )(withReportAndReportActionOrNotFound);
+}

src/pages/iou/SplitBillDetailsPage.js

@@ -14,7 +14,7 @@ import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize
 import compose from '../../libs/compose';
 import reportActionPropTypes from '../home/report/reportActionPropTypes';
 import reportPropTypes from '../reportPropTypes';
-import withReportOrNotFound from '../home/report/withReportOrNotFound';
+import withReportAndReportActionOrNotFound from '../home/report/withReportAndReportActionOrNotFound';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 import CONST from '../../CONST';
 import HeaderWithBackButton from '../../components/HeaderWithBackButton';
@@ -50,18 +50,6 @@ const defaultProps = {
  reportActions: {},
 };
 
-/**
- * Get the reportID for the associated chatReport
- *
- * @param {Object} route
- * @param {Object} route.params
- * @param {String} route.params.reportID
- * @returns {String}
- */
-function getReportID(route) {
- return route.params.reportID.toString();
-}
-
 function SplitBillDetailsPage(props) {
  const reportAction = props.reportActions[`${props.route.params.reportActionID.toString()}`];
  const participantAccountIDs = reportAction.originalMessage.participantAccountIDs;
@@ -108,14 +96,10 @@ SplitBillDetailsPage.displayName = 'SplitBillDetailsPage';
 
 export default compose(
  withLocalize,
- withReportOrNotFound,
+ withReportAndReportActionOrNotFound,
  withOnyx({
  personalDetails: {
  key: ONYXKEYS.PERSONAL_DETAILS_LIST,
  },
- reportActions: {
- key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
- canEvict: false,
- },
  }),
 )(SplitBillDetailsPage);