navActions: Stop dispatching all actions via Redux.

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

Add a few notes in `InitialNavigationDispatcher` about why we expect
`NavigationService` to be ready in time. We chose to do the initial
navigation here, rather than in a descendant of the
`NavigationService`'s `ref`fed component for those reasons [1].

[1] #4274 (comment)

Author: chrisbobbe

src/account-info/ProfileCard.js

@@ -3,6 +3,7 @@ import React, { PureComponent } from 'react';
 import { ScrollView, View } from 'react-native';
 import type { NavigationTabProp, NavigationStateRoute } from 'react-navigation-tabs';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch, User } from '../types';
 import { createStyleSheet } from '../styles';
 import { connect } from '../react-redux';
@@ -28,10 +29,9 @@ const styles = createStyleSheet({
   },
 });
 
-class SetStatusButton extends PureComponent<{| +dispatch: Dispatch |}> {
+class SetStatusButton extends PureComponent<{||}> {
   onPress = () => {
-    const { dispatch } = this.props;
-    dispatch(navigateToUserStatus());
+    NavigationService.dispatch(navigateToUserStatus());
   };
 
   render() {
@@ -41,9 +41,9 @@ class SetStatusButton extends PureComponent<{| +dispatch: Dispatch |}> {
   }
 }
 
-class SwitchAccountButton extends PureComponent<{| +dispatch: Dispatch |}> {
+class SwitchAccountButton extends PureComponent<{||}> {
   onPress = () => {
-    this.props.dispatch(navigateToAccountPicker());
+    NavigationService.dispatch(navigateToAccountPicker());
   };
 
   render() {
@@ -91,10 +91,10 @@ class ProfileCard extends PureComponent<Props> {
         <AccountDetails user={selfUserDetail} />
         <AwayStatusSwitch />
         <View style={styles.buttonRow}>
-          <SetStatusButton dispatch={this.props.dispatch} />
+          <SetStatusButton />
         </View>
         <View style={styles.buttonRow}>
-          <SwitchAccountButton dispatch={this.props.dispatch} />
+          <SwitchAccountButton />
           <LogoutButton dispatch={this.props.dispatch} />
         </View>
       </ScrollView>

src/account/AccountPickScreen.js

@@ -3,6 +3,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 { hasAuth, getAccountStatuses } from '../selectors';
@@ -32,7 +33,7 @@ class AccountPickScreen extends PureComponent<Props> {
         dispatch(accountSwitch(index));
       });
     } else {
-      dispatch(navigateToRealmScreen({ realm }));
+      NavigationService.dispatch(navigateToRealmScreen({ realm }));
     }
   };
 
@@ -53,7 +54,7 @@ class AccountPickScreen extends PureComponent<Props> {
   canGoBack = this.props.hasAuth;
 
   render() {
-    const { accounts, dispatch } = this.props;
+    const { accounts } = this.props;
 
     return (
       <Screen
@@ -74,7 +75,7 @@ class AccountPickScreen extends PureComponent<Props> {
           <ZulipButton
             text="Add new account"
             onPress={() => {
-              dispatch(navigateToRealmScreen());
+              NavigationService.dispatch(navigateToRealmScreen());
             }}
           />
         </Centerer>

src/account/accountActions.js

@@ -1,4 +1,5 @@
 /* @flow strict-local */
+import NavigationService from '../nav/NavigationService';
 import type { Action, Dispatch, GetState } from '../types';
 import {
   ACCOUNT_SWITCH,
@@ -16,7 +17,7 @@ const accountSwitchPlain = (index: number): Action => ({
 });
 
 export const accountSwitch = (index: number) => (dispatch: Dispatch, getState: GetState) => {
-  dispatch(resetToLoading());
+  NavigationService.dispatch(resetToLoading());
   dispatch(accountSwitchPlain(index));
 };
 
@@ -47,7 +48,7 @@ export const loginSuccess = (realm: URL, email: string, apiKey: string) => (
   dispatch: Dispatch,
   getState: GetState,
 ) => {
-  dispatch(resetToLoading());
+  NavigationService.dispatch(resetToLoading());
   dispatch(loginSuccessPlain(realm, email, apiKey));
 };
 
@@ -56,6 +57,6 @@ const logoutPlain = (): Action => ({
 });
 
 export const logout = () => async (dispatch: Dispatch, getState: GetState) => {
-  dispatch(resetToAccountPicker());
+  NavigationService.dispatch(resetToAccountPicker());
   dispatch(logoutPlain());
 };

src/compose/ComposeMenu.js

@@ -4,6 +4,7 @@ import { Platform, View } from 'react-native';
 import type { DocumentPickerResponse } from 'react-native-document-picker';
 import ImagePicker from 'react-native-image-picker';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch, Narrow } from '../types';
 import { connect } from '../react-redux';
 import { showErrorAlert } from '../utils/info';
@@ -154,7 +155,7 @@ class ComposeMenu extends PureComponent<Props> {
   });
 
   render() {
-    const { dispatch, expanded, insertVideoCallLink, onExpandContract } = this.props;
+    const { expanded, insertVideoCallLink, onExpandContract } = this.props;
     const numIcons =
       3 + (Platform.OS === 'android' ? 1 : 0) + (insertVideoCallLink !== null ? 1 : 0);
 
@@ -171,7 +172,7 @@ class ComposeMenu extends PureComponent<Props> {
               style={this.styles.composeMenuButton}
               size={24}
               onPress={() => {
-                dispatch(navigateToCreateGroup());
+                NavigationService.dispatch(navigateToCreateGroup());
               }}
             />
             {Platform.OS === 'android' && (

src/diagnostics/DiagnosticsScreen.js

@@ -4,9 +4,8 @@ import React, { PureComponent } from 'react';
 import type { NavigationStackProp, NavigationStateRoute } from 'react-navigation-stack';
 import { nativeApplicationVersion } from 'expo-application';
 
-import type { Dispatch } from '../types';
+import NavigationService from '../nav/NavigationService';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
 import { OptionButton, OptionDivider, Screen, RawLabel } from '../common';
 import {
   navigateToDebug,
@@ -28,45 +27,39 @@ type Props = $ReadOnly<{|
   // don't invoke it anywhere else at all), we know it gets the
   // `navigation` prop for free, with the stack-nav shape.
   navigation: NavigationStackProp<NavigationStateRoute>,
-
-  dispatch: Dispatch,
 |}>;
 
-class DiagnosticsScreen extends PureComponent<Props> {
+export default class DiagnosticsScreen extends PureComponent<Props> {
   render() {
-    const { dispatch } = this.props;
-
     return (
       <Screen title="Diagnostics">
         <RawLabel style={styles.versionLabel} text={`v${nativeApplicationVersion ?? '?.?.?'}`} />
         <OptionDivider />
         <OptionButton
           label="Variables"
           onPress={() => {
-            dispatch(navigateToVariables());
+            NavigationService.dispatch(navigateToVariables());
           }}
         />
         <OptionButton
           label="Timing"
           onPress={() => {
-            dispatch(navigateToTiming());
+            NavigationService.dispatch(navigateToTiming());
           }}
         />
         <OptionButton
           label="Storage"
           onPress={() => {
-            dispatch(navigateToStorage());
+            NavigationService.dispatch(navigateToStorage());
           }}
         />
         <OptionButton
           label="Debug"
           onPress={() => {
-            dispatch(navigateToDebug());
+            NavigationService.dispatch(navigateToDebug());
           }}
         />
       </Screen>
     );
   }
 }
-
-export default connect<{||}, _, _>()(DiagnosticsScreen);

src/main/HomeTab.js

@@ -4,6 +4,7 @@ import React, { PureComponent } from 'react';
 import { View } from 'react-native';
 import type { NavigationTabProp, NavigationStateRoute } from 'react-navigation-tabs';
 
+import NavigationService from '../nav/NavigationService';
 import type { Dispatch } from '../types';
 import { connect } from '../react-redux';
 import { HOME_NARROW, MENTIONED_NARROW, STARRED_NARROW } from '../utils/narrow';
@@ -65,7 +66,7 @@ class HomeTab extends PureComponent<Props> {
           <NavButton
             name="search"
             onPress={() => {
-              dispatch(navigateToSearch());
+              NavigationService.dispatch(navigateToSearch());
             }}
           />
         </View>

src/message/__tests__/messageActions-test.js

@@ -2,6 +2,8 @@
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
+import { navigateToChat } from '../../nav/navActions';
+import NavigationService from '../../nav/NavigationService';
 import { doNarrow } from '../messagesActions';
 import { streamNarrow } from '../../utils/narrow';
 import * as eg from '../../__tests__/lib/exampleData';
@@ -15,6 +17,8 @@ const streamNarrowObj = streamNarrow('some stream');
 describe('messageActions', () => {
   describe('doNarrow', () => {
     test('action to push to nav dispatched', () => {
+      NavigationService.dispatch = jest.fn();
+
       const store = mockStore<GlobalState, Action>(
         eg.reduxState({
           accounts: [eg.selfAccount],
@@ -24,11 +28,8 @@ describe('messageActions', () => {
       );
 
       store.dispatch(doNarrow(streamNarrowObj));
-      const actions = store.getActions();
 
-      expect(actions).toHaveLength(1);
-      const [action0] = actions;
-      expect(action0.type).toBe('Navigation/PUSH');
+      expect(NavigationService.dispatch).toHaveBeenCalledWith(navigateToChat(streamNarrowObj));
     });
   });
 });

src/message/fetchActions.js

@@ -1,4 +1,5 @@
 /* @flow strict-local */
+import NavigationService from '../nav/NavigationService';
 import type {
   Narrow,
   Dispatch,
@@ -173,7 +174,7 @@ export const initialFetchComplete = () => async (dispatch: Dispatch, getState: G
     // conditional accordingly, if we found out we're not depending on
     // the more general condition; see
     //   https://github.com/zulip/zulip-mobile/pull/4274#discussion_r505941875
-    dispatch(resetToMainTabs());
+    NavigationService.dispatch(resetToMainTabs());
   }
   dispatch(initialFetchCompletePlain());
 };

src/message/messageActionSheet.js

@@ -1,5 +1,7 @@
 /* @flow strict-local */
 import { Clipboard, Share, Alert } from 'react-native';
+
+import NavigationService from '../nav/NavigationService';
 import type {
   Auth,
   Dispatch,
@@ -185,13 +187,13 @@ shareMessage.title = 'Share';
 shareMessage.errorMessage = 'Failed to share message';
 
 const addReaction = ({ message, dispatch }) => {
-  dispatch(navigateToEmojiPicker(message.id));
+  NavigationService.dispatch(navigateToEmojiPicker(message.id));
 };
 addReaction.title = 'Add a reaction';
 addReaction.errorMessage = 'Failed to add reaction';
 
 const showReactions = ({ message, dispatch }) => {
-  dispatch(navigateToMessageReactionScreen(message.id));
+  NavigationService.dispatch(navigateToMessageReactionScreen(message.id));
 };
 showReactions.title = 'See who reacted';
 showReactions.errorMessage = 'Failed to show reactions';

src/message/messagesActions.js

@@ -1,4 +1,5 @@
 /* @flow strict-local */
+import NavigationService from '../nav/NavigationService';
 import type { Narrow, Dispatch, GetState } from '../types';
 import { getAuth, getUsersById } from '../selectors';
 import { getMessageIdFromLink, getNarrowFromLink } from '../utils/internalLinks';
@@ -18,7 +19,7 @@ export const doNarrow = (narrow: Narrow, anchor: number = FIRST_UNREAD_ANCHOR) =
   getState: GetState,
 ) => {
   // TODO: Use `anchor` to open the message list to a particular message.
-  dispatch(navigateToChat(narrow));
+  NavigationService.dispatch(navigateToChat(narrow));
 };
 
 export const messageLinkPress = (href: string) => async (