topic edit modal [nfc]: Add TopicModalProvider context component.

Contains visibility context and handler callback context.
Sets up context for modal handler to be called inside topic action sheets.

Author: Leslie Ngo

src/ZulipMobile.js

@@ -16,6 +16,7 @@ import CompatibilityChecker from './boot/CompatibilityChecker';
 import AppEventHandlers from './boot/AppEventHandlers';
 import { initializeSentry } from './sentry';
 import ZulipSafeAreaProvider from './boot/ZulipSafeAreaProvider';
+import TopicModalProvider from './boot/TopicModalProvider';
 
 initializeSentry();
 
@@ -55,9 +56,11 @@ export default function ZulipMobile(): Node {
               <AppEventHandlers>
                 <TranslationProvider>
                   <ThemeProvider>
-                    <ActionSheetProvider>
-                      <ZulipNavigationContainer />
-                    </ActionSheetProvider>
+                    <TopicModalProvider>
+                      <ActionSheetProvider>
+                        <ZulipNavigationContainer />
+                      </ActionSheetProvider>
+                    </TopicModalProvider>
                   </ThemeProvider>
                 </TranslationProvider>
               </AppEventHandlers>

src/boot/TopicModalProvider.js

@@ -0,0 +1,98 @@
+import React, {
+  createContext,
+  useState,
+  useMemo,
+  useCallback,
+  useContext }
+from 'react';
+import type { Context } from 'react';
+import { useSelector } from '../react-redux';
+import TopicEditModal from '../topics/TopicEditModal';
+import type { Stream, GetText } from '../types';
+import { fetchSomeMessageIdForConversation } from '../message/fetchActions';
+import { getAuth, getZulipFeatureLevel } from '../selectors';
+
+type Props = $ReadOnly<{|
+  children: Node,
+|}>;
+
+type TopicModalContext = $ReadOnly<{|
+  startEditTopic: (
+    streamId: number,
+    topic: string,
+    streamsById: Map<number, Stream>,
+    _: GetText,
+  ) => void,
+  closeEditTopicModal: () => void,
+|}>;
+
+const TopicModal: Context<TopicModalContext> = createContext();
+
+export const useTopicModalHandler = () => useContext(TopicModal);
+
+export default function TopicModalProvider(props: Props) {
+  const { children } = props;
+  const auth = useSelector(getAuth);
+  const zulipFeatureLevel = useSelector(getZulipFeatureLevel);
+  const [topicModalState, setTopicModalState] = useState({
+    visible: false,
+    topic: '',
+    fetchArgs: {
+      auth: null,
+      messageId: null,
+      zulipFeatureLevel: null
+    }
+  });
+
+  const startEditTopic = useCallback(async (
+      streamId,
+      topic,
+      streamsById,
+      _,
+    ) => {
+      const messageId = await fetchSomeMessageIdForConversation(
+        auth,
+        streamId,
+        topic,
+        streamsById,
+        zulipFeatureLevel,
+      );
+      if (messageId == null) {
+        throw new Error(
+          _('No messages in topic: {streamAndTopic}', {
+            streamAndTopic: `#${streamsById.get(streamId)?.name ?? 'unknown'} > ${topic}`,
+          }),
+        );
+      }
+      setTopicModalState({
+        visible: true,
+        topic,
+        fetchArgs: { auth, messageId, zulipFeatureLevel }
+      });
+  }, [auth, zulipFeatureLevel]);
+
+  const closeEditTopicModal = useCallback(() => {
+    setTopicModalState({
+      visible: false,
+      topic: null,
+      fetchArgs: { auth: null, messageId: null, zulipFeatureLevel: null }
+    });
+  }, []);
+
+  const topicModalHandler = useMemo(() => ({
+    startEditTopic,
+    closeEditTopicModal,
+  }), [startEditTopic, closeEditTopicModal]);
+
+  return (
+    <TopicModal.Provider value={topicModalHandler}>
+      {topicModalState.visible && (
+        <TopicEditModal
+          topicModalState={topicModalState}
+          topicModalHandler={topicModalHandler}
+        />
+      )}
+      {children}
+    </TopicModal.Provider>
+  );
+}