action-sheets: Plumb navigation down to button args (PmArgs, etc.)

This way, we can stop using NavigationService in these action
sheets, and instead use `navigation.push` calls. React Navigation
upstream recommends avoiding the NavigationService approach where
possible, and this goes in that direction; see more in zulip#5408.

Author: chrisbobbe

src/action-sheets/index.js

@@ -54,6 +54,7 @@ import { reactionTypeFromEmojiType } from '../emoji/data';
 import { Role, type RoleT } from '../api/permissionsTypes';
 import { roleIsAtLeast } from '../permissionSelectors';
 import { kNotificationBotEmail } from '../api/constants';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 // TODO really this belongs in a libdef.
 export type ShowActionSheetWithOptions = (
@@ -67,6 +68,7 @@ type StreamArgs = {
   subscriptions: Map<number, Subscription>,
   streams: Map<number, Stream>,
   dispatch: Dispatch,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
@@ -79,12 +81,14 @@ type TopicArgs = {
   streams: Map<number, Stream>,
   zulipFeatureLevel: number,
   dispatch: Dispatch,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
 
 type PmArgs = {
   pmKeyRecipients: PmKeyRecipients,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
@@ -98,9 +102,10 @@ type MessageArgs = {
   streams: Map<number, Stream>,
   zulipFeatureLevel: number,
   dispatch: Dispatch,
-  _: GetText,
   startEditMessage: (editMessage: EditMessage) => void,
   setDoNotMarkMessagesAsRead: boolean => void,
+  navigation: AppNavigationMethods,
+  _: GetText,
   ...
 };
 
@@ -791,6 +796,7 @@ export const showMessageActionSheet = (args: {|
   callbacks: {|
     dispatch: Dispatch,
     startEditMessage: (editMessage: EditMessage) => void,
+    navigation: AppNavigationMethods,
     _: GetText,
     setDoNotMarkMessagesAsRead: boolean => void,
   |},
@@ -820,6 +826,7 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{
@@ -851,6 +858,7 @@ export const showStreamActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{
@@ -876,6 +884,7 @@ export const showStreamActionSheet = (args: {|
 export const showPmConversationActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{ ownUser: User, allUsersById: Map<UserId, UserOrBot>, ... }>,

src/streams/StreamItem.js

@@ -33,6 +33,7 @@ import UnreadCount from '../common/UnreadCount';
 import { foregroundColorFromBackground } from '../utils/color';
 import { IconPlus, IconDone } from '../common/Icons';
 import StreamIcon from './StreamIcon';
+import { useNavigation } from '../react-navigation';
 
 const componentStyles = createStyleSheet({
   description: {
@@ -114,6 +115,7 @@ export default function StreamItem(props: Props): Node {
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
+  const navigation = useNavigation();
   const dispatch = useDispatch();
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
@@ -144,7 +146,7 @@ export default function StreamItem(props: Props): Node {
       onLongPress={() => {
         showStreamActionSheet({
           showActionSheetWithOptions,
-          callbacks: { dispatch, _ },
+          callbacks: { dispatch, navigation, _ },
           backgroundData,
           streamId,
         });

src/streams/TopicItem.js

@@ -25,6 +25,7 @@ import {
 import { getMute } from '../mute/muteModel';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
+import { useNavigation } from '../react-navigation';
 
 const componentStyles = createStyleSheet({
   selectedRow: {
@@ -69,6 +70,7 @@ export default function TopicItem(props: Props): Node {
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
+  const navigation = useNavigation();
   const dispatch = useDispatch();
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
@@ -88,7 +90,7 @@ export default function TopicItem(props: Props): Node {
       onLongPress={() => {
         showTopicActionSheet({
           showActionSheetWithOptions,
-          callbacks: { dispatch, _ },
+          callbacks: { dispatch, navigation, _ },
           backgroundData,
           streamId,
           topic: name,

src/title/TitleStream.js

@@ -27,6 +27,7 @@ import { showStreamActionSheet, showTopicActionSheet } from '../action-sheets';
 import type { ShowActionSheetWithOptions } from '../action-sheets';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
+import { useNavigation } from '../react-navigation';
 
 type Props = $ReadOnly<{|
   narrow: Narrow,
@@ -50,6 +51,7 @@ const componentStyles = createStyleSheet({
 export default function TitleStream(props: Props): Node {
   const { narrow, color } = props;
   const dispatch = useDispatch();
+  const navigation = useNavigation();
   const stream = useSelector(state => getStreamInNarrow(state, narrow));
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
@@ -75,7 +77,7 @@ export default function TitleStream(props: Props): Node {
           ? () => {
               showTopicActionSheet({
                 showActionSheetWithOptions,
-                callbacks: { dispatch, _ },
+                callbacks: { dispatch, navigation, _ },
                 backgroundData,
                 streamId: stream.stream_id,
                 topic: topicOfNarrow(narrow),
@@ -84,7 +86,7 @@ export default function TitleStream(props: Props): Node {
           : () => {
               showStreamActionSheet({
                 showActionSheetWithOptions,
-                callbacks: { dispatch, _ },
+                callbacks: { dispatch, navigation, _ },
                 backgroundData,
                 streamId: stream.stream_id,
               });

src/webview/MessageList.js

@@ -19,6 +19,7 @@ import type {
 } from '../types';
 import { ThemeContext } from '../styles';
 import { useSelector, useDispatch, useGlobalSelector } from '../react-redux';
+import { useNavigation } from '../react-navigation';
 import {
   getCurrentTypingUsers,
   getDebug,
@@ -246,6 +247,8 @@ export default function MessageList(outerProps: OuterProps): React.Node {
 
   const props = useMessageListProps(outerProps);
 
+  const navigation = useNavigation();
+
   const theme = React.useContext(ThemeContext);
 
   const webviewRef = React.useRef<React$ElementRef<typeof WebView> | null>(null);
@@ -310,7 +313,7 @@ export default function MessageList(outerProps: OuterProps): React.Node {
         // (The distinction may not matter much here in practice.  But a
         // nice bonus of this way is that we avoid re-renders of
         // SinglePageWebView, potentially a helpful optimization.)
-        handleWebViewOutboundEvent(propsRef.current, eventData);
+        handleWebViewOutboundEvent(propsRef.current, navigation, eventData);
       }
     },
     [sendInboundEvents],

src/webview/handleOutboundEvents.js

@@ -29,6 +29,7 @@ import {
 import { ensureUnreachable } from '../types';
 import { base64Utf8Decode } from '../utils/encoding';
 import type { Props } from './MessageList';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 type WebViewOutboundEventReady = {|
   type: 'ready',
@@ -206,8 +207,9 @@ const handleLongPress = (args: {|
   target: 'message' | 'header' | 'link',
   messageId: number,
   href: string | null,
+  navigation: AppNavigationMethods,
 |}) => {
-  const { props, target, messageId, href } = args;
+  const { props, target, messageId, href, navigation } = args;
 
   if (href !== null) {
     const url = new URL(href, props.backgroundData.auth.realm).toString();
@@ -234,31 +236,35 @@ const handleLongPress = (args: {|
     if (message.type === 'stream') {
       showTopicActionSheet({
         showActionSheetWithOptions,
-        callbacks: { dispatch, _ },
+        callbacks: { dispatch, navigation, _ },
         backgroundData,
         streamId: message.stream_id,
         topic: message.subject,
       });
     } else if (message.type === 'private') {
       showPmConversationActionSheet({
         showActionSheetWithOptions,
-        callbacks: { _ },
+        callbacks: { navigation, _ },
         backgroundData,
         pmKeyRecipients: pmKeyRecipientsFromMessage(message, backgroundData.ownUser.user_id),
       });
     }
   } else if (target === 'message') {
     showMessageActionSheet({
       showActionSheetWithOptions,
-      callbacks: { dispatch, startEditMessage, setDoNotMarkMessagesAsRead, _ },
+      callbacks: { dispatch, startEditMessage, setDoNotMarkMessagesAsRead, navigation, _ },
       backgroundData,
       message,
       narrow,
     });
   }
 };
 
-export const handleWebViewOutboundEvent = (props: Props, event: WebViewOutboundEvent) => {
+export const handleWebViewOutboundEvent = (
+  props: Props,
+  navigation: AppNavigationMethods,
+  event: WebViewOutboundEvent,
+) => {
   switch (event.type) {
     case 'ready':
       // handled by caller
@@ -288,6 +294,7 @@ export const handleWebViewOutboundEvent = (props: Props, event: WebViewOutboundE
         target: event.target,
         messageId: event.messageId,
         href: event.href,
+        navigation,
       });
       break;