From c006880a0f97fc400864a31061954557a2c72276 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 8 Sep 2021 13:38:33 +0530 Subject: [PATCH 1/6] fix: navigation for exisiting report screen --- src/libs/Navigation/CustomActions.js | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index 5f8762600acf..00569b0c9f9e 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -24,7 +24,19 @@ function pushDrawerRoute(screenName, params, navigationRef) { if (activeReportID === params.reportID) { if (state.type !== 'drawer') { - navigationRef.current.dispatch(StackActions.pop()); + navigationRef.current.dispatch(() => { + // If there are multiple routes then we can pop back to the first route + if (state.routes.length > 1) { + return StackActions.popToTop(); + } + + // Otherwise, we are already on the last page of a modal so just do nothing here as goBack() will navigate us + // back to the screen we were on before we opened the modal. + return StackActions.pop(0); + }); + if (navigationRef.current.canGoBack()) { + navigationRef.current.goBack(); + } } return DrawerActions.closeDrawer(); } From 28533f6073f0ea59fa4b0904ab877fd11bb50b58 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Wed, 15 Sep 2021 03:33:22 +0530 Subject: [PATCH 2/6] refactor --- src/libs/Navigation/CustomActions.js | 51 +++++++++++++++++++++------- src/libs/Navigation/Navigation.js | 35 ++----------------- 2 files changed, 41 insertions(+), 45 deletions(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index 00569b0c9f9e..7b822acd8d96 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -1,6 +1,42 @@ import {CommonActions, StackActions, DrawerActions} from '@react-navigation/native'; import lodashGet from 'lodash/get'; +/** + * Go back to the Main Drawer + * @param {Object} navigationRef + */ +function navigateBackToDrawer(navigationRef) { + let isLeavingDrawerNavigator = false; + + // This should take us to the first view of the modal's stack navigator + navigationRef.current.dispatch((state) => { + // If this is a nested drawer navigator then we pop the screen and + // prevent calling goBack() as it's default behavior is to toggle open the active drawer + if (state.type === 'drawer') { + isLeavingDrawerNavigator = true; + return StackActions.pop(); + } + + // If there are multiple routes then we can pop back to the first route + if (state.routes.length > 1) { + return StackActions.popToTop(); + } + + // Otherwise, we are already on the last page of a modal so just do nothing here as goBack() will navigate us + // back to the screen we were on before we opened the modal. + return StackActions.pop(0); + }); + + if (isLeavingDrawerNavigator) { + return; + } + + // Navigate back to where we were before we launched the modal + if (navigationRef.current.canGoBack()) { + navigationRef.current.goBack(); + } +} + /** * In order to create the desired browser navigation behavior on web and mobile web we need to replace any * type: 'drawer' routes with a type: 'route' so that when pushing to a report screen we never show the @@ -24,19 +60,7 @@ function pushDrawerRoute(screenName, params, navigationRef) { if (activeReportID === params.reportID) { if (state.type !== 'drawer') { - navigationRef.current.dispatch(() => { - // If there are multiple routes then we can pop back to the first route - if (state.routes.length > 1) { - return StackActions.popToTop(); - } - - // Otherwise, we are already on the last page of a modal so just do nothing here as goBack() will navigate us - // back to the screen we were on before we opened the modal. - return StackActions.pop(0); - }); - if (navigationRef.current.canGoBack()) { - navigationRef.current.goBack(); - } + navigateBackToDrawer(navigationRef); } return DrawerActions.closeDrawer(); } @@ -64,4 +88,5 @@ function pushDrawerRoute(screenName, params, navigationRef) { export default { pushDrawerRoute, + navigateBackToDrawer, }; diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index ff55c65c5e95..f1ac85fb93ac 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -114,39 +114,10 @@ function dismissModal(shouldOpenDrawer = false) { ? shouldOpenDrawer : false; - let isLeavingDrawerNavigator; - - // This should take us to the first view of the modal's stack navigator - navigationRef.current.dispatch((state) => { - // If this is a nested drawer navigator then we pop the screen and - // prevent calling goBack() as it's default behavior is to toggle open the active drawer - if (state.type === 'drawer') { - isLeavingDrawerNavigator = true; - return StackActions.pop(); - } - - // If there are multiple routes then we can pop back to the first route - if (state.routes.length > 1) { - return StackActions.popToTop(); - } - - // Otherwise, we are already on the last page of a modal so just do nothing here as goBack() will navigate us - // back to the screen we were on before we opened the modal. - return StackActions.pop(0); - }); - - if (isLeavingDrawerNavigator) { - return; + CustomActions.navigateBackToDrawer(navigationRef); + if (normalizedShouldOpenDrawer) { + openDrawer(); } - - // Navigate back to where we were before we launched the modal - goBack(shouldOpenDrawer); - - if (!normalizedShouldOpenDrawer) { - return; - } - - openDrawer(); } /** From aabd93fccf27a590853ed324a6bbdd12ad64f33a Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 19 Oct 2021 01:28:43 +0530 Subject: [PATCH 3/6] remove extra code --- src/pages/ReimbursementAccount/EnableStep.js | 1 - src/pages/ReimbursementAccount/ValidationStep.js | 10 ++-------- src/pages/workspace/travel/WorkspaceTravelVBAView.js | 2 -- 3 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/pages/ReimbursementAccount/EnableStep.js b/src/pages/ReimbursementAccount/EnableStep.js index 2196a306adae..a52572fa30fd 100644 --- a/src/pages/ReimbursementAccount/EnableStep.js +++ b/src/pages/ReimbursementAccount/EnableStep.js @@ -83,7 +83,6 @@ class EnableStep extends React.Component { title: translate('workspace.bankAccount.chatWithConcierge'), icon: ChatBubble, onPress: () => { - Navigation.dismissModal(); navigateToConciergeChat(); }, shouldShowRightIcon: true, diff --git a/src/pages/ReimbursementAccount/ValidationStep.js b/src/pages/ReimbursementAccount/ValidationStep.js index 1b0a108dd5b7..d8c2705bfdad 100644 --- a/src/pages/ReimbursementAccount/ValidationStep.js +++ b/src/pages/ReimbursementAccount/ValidationStep.js @@ -46,7 +46,6 @@ class ValidationStep extends React.Component { super(props); this.submit = this.submit.bind(this); - this.navigateToConcierge = this.navigateToConcierge.bind(this); this.state = { amount1: ReimbursementAccountUtils.getDefaultStateForField(props, 'amount1', ''), @@ -150,11 +149,6 @@ class ValidationStep extends React.Component { return value; } - navigateToConcierge() { - Navigation.dismissModal(); - navigateToConciergeChat(); - } - render() { const state = lodashGet(this.props, 'reimbursementAccount.achData.state'); @@ -182,7 +176,7 @@ class ValidationStep extends React.Component { {' '} {this.props.translate('common.please')} {' '} - + {this.props.translate('common.contactUs')} . @@ -237,7 +231,7 @@ class ValidationStep extends React.Component { menuItems={[{ title: this.props.translate('validationStep.letsChatCTA'), icon: ChatBubble, - onPress: this.navigateToConcierge, + onPress: navigateToConciergeChat, shouldShowRightIcon: true, }]} > diff --git a/src/pages/workspace/travel/WorkspaceTravelVBAView.js b/src/pages/workspace/travel/WorkspaceTravelVBAView.js index 0d1ea8bef7de..3f9d450367b2 100644 --- a/src/pages/workspace/travel/WorkspaceTravelVBAView.js +++ b/src/pages/workspace/travel/WorkspaceTravelVBAView.js @@ -13,7 +13,6 @@ import {RocketOrange} from '../../../components/Icon/Illustrations'; import WorkspaceSection from '../WorkspaceSection'; import {openExternalLink, openOldDotLink} from '../../../libs/actions/Link'; import {navigateToConciergeChat} from '../../../libs/actions/Report'; -import Navigation from '../../../libs/Navigation/Navigation'; const propTypes = { ...withLocalizePropTypes, @@ -34,7 +33,6 @@ const WorkspaceTravelVBAView = ({translate}) => ( { title: translate('workspace.travel.bookTravelWithConcierge'), onPress: () => { - Navigation.dismissModal(); navigateToConciergeChat(); }, icon: Concierge, From 5cd84504bef405c0d6bfc2fbf585fda7bc5e6dc8 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 19 Oct 2021 01:30:28 +0530 Subject: [PATCH 4/6] refactor: About Page --- src/pages/settings/AboutPage.js | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/src/pages/settings/AboutPage.js b/src/pages/settings/AboutPage.js index 14c3a1950a11..d95287368169 100644 --- a/src/pages/settings/AboutPage.js +++ b/src/pages/settings/AboutPage.js @@ -1,7 +1,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import {View, ScrollView} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; import ROUTES from '../../ROUTES'; @@ -17,27 +16,17 @@ import { } from '../../components/Icon/Expensicons'; import ScreenWrapper from '../../components/ScreenWrapper'; import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize'; -import compose from '../../libs/compose'; import MenuItem from '../../components/MenuItem'; import Logo from '../../../assets/images/new-expensify.svg'; import {version} from '../../../package.json'; -import {fetchOrCreateChatReport} from '../../libs/actions/Report'; -import ONYXKEYS from '../../ONYXKEYS'; +import {navigateToConciergeChat} from '../../libs/actions/Report'; import {openExternalLink} from '../../libs/actions/Link'; const propTypes = { - /** Onyx Props */ - - /** Session info for the currently logged in user. */ - session: PropTypes.shape({ - /** Currently logged in user email */ - email: PropTypes.string, - }).isRequired, - ...withLocalizePropTypes, }; -const AboutPage = ({translate, session}) => { +const AboutPage = ({translate}) => { const menuItems = [ { translationKey: 'initialSettingsPage.aboutPage.appDownloadLinks', @@ -65,9 +54,7 @@ const AboutPage = ({translate, session}) => { { translationKey: 'initialSettingsPage.aboutPage.reportABug', icon: Bug, - action: () => { - fetchOrCreateChatReport([session.email, CONST.EMAIL.CONCIERGE], true); - }, + action: navigateToConciergeChat, }, ]; @@ -159,11 +146,4 @@ const AboutPage = ({translate, session}) => { AboutPage.propTypes = propTypes; AboutPage.displayName = 'AboutPage'; -export default compose( - withLocalize, - withOnyx({ - session: { - key: () => ONYXKEYS.SESSION, - }, - }), -)(AboutPage); +export default withLocalize(AboutPage); From 432b542fd4e5c9131cb4c55527ca532fbd71fa90 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 19 Oct 2021 02:13:48 +0530 Subject: [PATCH 5/6] removed Extra import --- src/pages/settings/AboutPage.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/settings/AboutPage.js b/src/pages/settings/AboutPage.js index d95287368169..c88921b5b7e4 100644 --- a/src/pages/settings/AboutPage.js +++ b/src/pages/settings/AboutPage.js @@ -1,5 +1,4 @@ import React from 'react'; -import PropTypes from 'prop-types'; import {View, ScrollView} from 'react-native'; import HeaderWithCloseButton from '../../components/HeaderWithCloseButton'; import Navigation from '../../libs/Navigation/Navigation'; From 9cee8d358a7e9e7c4bfb80c1f7cf4a6bdedc49aa Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Tue, 19 Oct 2021 02:14:31 +0530 Subject: [PATCH 6/6] refactor --- src/libs/Navigation/CustomActions.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/libs/Navigation/CustomActions.js b/src/libs/Navigation/CustomActions.js index 7b822acd8d96..405252d224cd 100644 --- a/src/libs/Navigation/CustomActions.js +++ b/src/libs/Navigation/CustomActions.js @@ -5,15 +5,15 @@ import lodashGet from 'lodash/get'; * Go back to the Main Drawer * @param {Object} navigationRef */ -function navigateBackToDrawer(navigationRef) { - let isLeavingDrawerNavigator = false; +function navigateBackToRootDrawer(navigationRef) { + let isLeavingNestedDrawerNavigator = false; // This should take us to the first view of the modal's stack navigator navigationRef.current.dispatch((state) => { // If this is a nested drawer navigator then we pop the screen and // prevent calling goBack() as it's default behavior is to toggle open the active drawer if (state.type === 'drawer') { - isLeavingDrawerNavigator = true; + isLeavingNestedDrawerNavigator = true; return StackActions.pop(); } @@ -27,7 +27,7 @@ function navigateBackToDrawer(navigationRef) { return StackActions.pop(0); }); - if (isLeavingDrawerNavigator) { + if (isLeavingNestedDrawerNavigator) { return; } @@ -60,7 +60,7 @@ function pushDrawerRoute(screenName, params, navigationRef) { if (activeReportID === params.reportID) { if (state.type !== 'drawer') { - navigateBackToDrawer(navigationRef); + navigateBackToRootDrawer(navigationRef); } return DrawerActions.closeDrawer(); } @@ -88,5 +88,5 @@ function pushDrawerRoute(screenName, params, navigationRef) { export default { pushDrawerRoute, - navigateBackToDrawer, + navigateBackToDrawer: navigateBackToRootDrawer, };