Merge pull request #5131 from parasharrajat/fix-navigation

fix: navigation for exisiting report screen

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 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') {
+            isLeavingNestedDrawerNavigator = 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 (isLeavingNestedDrawerNavigator) {
+        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,7 +60,7 @@ function pushDrawerRoute(screenName, params, navigationRef) {
 
         if (activeReportID === params.reportID) {
             if (state.type !== 'drawer') {
-                navigationRef.current.dispatch(StackActions.pop());
+                navigateBackToRootDrawer(navigationRef);
             }
             return DrawerActions.closeDrawer();
         }
@@ -52,4 +88,5 @@ function pushDrawerRoute(screenName, params, navigationRef) {
 
 export default {
     pushDrawerRoute,
+    navigateBackToDrawer: navigateBackToRootDrawer,
 };

src/libs/Navigation/Navigation.js

@@ -138,39 +138,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();
 }
 
 /**

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,

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')}
                             {' '}
-                            <TextLink onPress={this.navigateToConcierge}>
+                            <TextLink onPress={navigateToConciergeChat}>
                                 {this.props.translate('common.contactUs')}
                             </TextLink>
                             .
@@ -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,
                             }]}
                         >

src/pages/settings/AboutPage.js

@@ -1,7 +1,5 @@
 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 +15,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 +53,7 @@ const AboutPage = ({translate, session}) => {
         {
             translationKey: 'initialSettingsPage.aboutPage.reportABug',
             icon: Bug,
-            action: () => {
-                fetchOrCreateChatReport([session.email, CONST.EMAIL.CONCIERGE], true);
-            },
+            action: navigateToConciergeChat,
         },
     ];
 
@@ -159,11 +145,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);

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,