From d939fd001927224ae98e0ab6a14b8898806bf882 Mon Sep 17 00:00:00 2001
From: Chris Bobbe <cbobbe@zulip.com>
Date: Wed, 3 Feb 2021 14:42:53 -0500
Subject: [PATCH] MessageList: Fix type-checking of props.

This is the problem we've run into a few times [1] [2] where adding
`() => <C />;` to the file magically causes C's callers even
*outside* the file to start getting their props type-checked, where
they weren't before.

Instead of doing that, annotate the export with
`ComponentType<OuterProps>`, which Greg noticed also worked [3],
since we happen to have `OuterProps` lying around anyway.

[1] fcde7005e
[2] https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Flow.20and.20.60connect.60/near/1098203
[3] https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Flow.20and.20.60connect.60/near/1098230
---
 src/search/SearchMessagesCard.js |  3 ++
 src/webview/MessageList.js       | 70 +++++++++++++++++---------------
 2 files changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/search/SearchMessagesCard.js b/src/search/SearchMessagesCard.js
index a627c04831e..53c8407c79a 100644
--- a/src/search/SearchMessagesCard.js
+++ b/src/search/SearchMessagesCard.js
@@ -52,6 +52,9 @@ export default class SearchMessagesCard extends PureComponent<Props> {
           disableFetching
           showMessagePlaceholders={false}
           suppressTypingIndicator
+          // TODO: handle editing a message from the search results,
+          // or don't let callers pass this.
+          startEditMessage={() => undefined}
         />
       </View>
     );
diff --git a/src/webview/MessageList.js b/src/webview/MessageList.js
index 86e4e81733a..cca061a06d4 100644
--- a/src/webview/MessageList.js
+++ b/src/webview/MessageList.js
@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React, { Component } from 'react';
+import React, { Component, type ComponentType } from 'react';
 import { Platform, NativeModules } from 'react-native';
 import { WebView } from 'react-native-webview';
 import type { WebViewNavigation } from 'react-native-webview';
@@ -145,7 +145,7 @@ const assetsUrl =
  */
 const webviewAssetsUrl = new URL('webview/', assetsUrl);
 
-class MessageList extends Component<Props> {
+class MessageListInner extends Component<Props> {
   static contextType = ThemeContext;
   context: ThemeData;
 
@@ -340,34 +340,38 @@ type OuterProps = {|
   suppressTypingIndicator?: true,
 |};
 
-export default connect<SelectorProps, _, _>((state, props: OuterProps) => {
-  // TODO Ideally this ought to be a caching selector that doesn't change
-  // when the inputs don't.  Doesn't matter in a practical way here, because
-  // we have a `shouldComponentUpdate` that doesn't look at this prop... but
-  // it'd be better to set an example of the right general pattern.
-  const backgroundData: BackgroundData = {
-    alertWords: state.alertWords,
-    allImageEmojiById: getAllImageEmojiById(state),
-    auth: getAuth(state),
-    debug: getDebug(state),
-    flags: getFlags(state),
-    mute: getMute(state),
-    mutedUsers: getMutedUsers(state),
-    ownUser: getOwnUser(state),
-    subscriptions: getSubscriptions(state),
-    theme: getSettings(state).theme,
-    twentyFourHourTime: getRealm(state).twentyFourHourTime,
-  };
-
-  return {
-    backgroundData,
-    fetching: props.disableFetching
-      ? { older: false, newer: false }
-      : getFetchingForNarrow(state, props.narrow),
-    htmlPieceDescriptorsForShownMessages: getHtmlPieceDescriptorsForMessages(
-      props.messages,
-      props.narrow,
-    ),
-    typingUsers: props.suppressTypingIndicator ? [] : getCurrentTypingUsers(state, props.narrow),
-  };
-})(connectActionSheet(withGetText(MessageList)));
+const MessageList: ComponentType<OuterProps> = connect<SelectorProps, _, _>(
+  (state, props: OuterProps) => {
+    // TODO Ideally this ought to be a caching selector that doesn't change
+    // when the inputs don't.  Doesn't matter in a practical way here, because
+    // we have a `shouldComponentUpdate` that doesn't look at this prop... but
+    // it'd be better to set an example of the right general pattern.
+    const backgroundData: BackgroundData = {
+      alertWords: state.alertWords,
+      allImageEmojiById: getAllImageEmojiById(state),
+      auth: getAuth(state),
+      debug: getDebug(state),
+      flags: getFlags(state),
+      mute: getMute(state),
+      mutedUsers: getMutedUsers(state),
+      ownUser: getOwnUser(state),
+      subscriptions: getSubscriptions(state),
+      theme: getSettings(state).theme,
+      twentyFourHourTime: getRealm(state).twentyFourHourTime,
+    };
+
+    return {
+      backgroundData,
+      fetching: props.disableFetching
+        ? { older: false, newer: false }
+        : getFetchingForNarrow(state, props.narrow),
+      htmlPieceDescriptorsForShownMessages: getHtmlPieceDescriptorsForMessages(
+        props.messages,
+        props.narrow,
+      ),
+      typingUsers: props.suppressTypingIndicator ? [] : getCurrentTypingUsers(state, props.narrow),
+    };
+  },
+)(connectActionSheet(withGetText(MessageListInner)));
+
+export default MessageList;