topic edit modal [nfc]: Rebase branch over function-component-conversion branch.

Author: Leslie Ngo

src/search/MessageListWrapper.js

@@ -1,14 +1,15 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { Message, Narrow } from '../types';
 import { createStyleSheet } from '../styles';
 import LoadingIndicator from '../common/LoadingIndicator';
 import SearchEmptyState from '../common/SearchEmptyState';
-import MessageListWrapper from './MessageListWrapper';
+import MessageList from '../webview/MessageList';
+import { useTopicModalHandler } from '../boot/TopicModalProvider';
 
 const styles = createStyleSheet({
   results: {
@@ -22,29 +23,42 @@ type Props = $ReadOnly<{|
   isFetching: boolean,
 |}>;
 
-export default class SearchMessagesCard extends PureComponent<Props> {
-  render(): Node {
-    const { isFetching, messages, narrow } = this.props;
-    if (isFetching) {
-      // Display loading indicator only if there are no messages to
-      // display from a previous search.
-      if (!messages || messages.length === 0) {
-        return <LoadingIndicator size={40} />;
-      }
-    }
+export default function SearchMessagesCard(props: Props): Node {
+  const { narrow, isFetching, messages } = props;
+  const { startEditTopic } = useTopicModalHandler();
 
-    if (!messages) {
-      return null;
+  if (isFetching) {
+    // Display loading indicator only if there are no messages to
+    // display from a previous search.
+    if (!messages || messages.length === 0) {
+      return <LoadingIndicator size={40} />;
     }
+  }
 
-    if (messages.length === 0) {
-      return <SearchEmptyState text="No results" />;
-    }
+  if (!messages) {
+    return null;
+  }
 
-    return (
-      <View style={styles.results}>
-        <MessageListWrapper messages={messages} narrow={narrow} />
-      </View>
-    );
+  if (messages.length === 0) {
+    return <SearchEmptyState text="No results" />;
   }
+
+  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={narrow}
+        showMessagePlaceholders={false}
+        // TODO: handle editing a message from the search results,
+        // or make this prop optional
+        startEditMessage={() => undefined}
+        startEditTopic={startEditTopic}
+      />
+    </View>
+  );
 }