MentionWarnings [nfc]: Use useSelector instead of connect.

An instance of zulip#4837.

See the previous commit for more details, and see
  zulip#4942 (comment)
for why we do

  React.createRef<React$ElementRef<typeof MentionWarnings>>()

instead of putting something else for createRef's type parameter.

Author: chrisbobbe

src/compose/ComposeBox.js

@@ -138,14 +138,7 @@ class ComposeBox extends PureComponent<Props, State> {
   messageInputRef = React.createRef<$FlowFixMe>();
   topicInputRef = React.createRef<$FlowFixMe>();
 
-  // TODO: Type-check this, once we've adjusted our `react-redux`
-  // wrapper to do the right thing. It should be
-  //
-  //   mentionWarnings = React.createRef<React$ElementRef<MentionWarnings>>()
-  //
-  // but we need our `react-redux` wrapper to be aware of
-  // `{ forwardRef: true }`, since we use that.
-  mentionWarnings = React.createRef();
+  mentionWarnings = React.createRef<React$ElementRef<typeof MentionWarnings>>();
 
   inputBlurTimeoutId: ?TimeoutID = null;
 
@@ -503,10 +496,6 @@ class ComposeBox extends PureComponent<Props, State> {
 
     return (
       <View style={this.styles.wrapper}>
-        {/*
-          $FlowFixMe[incompatible-use]:
-          `MentionWarnings` should use a type-checked `connect`
-        */}
         <MentionWarnings narrow={narrow} stream={stream} ref={this.mentionWarnings} />
         <View style={[this.styles.autocompleteWrapper, { marginBottom: height }]}>
           <TopicAutocomplete

src/compose/MentionWarnings.js

@@ -1,9 +1,9 @@
 /* @flow strict-local */
 
-import { connect } from 'react-redux';
 import React, { useState, useCallback, useContext, forwardRef, useImperativeHandle } from 'react';
+import { useSelector } from 'react-redux';
 
-import type { Auth, Stream, Dispatch, Narrow, UserOrBot, Subscription, UserId } from '../types';
+import type { Stream, Narrow, UserOrBot, Subscription, UserId } from '../types';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { getAllUsersById, getAuth } from '../selectors';
 import { is1to1PmNarrow } from '../utils/narrow';
@@ -13,17 +13,9 @@ import { showToast } from '../utils/info';
 import MentionedUserNotSubscribed from '../message/MentionedUserNotSubscribed';
 import { makeUserId } from '../api/idTypes';
 
-type SelectorProps = {|
-  auth: Auth,
-  allUsersById: Map<UserId, UserOrBot>,
-|};
-
 type Props = $ReadOnly<{|
   narrow: Narrow,
   stream: Subscription | {| ...Stream, in_home_view: boolean |},
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
 type ImperativeHandle = {|
@@ -32,7 +24,10 @@ type ImperativeHandle = {|
 |};
 
 function MentionWarnings(props: Props, ref) {
-  const { stream, narrow, auth, allUsersById } = props;
+  const { stream, narrow } = props;
+
+  const auth = useSelector(getAuth);
+  const allUsersById = useSelector(getAllUsersById);
 
   const [unsubscribedMentions, setUnsubscribedMentions] = useState<UserId[]>([]);
 
@@ -169,13 +164,4 @@ function MentionWarnings(props: Props, ref) {
   return mentionWarnings;
 }
 
-// $FlowFixMe[missing-annot]. TODO: Use a type checked connect call.
-export default connect(
-  state => ({
-    auth: getAuth(state),
-    allUsersById: getAllUsersById(state),
-  }),
-  null,
-  null,
-  { forwardRef: true },
-)(forwardRef<Props, ImperativeHandle>(MentionWarnings));
+export default forwardRef<Props, ImperativeHandle>(MentionWarnings);