topic edit modal [nfc]: Provide topic modal Context hook to children.

The useTopicModalHandler is called normally in TopicItem and TitleStream.
In order to deliver the callbacks to the action sheets in MessageList, the context hook
is called in ChatScreen and a bit of prop-drilling is performed.

Author: Leslie Ngo

src/action-sheets/index.js

@@ -77,6 +77,12 @@ type TopicArgs = {
   zulipFeatureLevel: number,
   dispatch: Dispatch,
   _: GetText,
+  startEditTopic: (
+    streamId: number,
+    topic: string,
+    streamsById: Map<number, Stream>,
+    _: GetText,
+  ) => void,
   ...
 };
 
@@ -251,6 +257,14 @@ const toggleResolveTopic = async ({ auth, streamId, topic, _, streams, zulipFeat
   });
 };
 
+const editTopic = {
+  title: 'Edit topic',
+  errorMessage: 'Failed to resolve topic',
+  action: ({ streamId, topic, streams, _, startEditTopic }) => {
+    startEditTopic(streamId, topic, streams, _);
+  },
+};
+
 const resolveTopic = {
   title: 'Resolve topic',
   errorMessage: 'Failed to resolve topic',
@@ -505,6 +519,7 @@ export const constructTopicActionButtons = (args: {|
   if (unreadCount > 0) {
     buttons.push(markTopicAsRead);
   }
+  buttons.push(editTopic);
   if (isTopicMuted(streamId, topic, mute)) {
     buttons.push(unmuteTopic);
   } else {
@@ -666,6 +681,12 @@ export const showTopicActionSheet = (args: {|
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   callbacks: {|
     dispatch: Dispatch,
+    startEditTopic: (
+      streamId: number,
+      topic: string,
+      streamsById: Map<number, Stream>,
+      _: GetText,
+    ) => void,
     _: GetText,
   |},
   backgroundData: $ReadOnly<{

src/chat/ChatScreen.js

@@ -30,6 +30,7 @@ import { showErrorAlert } from '../utils/info';
 import { TranslationContext } from '../boot/TranslationProvider';
 import * as api from '../api';
 import { useConditionalEffect } from '../reactUtils';
+import { useTopicModalHandler } from '../boot/TopicModalProvider';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -127,6 +128,7 @@ const useMessagesWithFetch = args => {
 export default function ChatScreen(props: Props): Node {
   const { route, navigation } = props;
   const { backgroundColor } = React.useContext(ThemeContext);
+  const { startEditTopic } = useTopicModalHandler();
 
   const { narrow, editMessage } = route.params;
   const setEditMessage = useCallback(
@@ -221,6 +223,7 @@ export default function ChatScreen(props: Props): Node {
               }
               showMessagePlaceholders={showMessagePlaceholders}
               startEditMessage={setEditMessage}
+              startEditTopic={startEditTopic}
             />
           );
         }

src/streams/TopicItem.js

@@ -25,6 +25,7 @@ import {
 import { getMute } from '../mute/muteModel';
 import { getUnread } from '../unread/unreadModel';
 import { getOwnUserRole } from '../permissionSelectors';
+import { useTopicModalHandler } from '../boot/TopicModalProvider';
 
 const componentStyles = createStyleSheet({
   selectedRow: {
@@ -70,6 +71,7 @@ export default function TopicItem(props: Props): Node {
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
   const dispatch = useDispatch();
+  const startEditTopic = useTopicModalHandler();
   const backgroundData = useSelector(state => ({
     auth: getAuth(state),
     mute: getMute(state),
@@ -88,7 +90,7 @@ export default function TopicItem(props: Props): Node {
       onLongPress={() => {
         showTopicActionSheet({
           showActionSheetWithOptions,
-          callbacks: { dispatch, _ },
+          callbacks: { dispatch, startEditTopic, _ },
           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 { useTopicModalHandler } from '../boot/TopicModalProvider';
 
 type Props = $ReadOnly<{|
   narrow: Narrow,
@@ -67,6 +68,7 @@ export default function TitleStream(props: Props): Node {
   const showActionSheetWithOptions: ShowActionSheetWithOptions =
     useActionSheet().showActionSheetWithOptions;
   const _ = useContext(TranslationContext);
+  const { startEditTopic } = useTopicModalHandler();
 
   return (
     <TouchableWithoutFeedback
@@ -75,7 +77,7 @@ export default function TitleStream(props: Props): Node {
           ? () => {
               showTopicActionSheet({
                 showActionSheetWithOptions,
-                callbacks: { dispatch, _ },
+                callbacks: { dispatch, startEditTopic, _ },
                 backgroundData,
                 streamId: stream.stream_id,
                 topic: topicOfNarrow(narrow),

src/webview/MessageList.js

@@ -14,6 +14,7 @@ import type {
   MessageListElement,
   UserOrBot,
   EditMessage,
+  Stream,
 } from '../types';
 import { assumeSecretlyGlobalState } from '../reduxTypes';
 import { connect } from '../react-redux';
@@ -45,6 +46,12 @@ type OuterProps = $ReadOnly<{|
   initialScrollMessageId: number | null,
   showMessagePlaceholders: boolean,
   startEditMessage: (editMessage: EditMessage) => void,
+  startEditTopic: (
+    streamId: number,
+    topic: string,
+    streamsById: Map<number, Stream>,
+    _: GetText,
+  ) => void,
 |}>;
 
 type SelectorProps = {|
@@ -71,6 +78,14 @@ export type Props = $ReadOnly<{|
 
   // From `withGetText`.
   _: GetText,
+
+  // From 'TopicModalProvider'.
+  startEditTopic: (
+    streamId: number,
+    topic: string,
+    streamsById: Map<number, Stream>,
+    _: GetText,
+  ) => void,
 |}>;
 
 /**
@@ -153,6 +168,7 @@ class MessageListInner extends Component<Props> {
       doNotMarkMessagesAsRead,
       _,
     } = this.props;
+
     const contentHtml = messageListElementsForShownMessages
       .map(element =>
         messageListElementHtml({
@@ -291,7 +307,6 @@ const MessageList: ComponentType<OuterProps> = connect<SelectorProps, _, _>(
     // they should probably turn into a `connectGlobal` call.
     const globalSettings = getGlobalSettings(assumeSecretlyGlobalState(state));
     const debug = getDebug(assumeSecretlyGlobalState(state));
-
     return {
       backgroundData: getBackgroundData(state, globalSettings, debug),
       fetching: getFetchingForNarrow(state, props.narrow),

src/webview/handleOutboundEvents.js

@@ -4,7 +4,7 @@ import { Clipboard, Alert } from 'react-native';
 import * as NavigationService from '../nav/NavigationService';
 import * as api from '../api';
 import config from '../config';
-import type { Dispatch, GetText, Message, Narrow, Outbox, EditMessage, UserId } from '../types';
+import type { Dispatch, GetText, Message, Narrow, Outbox, EditMessage, UserId, Stream } from '../types';
 import type { BackgroundData } from './backgroundData';
 import type { ShowActionSheetWithOptions } from '../action-sheets';
 import type { JSONableDict } from '../utils/jsonable';
@@ -169,6 +169,12 @@ type Props = $ReadOnly<{
   doNotMarkMessagesAsRead: boolean,
   showActionSheetWithOptions: ShowActionSheetWithOptions,
   startEditMessage: (editMessage: EditMessage) => void,
+  startEditTopic: (
+    streamId: number,
+    topic: string,
+    streamsById: Map<number, Stream>,
+    _: GetText,
+  ) => void,
   ...
 }>;
 
@@ -222,12 +228,12 @@ const handleLongPress = (
   if (!message) {
     return;
   }
-  const { dispatch, showActionSheetWithOptions, backgroundData, narrow, startEditMessage } = props;
+  const { dispatch, showActionSheetWithOptions, backgroundData, narrow, startEditMessage, startEditTopic } = props;
   if (target === 'header') {
     if (message.type === 'stream') {
       showTopicActionSheet({
         showActionSheetWithOptions,
-        callbacks: { dispatch, _ },
+        callbacks: { dispatch, startEditTopic, _ },
         backgroundData,
         streamId: message.stream_id,
         topic: message.subject,