Login via deeplink should open modal in request money

src/pages/EditRequestPage.js

@@ -3,19 +3,24 @@ import lodashValues from 'lodash/values';
 import PropTypes from 'prop-types';
 import React, {useEffect, useMemo} from 'react';
 import {withOnyx} from 'react-native-onyx';
+import _ from 'underscore';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import categoryPropTypes from '@components/categoryPropTypes';
+import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ScreenWrapper from '@components/ScreenWrapper';
 import tagPropTypes from '@components/tagPropTypes';
 import transactionPropTypes from '@components/transactionPropTypes';
+import withWindowDimensions from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import * as PolicyUtils from '@libs/PolicyUtils';
+import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as TransactionUtils from '@libs/TransactionUtils';
 import * as IOU from '@userActions/IOU';
+import * as Report from '@userActions/Report';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
@@ -61,6 +66,12 @@ const propTypes = {
 
     /** Transaction that stores the request data */
     transaction: transactionPropTypes,
+
+    /** Indicates whether the app is loading initial data */
+    isLoadingReportData: PropTypes.bool,
+
+    /** Is the window width narrow, like on a mobile device */
+    isSmallScreenWidth: PropTypes.bool.isRequired,
 };
 
 const defaultProps = {
@@ -70,11 +81,19 @@ const defaultProps = {
     policyTags: {},
     parentReportActions: {},
     transaction: {},
+    isLoadingReportData: true,
 };
 
-function EditRequestPage({report, route, parentReport, policyCategories, policyTags, parentReportActions, transaction}) {
+function EditRequestPage({report, route, parentReport, policyCategories, policyTags, parentReportActions, transaction, isLoadingReportData, isSmallScreenWidth}) {
     const parentReportActionID = lodashGet(report, 'parentReportActionID', '0');
     const parentReportAction = lodashGet(parentReportActions, parentReportActionID, {});
+    const parentReportID = lodashGet(report, 'parentReportID', '0');
+
+    const isTransactionLoadingRoute = lodashGet(transaction, 'comment.isLoading', false);
+    const isTransactionLoading = lodashGet(transaction, 'isLoading', false);
+
+    const isDataLoading = isLoadingReportData || isTransactionLoading || isTransactionLoadingRoute || _.isEmpty(transaction);
+
     const {
         amount: transactionAmount,
         currency: transactionCurrency,
@@ -104,18 +123,34 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT
     // A flag for showing the tags page
     const shouldShowTags = isPolicyExpenseChat && (transactionTag || OptionsListUtils.hasEnabledOptions(lodashValues(policyTagList)));
 
+    const reportAction = ReportActionsUtils.getReportAction(parentReportID, parentReportActionID);
+
+    // 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 (!isSmallScreenWidth || (!_.isEmpty(report) && !_.isEmpty(reportAction) && !_.isEmpty(transaction))) {
+            return;
+        }
+        Report.openReport(route.params.threadReportID);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isSmallScreenWidth, route.params.threadReportID]);
+
     // Decides whether to allow or disallow editing a money request
     useEffect(() => {
         // Do not dismiss the modal, when a current user can edit this property of the money request.
-        if (ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, parentReport.reportID, fieldToEdit)) {
+        if (isDataLoading || ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, parentReport.reportID, fieldToEdit)) {
             return;
         }
 
         // Dismiss the modal when a current user cannot edit a money request.
         Navigation.isNavigationReady().then(() => {
             Navigation.dismissModal();
         });
-    }, [parentReportAction, parentReport.reportID, fieldToEdit]);
+    }, [parentReportAction, parentReport.reportID, fieldToEdit, isDataLoading]);
+
+    if (isDataLoading) {
+        return <FullScreenLoadingIndicator />;
+    }
 
     // Update the transaction object and close the modal
     function editMoneyRequest(transactionChanges) {
@@ -272,10 +307,14 @@ EditRequestPage.displayName = 'EditRequestPage';
 EditRequestPage.propTypes = propTypes;
 EditRequestPage.defaultProps = defaultProps;
 export default compose(
+    withWindowDimensions,
     withOnyx({
         report: {
             key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`,
         },
+        isLoadingReportData: {
+            key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+        },
     }),
     // eslint-disable-next-line rulesdir/no-multiple-onyx-in-file
     withOnyx({