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

@@ -53,6 +53,7 @@ import { getStreamTopicUrl, getStreamUrl } from '../utils/internalLinks';
 import { reactionTypeFromEmojiType } from '../emoji/data';
 import { Role, type RoleT } from '../api/permissionsTypes';
 import { roleIsAtLeast } from '../permissionSelectors';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 // TODO really this belongs in a libdef.
 export type ShowActionSheetWithOptions = (
@@ -66,6 +67,7 @@ type StreamArgs = {
   subscriptions: Map<number, Subscription>,
   streams: Map<number, Stream>,
   dispatch: Dispatch,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
@@ -78,12 +80,14 @@ type TopicArgs = {
   streams: Map<number, Stream>,
   zulipFeatureLevel: number,
   dispatch: Dispatch,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
 
 type PmArgs = {
   pmKeyRecipients: PmKeyRecipients,
+  navigation: AppNavigationMethods,
   _: GetText,
   ...
 };
@@ -93,8 +97,9 @@ type MessageArgs = {
   ownUser: User,
   message: Message | Outbox,
   dispatch: Dispatch,
-  _: GetText,
   startEditMessage: (editMessage: EditMessage) => void,
+  navigation: AppNavigationMethods,
+  _: GetText,
   ...
 };
 
@@ -661,6 +666,7 @@ export const showMessageActionSheet = (args: {|
   callbacks: {|
     dispatch: Dispatch,
     startEditMessage: (editMessage: EditMessage) => void,
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{
@@ -685,6 +691,7 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{
@@ -716,6 +723,7 @@ export const showStreamActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{
@@ -741,6 +749,7 @@ export const showStreamActionSheet = (args: {|
 export const showPmConversationActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
+    navigation: AppNavigationMethods,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{ ownUser: User, allUsersById: Map<UserId, UserOrBot>, ... }>,

src/chat/ChatScreen.js

@@ -221,6 +221,7 @@ export default function ChatScreen(props: Props): Node {
               }
               showMessagePlaceholders={showMessagePlaceholders}
               startEditMessage={setEditMessage}
+              navigation={navigation}
             />
           );
         }

src/search/SearchMessagesCard.js

@@ -9,6 +9,7 @@ import { createStyleSheet } from '../styles';
 import LoadingIndicator from '../common/LoadingIndicator';
 import SearchEmptyState from '../common/SearchEmptyState';
 import MessageList from '../webview/MessageList';
+import { useNavigation } from '../react-navigation';
 
 const styles = createStyleSheet({
   results: {
@@ -24,6 +25,7 @@ type Props = $ReadOnly<{|
 
 export default function SearchMessagesCard(props: Props): Node {
   const { isFetching, messages } = props;
+  const navigation = useNavigation();
 
   if (isFetching) {
     // Display loading indicator only if there are no messages to
@@ -55,6 +57,7 @@ export default function SearchMessagesCard(props: Props): Node {
         // TODO: handle editing a message from the search results,
         // or make this prop optional
         startEditMessage={() => undefined}
+        navigation={navigation}
       />
     </View>
   );

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

@@ -38,13 +38,17 @@ import { tryParseUrl } from '../utils/url';
 import { caseNarrow, isConversationNarrow } from '../utils/narrow';
 import { type BackgroundData, getBackgroundData } from './backgroundData';
 import { ensureUnreachable } from '../generics';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 type OuterProps = $ReadOnly<{|
   narrow: Narrow,
   messages: $ReadOnlyArray<Message | Outbox>,
   initialScrollMessageId: number | null,
   showMessagePlaceholders: boolean,
   startEditMessage: (editMessage: EditMessage) => void,
+
+  // TODO: Could instead use useNavigation once this is a function component
+  navigation: AppNavigationMethods,
 |}>;
 
 type SelectorProps = {|
@@ -128,7 +132,7 @@ class MessageListInner extends Component<Props> {
       this.unsentInboundEvents = [];
     } else {
       const { _ } = this.props;
-      handleWebViewOutboundEvent(this.props, _, eventData);
+      handleWebViewOutboundEvent(this.props, this.props.navigation, _, eventData);
     }
   };
 

src/webview/__tests__/generateInboundEvents-test.js

@@ -33,6 +33,12 @@ describe('generateInboundEvents', () => {
     ...baseSelectorProps,
     showActionSheetWithOptions: jest.fn(),
 
+    // $FlowFixMe[incompatible-type] - A stub; fill in where needed
+    // $FlowFixMe[prop-missing]
+    navigation: {
+      push: jest.fn(),
+      // etc., incomplete
+    },
     _: jest.fn(),
   });
 

src/webview/handleOutboundEvents.js

@@ -30,6 +30,7 @@ import {
 } from '../action-sheets';
 import { ensureUnreachable } from '../types';
 import { base64Utf8Decode } from '../utils/encoding';
+import type { AppNavigationMethods } from '../nav/AppNavigator';
 
 type WebViewOutboundEventReady = {|
   type: 'ready',
@@ -206,12 +207,14 @@ const handleImage = (props: Props, src: string, messageId: number) => {
 
 const handleLongPress = (args: {|
   props: Props,
-  _: GetText,
   target: 'message' | 'header' | 'link',
   messageId: number,
   href: string | null,
+
+  navigation: AppNavigationMethods,
+  _: GetText,
 |}) => {
-  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();
@@ -229,23 +232,23 @@ 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, _ },
+      callbacks: { dispatch, startEditMessage, navigation, _ },
       backgroundData,
       message,
       narrow,
@@ -255,6 +258,7 @@ const handleLongPress = (args: {|
 
 export const handleWebViewOutboundEvent = (
   props: Props,
+  navigation: AppNavigationMethods,
   _: GetText,
   event: WebViewOutboundEvent,
 ) => {
@@ -284,10 +288,11 @@ export const handleWebViewOutboundEvent = (
     case 'longPress':
       handleLongPress({
         props,
-        _,
         target: event.target,
         messageId: event.messageId,
         href: event.href,
+        navigation,
+        _,
       });
       break;