topic edit modal: Wrap MessageList in functional component.

We can't call Context hooks from SearchMessagesCard because it's
a class component. This wrapper allows the StartEditTopic
callback to be passed to SearchMessagesCard's MessageList child
without breaking the Rules of Hooks.

Author: Leslie Ngo

src/search/MessageListWrapper.js

@@ -0,0 +1,34 @@
+/* @flow strict-local */
+import React from 'react';
+import type { Node } from 'react';
+import MessageList from '../webview/MessageList';
+import { useTopicModalHandler } from '../boot/TopicModalProvider';
+import type { Message, Narrow } from '../types';
+
+type Props = $ReadOnly<{|
+  messages: $ReadOnlyArray<Message>,
+  narrow: Narrow,
+|}>;
+
+/* We can't call Context hooks from SearchMessagesCard because it's a class component. This wrapper allows the startEditTopic callback to be passed to this particular MessageList child without breaking Rules of Hooks. */
+
+export default function MessageListWrapper({ messages, narrow }: Props): Node {
+  const { startEditTopic } = useTopicModalHandler();
+
+  return (
+    <MessageList
+      initialScrollMessageId={
+        // This access is OK only because of the `.length === 0` check
+        // above.
+        messages[messages.length - 1].id
+      }
+      messages={messages}
+      narrow={narrow}
+      showMessagePlaceholders={false}
+      // TODO: handle editing a message from the search results,
+      // or make this prop optional
+      startEditMessage={() => undefined}
+      startEditTopic={startEditTopic}
+    />
+  );
+}

src/search/SearchMessagesCard.js

@@ -8,7 +8,7 @@ import type { Message, Narrow } from '../types';
 import { createStyleSheet } from '../styles';
 import LoadingIndicator from '../common/LoadingIndicator';
 import SearchEmptyState from '../common/SearchEmptyState';
-import MessageList from '../webview/MessageList';
+import MessageListWrapper from './MessageListWrapper';
 
 const styles = createStyleSheet({
   results: {
@@ -24,8 +24,7 @@ type Props = $ReadOnly<{|
 
 export default class SearchMessagesCard extends PureComponent<Props> {
   render(): Node {
-    const { isFetching, messages } = this.props;
-
+    const { isFetching, messages, narrow } = this.props;
     if (isFetching) {
       // Display loading indicator only if there are no messages to
       // display from a previous search.
@@ -44,19 +43,7 @@ export default class SearchMessagesCard extends PureComponent<Props> {
 
     return (
       <View style={styles.results}>
-        <MessageList
-          initialScrollMessageId={
-            // This access is OK only because of the `.length === 0` check
-            // above.
-            messages[messages.length - 1].id
-          }
-          messages={messages}
-          narrow={this.props.narrow}
-          showMessagePlaceholders={false}
-          // TODO: handle editing a message from the search results,
-          // or make this prop optional
-          startEditMessage={() => undefined}
-        />
+        <MessageListWrapper messages={messages} narrow={narrow} />
       </View>
     );
   }