navActions: Stop dispatching navigateBack() via Redux.

Instead, dispatch it via our recently added `NavigationService`.

Author: chrisbobbe

src/emoji/EmojiPickerScreen.js

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import { FlatList } from 'react-native';
 import type { NavigationStackProp, NavigationStateRoute } from 'react-navigation-stack';
 
+import NavigationService from '../nav/NavigationService';
 import * as api from '../api';
 import { unicodeCodeByName } from './codePointMap';
 import { Screen } from '../common';
@@ -57,12 +58,12 @@ class EmojiPickerScreen extends PureComponent<Props, State> {
   };
 
   addReaction = (emojiName: string) => {
-    const { auth, dispatch, navigation } = this.props;
+    const { auth, navigation } = this.props;
     const { messageId } = navigation.state.params;
 
     const { reactionType, emojiCode } = this.getReactionTypeAndCode(emojiName);
     api.emojiReactionAdd(auth, messageId, reactionType, emojiCode, emojiName);
-    dispatch(navigateBack());
+    NavigationService.dispatch(navigateBack());
   };
 
   render() {

src/lightbox/Lightbox.js

@@ -5,6 +5,7 @@ import { View, Dimensions, Easing } from 'react-native';
 import PhotoView from 'react-native-photo-view';
 import { connectActionSheet } from '@expo/react-native-action-sheet';
 
+import NavigationService from '../nav/NavigationService';
 import type { Auth, Dispatch, Message } from '../types';
 import { connect } from '../react-redux';
 import type { ShowActionSheetWithOptions } from '../message/messageActionSheet';
@@ -79,8 +80,7 @@ class Lightbox extends PureComponent<Props, State> {
   };
 
   handlePressBack = () => {
-    const { dispatch } = this.props;
-    dispatch(navigateBack());
+    NavigationService.dispatch(navigateBack());
   };
 
   getAnimationProps = () => ({

src/nav/BackNavigationHandler.js

@@ -4,17 +4,13 @@ import { PureComponent } from 'react';
 import { BackHandler } from 'react-native';
 
 import NavigationService from './NavigationService';
-import type { Dispatch } from '../types';
-import { connect } from '../react-redux';
 import { navigateBack } from '../actions';
 
 type Props = $ReadOnly<{|
   children: React$Node,
-
-  dispatch: Dispatch,
 |}>;
 
-class BackNavigationHandler extends PureComponent<Props> {
+export default class BackNavigationHandler extends PureComponent<Props> {
   componentDidMount() {
     BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonPress);
   }
@@ -24,10 +20,9 @@ class BackNavigationHandler extends PureComponent<Props> {
   }
 
   handleBackButtonPress = () => {
-    const { dispatch } = this.props;
     const canGoBack = NavigationService.getState().index > 0;
     if (canGoBack) {
-      dispatch(navigateBack());
+      NavigationService.dispatch(navigateBack());
     }
     return canGoBack;
   };
@@ -36,5 +31,3 @@ class BackNavigationHandler extends PureComponent<Props> {
     return this.props.children;
   }
 }
-
-export default connect(state => ({}))(BackNavigationHandler);

src/nav/ChatNavBar.js

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 import Color from 'color';
 
+import NavigationService from './NavigationService';
 import type { Dispatch, Narrow, EditMessage } from '../types';
 import { LoadingBanner } from '../common';
 import { connect } from '../react-redux';
@@ -29,7 +30,7 @@ type Props = $ReadOnly<{|
 
 class ChatNavBar extends PureComponent<Props> {
   render() {
-    const { dispatch, backgroundColor, narrow, editMessage } = this.props;
+    const { backgroundColor, narrow, editMessage } = this.props;
     const color =
       backgroundColor === DEFAULT_TITLE_BACKGROUND_COLOR
         ? BRAND_COLOR
@@ -63,7 +64,7 @@ class ChatNavBar extends PureComponent<Props> {
             name="arrow-left"
             color={color}
             onPress={() => {
-              dispatch(navigateBack());
+              NavigationService.dispatch(navigateBack());
             }}
           />
           <Title color={color} narrow={narrow} editMessage={editMessage} />

src/nav/ModalNavBar.js

@@ -3,17 +3,16 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { Dispatch, LocalizableText } from '../types';
+import NavigationService from './NavigationService';
+import type { LocalizableText } from '../types';
 import type { ThemeData } from '../styles';
 import styles, { ThemeContext, NAVBAR_SIZE } from '../styles';
-import { connect } from '../react-redux';
 
 import Label from '../common/Label';
 import NavButton from './NavButton';
 import { navigateBack } from '../actions';
 
 type Props = $ReadOnly<{|
-  dispatch: Dispatch,
   canGoBack: boolean,
   title: LocalizableText,
 |}>;
@@ -23,7 +22,7 @@ class ModalNavBar extends PureComponent<Props> {
   context: ThemeData;
 
   render() {
-    const { dispatch, canGoBack, title } = this.props;
+    const { canGoBack, title } = this.props;
     const textStyle = [
       styles.navTitle,
       canGoBack ? { marginRight: NAVBAR_SIZE } : { marginLeft: 16 },
@@ -46,7 +45,7 @@ class ModalNavBar extends PureComponent<Props> {
           <NavButton
             name="arrow-left"
             onPress={() => {
-              dispatch(navigateBack());
+              NavigationService.dispatch(navigateBack());
             }}
           />
         )}
@@ -58,4 +57,4 @@ class ModalNavBar extends PureComponent<Props> {
   }
 }
 
-export default connect<{||}, _, _>()(ModalNavBar);
+export default ModalNavBar;

src/nav/ModalSearchNavBar.js

@@ -2,16 +2,14 @@
 import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { Dispatch } from '../types';
+import NavigationService from './NavigationService';
 import type { ThemeData } from '../styles';
 import { ThemeContext, NAVBAR_SIZE } from '../styles';
-import { connect } from '../react-redux';
 import SearchInput from '../common/SearchInput';
 import NavButton from './NavButton';
 import { navigateBack } from '../actions';
 
 type Props = $ReadOnly<{|
-  dispatch: Dispatch,
   autoFocus: boolean,
   searchBarOnChange: (text: string) => void,
   canGoBack: boolean,
@@ -26,7 +24,7 @@ class ModalSearchNavBar extends PureComponent<Props> {
   };
 
   render() {
-    const { dispatch, autoFocus, searchBarOnChange, canGoBack } = this.props;
+    const { autoFocus, searchBarOnChange, canGoBack } = this.props;
     return (
       <View
         style={{
@@ -42,7 +40,7 @@ class ModalSearchNavBar extends PureComponent<Props> {
           <NavButton
             name="arrow-left"
             onPress={() => {
-              dispatch(navigateBack());
+              NavigationService.dispatch(navigateBack());
             }}
           />
         )}
@@ -53,4 +51,4 @@ class ModalSearchNavBar extends PureComponent<Props> {
   }
 }
 
-export default connect<{||}, _, _>()(ModalSearchNavBar);
+export default ModalSearchNavBar;

src/reactions/MessageReactionList.js

@@ -5,6 +5,7 @@ import { createAppContainer } from 'react-navigation';
 import type { NavigationStackProp, NavigationStateRoute } from 'react-navigation-stack';
 import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
 
+import NavigationService from '../nav/NavigationService';
 import * as logging from '../utils/logging';
 import ReactionUserList from './ReactionUserList';
 import { connect } from '../react-redux';
@@ -146,7 +147,7 @@ class MessageReactionList extends PureComponent<Props> {
     if (prevProps.message !== undefined && this.props.message === undefined) {
       // The message was present, but got purged (currently only caused by a
       // REALM_INIT following a dead event queue), so go back.
-      this.props.dispatch(navigateBack());
+      NavigationService.dispatch(navigateBack());
     }
   }
 

src/sharing/ShareToPm.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { View, Image, ScrollView, Modal, BackHandler } from 'react-native';
 import type { NavigationTabProp, NavigationStateRoute } from 'react-navigation-tabs';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch, SharedData, User, Auth, GetText } from '../types';
 import { createStyleSheet } from '../styles';
 import { TranslationContext } from '../boot/TranslationProvider';
@@ -114,9 +115,7 @@ class ShareToPm extends React.Component<Props, State> {
   };
 
   finishShare = () => {
-    const { dispatch } = this.props;
-
-    dispatch(navigateBack());
+    NavigationService.dispatch(navigateBack());
     BackHandler.exitApp();
   };
 

src/sharing/ShareToStream.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { View, Image, ScrollView, BackHandler } from 'react-native';
 import type { NavigationTabProp, NavigationStateRoute } from 'react-navigation-tabs';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch, SharedData, Subscription, Auth, GetText } from '../types';
 import { createStyleSheet } from '../styles';
 import { TranslationContext } from '../boot/TranslationProvider';
@@ -137,9 +138,7 @@ class ShareToStream extends React.Component<Props, State> {
   };
 
   finishShare = () => {
-    const { dispatch } = this.props;
-
-    dispatch(navigateBack());
+    NavigationService.dispatch(navigateBack());
     BackHandler.exitApp();
   };
 

src/streams/CreateStreamScreen.js

@@ -2,6 +2,7 @@
 import React, { PureComponent } from 'react';
 import type { NavigationStackProp, NavigationStateRoute } from 'react-navigation-stack';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { createNewStream, navigateBack } from '../actions';
@@ -25,7 +26,7 @@ class CreateStreamScreen extends PureComponent<Props> {
     const { dispatch, ownEmail } = this.props;
 
     dispatch(createNewStream(name, description, [ownEmail], isPrivate));
-    dispatch(navigateBack());
+    NavigationService.dispatch(navigateBack());
   };
 
   render() {