topic edit modal [nfc]: Convert SearchMessagesCard to function component

to allow calling TopicModalProvider Context hook within.

Author: Leslie Ngo

src/search/SearchMessagesCard.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
@@ -22,42 +22,40 @@ type Props = $ReadOnly<{|
   isFetching: boolean,
 |}>;
 
-export default class SearchMessagesCard extends PureComponent<Props> {
-  render(): Node {
-    const { isFetching, messages } = this.props;
+export default function SearchMessagesCard(props: Props): Node {
+  const { narrow, isFetching, messages } = 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} />;
-      }
-    }
-
-    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}>
-        <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}
-        />
-      </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}
+      />
+    </View>
+  );
 }