From ece06a0bc920c36f11f7b64aba77000f00c9947a Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 20 Nov 2023 15:03:16 +0700 Subject: [PATCH 1/8] fix: login via deeplink should open modal in request money --- src/pages/EditRequestPage.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 194cd2855dbd..e2f2d44127ca 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -3,8 +3,10 @@ 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'; @@ -61,6 +63,9 @@ const propTypes = { /** Transaction that stores the request data */ transaction: transactionPropTypes, + + /** Indicates whether the app is loading initial data */ + isLoadingReportData: PropTypes.bool, }; const defaultProps = { @@ -70,11 +75,18 @@ 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}) { const parentReportActionID = lodashGet(report, 'parentReportActionID', '0'); const parentReportAction = lodashGet(parentReportActions, parentReportActionID, {}); + + 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, @@ -107,7 +119,7 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT // 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; } @@ -115,7 +127,11 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT Navigation.isNavigationReady().then(() => { Navigation.dismissModal(); }); - }, [parentReportAction, parentReport.reportID, fieldToEdit]); + }, [parentReportAction, parentReport.reportID, fieldToEdit, isDataLoading]); + + if (isDataLoading) { + return ; + } // Update the transaction object and close the modal function editMoneyRequest(transactionChanges) { @@ -276,6 +292,9 @@ export default compose( 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({ From 585b3f997921f3ee9abf7380e037079dbc111465 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 20 Nov 2023 16:57:00 +0700 Subject: [PATCH 2/8] fix: conditions --- src/pages/EditRequestPage.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index e2f2d44127ca..56dabdc137b1 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -10,14 +10,17 @@ 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'; @@ -66,6 +69,9 @@ const propTypes = { /** 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 = { @@ -78,9 +84,10 @@ const defaultProps = { isLoadingReportData: true, }; -function EditRequestPage({report, route, parentReport, policyCategories, policyTags, parentReportActions, transaction, isLoadingReportData}) { +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); @@ -116,6 +123,18 @@ 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))) { + 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. @@ -288,6 +307,7 @@ EditRequestPage.displayName = 'EditRequestPage'; EditRequestPage.propTypes = propTypes; EditRequestPage.defaultProps = defaultProps; export default compose( + withWindowDimensions, withOnyx({ report: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.threadReportID}`, From 7adeaefd99d45e64f56bb1ffdb2bb594acbcaee5 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 20 Nov 2023 18:36:20 +0700 Subject: [PATCH 3/8] open report when transaction is empty --- src/pages/EditRequestPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 56dabdc137b1..dbfebc300eac 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -128,7 +128,7 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT // 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))) { + if (!isSmallScreenWidth || (!_.isEmpty(report) && !_.isEmpty(reportAction) && !_.isEmpty(transaction))) { return; } Report.openReport(route.params.threadReportID); From 002c90986ddad81fa5d59fa8b4963c40b51c225c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 3 Jan 2024 14:46:11 +0700 Subject: [PATCH 4/8] fix lint --- src/pages/EditRequestPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index dbbdbd1d1db1..c4903fc3748c 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -143,7 +143,7 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT Navigation.isNavigationReady().then(() => { Navigation.dismissModal(); }); - }, [parentReportAction, parentReport.reportID, fieldToEdit, isDataLoading]); + }, [parentReportAction, parentReport.reportID, fieldToEdit, transaction, isDataLoading]); if (isDataLoading) { return ; From 58e7687e22d32a22de13fb8a7f35cf5c1dc9137c Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 3 Jan 2024 15:41:28 +0700 Subject: [PATCH 5/8] fix lint --- src/pages/EditRequestPage.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index c4903fc3748c..344a0c8a7176 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -145,10 +145,6 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT }); }, [parentReportAction, parentReport.reportID, fieldToEdit, transaction, isDataLoading]); - if (isDataLoading) { - return ; - } - // Update the transaction object and close the modal function editMoneyRequest(transactionChanges) { IOU.editMoneyRequest(transaction, report.reportID, transactionChanges); @@ -184,6 +180,10 @@ function EditRequestPage({report, route, parentReport, policyCategories, policyT [transaction, report], ); + if (isDataLoading) { + return ; + } + if (fieldToEdit === CONST.EDIT_REQUEST_FIELD.DESCRIPTION) { return ( Date: Thu, 11 Jan 2024 16:23:45 +0700 Subject: [PATCH 6/8] fix lint --- src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts index 53a3b1234e2c..d6c925cd749a 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts @@ -2,12 +2,12 @@ import {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import usePermissions from '@hooks/usePermissions'; +import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import * as App from '@userActions/App'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Policy, Report, ReportMetadata} from '@src/types/onyx'; import type {ReportScreenWrapperProps} from './ReportScreenWrapper'; -import Navigation from '../Navigation'; type ReportScreenIDSetterComponentProps = { /** Available reports that would be displayed in this navigator */ From c24f80ab3dbb226e9c1425a2e3e15af6c655cc11 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 10 Apr 2024 13:29:44 +0700 Subject: [PATCH 7/8] reset code change --- .../AppNavigator/ReportScreenIDSetter.ts | 11 ------- src/pages/EditRequestPage.js | 32 ++----------------- 2 files changed, 2 insertions(+), 41 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts index c0f55b53e0c0..529f0f3d31a7 100644 --- a/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts +++ b/src/libs/Navigation/AppNavigator/ReportScreenIDSetter.ts @@ -3,11 +3,7 @@ import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import useActiveWorkspace from '@hooks/useActiveWorkspace'; import usePermissions from '@hooks/usePermissions'; -<<<<<<< HEAD -import Navigation from '@libs/Navigation/Navigation'; -======= import {getPolicyMembersByIdWithoutCurrentUser} from '@libs/PolicyUtils'; ->>>>>>> main import * as ReportUtils from '@libs/ReportUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Policy, PolicyMembers, Report, ReportMetadata} from '@src/types/onyx'; @@ -48,13 +44,6 @@ const getLastAccessedReportID = ( policyID?: string, policyMemberAccountIDs?: number[], ): string | undefined => { - const currentRoute = Navigation.getActiveRoute(); - const {reportID} = ReportUtils.parseReportRouteParams(currentRoute); - - if (reportID) { - return reportID; - } - const lastReport = ReportUtils.findLastAccessedReport( reports, ignoreDefaultRooms, diff --git a/src/pages/EditRequestPage.js b/src/pages/EditRequestPage.js index 2438abdcda88..d3941dca044e 100644 --- a/src/pages/EditRequestPage.js +++ b/src/pages/EditRequestPage.js @@ -2,24 +2,19 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {useCallback, 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 IOUUtils from '@libs/IOUUtils'; 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 EditRequestReceiptPage from './EditRequestReceiptPage'; @@ -62,12 +57,6 @@ 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 = { @@ -77,7 +66,6 @@ const defaultProps = { policyTags: {}, parentReportActions: {}, transaction: {}, - isLoadingReportData: true, }; function EditRequestPage({report, route, policy, policyCategories, policyTags, parentReportActions, transaction}) { @@ -98,22 +86,10 @@ function EditRequestPage({report, route, policy, policyCategories, policyTags, p // A flag for showing the tags page const shouldShowTags = useMemo(() => isPolicyExpenseChat && (transactionTag || OptionsListUtils.hasEnabledTags(policyTagLists)), [isPolicyExpenseChat, policyTagLists, transactionTag]); - 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 (isDataLoading || ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, fieldToEdit)) { + if (ReportUtils.canEditFieldOfMoneyRequest(parentReportAction, fieldToEdit)) { return; } @@ -121,7 +97,7 @@ function EditRequestPage({report, route, policy, policyCategories, policyTags, p Navigation.isNavigationReady().then(() => { Navigation.dismissModal(); }); - }, [parentReportAction, fieldToEdit, transaction, isDataLoading]); + }, [parentReportAction, fieldToEdit]); const saveTag = useCallback( ({tag: newTag}) => { @@ -179,14 +155,10 @@ 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({ From 07a70afe9c66abcb237a256f3a02c39cfda89821 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Wed, 10 Apr 2024 14:21:15 +0700 Subject: [PATCH 8/8] Fix not found page appear when openning edit page by deeplink --- .../iou/request/step/IOURequestStepDate.tsx | 6 ++--- .../step/IOURequestStepDescription.tsx | 6 ++--- .../step/withWritableReportOrNotFound.tsx | 26 +++++++++++++++++-- 3 files changed, 30 insertions(+), 8 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepDate.tsx b/src/pages/iou/request/step/IOURequestStepDate.tsx index 682204a4510f..2e5089657e64 100644 --- a/src/pages/iou/request/step/IOURequestStepDate.tsx +++ b/src/pages/iou/request/step/IOURequestStepDate.tsx @@ -137,8 +137,8 @@ const IOURequestStepDateWithOnyx = withOnyx; + + isLoadingApp: OnyxEntry; }; type MoneyRequestRouteName = @@ -34,10 +38,25 @@ export default function , keyof WithWritableReportOrNotFoundOnyxProps>> { // eslint-disable-next-line rulesdir/no-negated-variables function WithWritableReportOrNotFound(props: TProps, ref: ForwardedRef) { - const {report = {reportID: ''}, route} = props; + const {report = {reportID: ''}, route, isLoadingApp = true} = props; const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE).includes(route.params?.iouType); + const isEditing = route.params?.action === CONST.IOU.ACTION.EDIT; const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); + useEffect(() => { + if (Boolean(report?.reportID) || !route.params.reportID) { + return; + } + + ReportActions.openReport(route.params.reportID); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + if (isEditing && isLoadingApp) { + return ; + } + if (iouTypeParamIsInvalid || !canUserPerformWriteAction) { return ; } @@ -57,6 +76,9 @@ export default function `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '0'}`, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, })(forwardRef(WithWritableReportOrNotFound)); }