Finish removing connect calls for exported components, where it's easy.

src/account-info/AccountDetails.js

@@ -1,10 +1,11 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
-import type { User, UserOrBot, Dispatch } from '../types';
+import type { UserOrBot } from '../types';
 import styles, { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector } from '../react-redux';
 import { UserAvatar, ComponentList, RawLabel } from '../common';
 import { getOwnUser, getUserStatusTextForUser } from '../selectors';
 import PresenceStatusIndicator from '../common/PresenceStatusIndicator';
@@ -29,68 +30,56 @@ const componentStyles = createStyleSheet({
   },
 });
 
-type SelectorProps = {|
-  ownUser: User,
-  userStatusText: string | void,
-|};
-
 type Props = $ReadOnly<{|
   user: UserOrBot,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class AccountDetails extends PureComponent<Props> {
-  render() {
-    const { ownUser, user, userStatusText } = this.props;
+export default function AccountDetails(props: Props): Node {
+  const { user } = props;
 
-    const isSelf = user.user_id === ownUser.user_id;
+  const ownUser = useSelector(getOwnUser);
+  const userStatusText = useSelector(state => getUserStatusTextForUser(state, props.user.user_id));
 
-    let localTime: string | null = null;
-    // See comments at CrossRealmBot and User at src/api/modelTypes.js.
-    if (user.timezone !== '' && user.timezone !== undefined) {
-      try {
-        localTime = `${nowInTimeZone(user.timezone)} Local time`;
-      } catch (err) {
-        // The set of timezone names in the tz database is subject to change over
-        // time. Handle unrecognized timezones by quietly discarding them.
-      }
+  const isSelf = user.user_id === ownUser.user_id;
+
+  let localTime: string | null = null;
+  // See comments at CrossRealmBot and User at src/api/modelTypes.js.
+  if (user.timezone !== '' && user.timezone !== undefined) {
+    try {
+      localTime = `${nowInTimeZone(user.timezone)} Local time`;
+    } catch (err) {
+      // The set of timezone names in the tz database is subject to change over
+      // time. Handle unrecognized timezones by quietly discarding them.
     }
+  }
 
-    return (
-      <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
+  return (
+    <ComponentList outerSpacing itemStyle={componentStyles.componentListItem}>
+      <View>
+        <UserAvatar avatarUrl={user.avatar_url} size={200} />
+      </View>
+      <View style={componentStyles.statusWrapper}>
+        <PresenceStatusIndicator
+          style={componentStyles.presenceStatusIndicator}
+          email={user.email}
+          hideIfOffline={false}
+          useOpaqueBackground={false}
+        />
+        <RawLabel style={[styles.largerText, styles.halfMarginRight]} text={user.full_name} />
+      </View>
+      {userStatusText !== undefined && (
+        <RawLabel style={[styles.largerText, componentStyles.statusText]} text={userStatusText} />
+      )}
+      {!isSelf && (
         <View>
-          <UserAvatar avatarUrl={user.avatar_url} size={200} />
+          <ActivityText style={styles.largerText} user={user} />
         </View>
-        <View style={componentStyles.statusWrapper}>
-          <PresenceStatusIndicator
-            style={componentStyles.presenceStatusIndicator}
-            email={user.email}
-            hideIfOffline={false}
-            useOpaqueBackground={false}
-          />
-          <RawLabel style={[styles.largerText, styles.halfMarginRight]} text={user.full_name} />
+      )}
+      {!isSelf && localTime !== null && (
+        <View>
+          <RawLabel style={styles.largerText} text={localTime} />
         </View>
-        {userStatusText !== undefined && (
-          <RawLabel style={[styles.largerText, componentStyles.statusText]} text={userStatusText} />
-        )}
-        {!isSelf && (
-          <View>
-            <ActivityText style={styles.largerText} user={user} />
-          </View>
-        )}
-        {!isSelf && localTime !== null && (
-          <View>
-            <RawLabel style={styles.largerText} text={localTime} />
-          </View>
-        )}
-      </ComponentList>
-    );
-  }
+      )}
+    </ComponentList>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  ownUser: getOwnUser(state),
-  userStatusText: getUserStatusTextForUser(state, props.user.user_id),
-}))(AccountDetails);

src/account-info/AccountDetailsScreen.js

@@ -1,11 +1,12 @@
 /* @flow strict-local */
-import React, { PureComponent } from 'react';
+import React, { useCallback } from 'react';
+import type { Node } from 'react';
 
 import type { RouteProp } from '../react-navigation';
 import type { AppNavigationProp } from '../nav/AppNavigator';
-import type { Dispatch, UserOrBot, UserId } from '../types';
+import type { UserId } from '../types';
 import { createStyleSheet } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector, useDispatch } from '../react-redux';
 import { Screen, ZulipButton, Label } from '../common';
 import { IconPrivateChat } from '../common/Icons';
 import { pm1to1NarrowFromUser } from '../utils/narrow';
@@ -25,53 +26,40 @@ const styles = createStyleSheet({
   },
 });
 
-type SelectorProps = $ReadOnly<{|
-  isActive: boolean,
-  user: UserOrBot,
-|}>;
-
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'account-details'>,
   route: RouteProp<'account-details', {| userId: UserId |}>,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
 |}>;
 
-class AccountDetailsScreen extends PureComponent<Props> {
-  handleChatPress = () => {
-    const { user, dispatch } = this.props;
+export default function AccountDetailsScreen(props: Props): Node {
+  const dispatch = useDispatch();
+  const user = useSelector(state => getUserForId(state, props.route.params.userId));
+  const isActive = useSelector(state => getUserIsActive(state, props.route.params.userId));
+
+  const handleChatPress = useCallback(() => {
     dispatch(doNarrow(pm1to1NarrowFromUser(user)));
-  };
+  }, [user, dispatch]);
 
-  render() {
-    const { user, isActive } = this.props;
-    const title = {
-      text: '{_}',
-      values: {
-        // This causes the name not to get translated.
-        _: user.full_name || ' ',
-      },
-    };
+  const title = {
+    text: '{_}',
+    values: {
+      // This causes the name not to get translated.
+      _: user.full_name || ' ',
+    },
+  };
 
-    return (
-      <Screen title={title}>
-        <AccountDetails user={user} />
-        {!isActive && (
-          <Label style={styles.deactivatedText} text="(This user has been deactivated)" />
-        )}
-        <ZulipButton
-          style={styles.pmButton}
-          text={isActive ? 'Send private message' : 'View private messages'}
-          onPress={this.handleChatPress}
-          Icon={IconPrivateChat}
-        />
-      </Screen>
-    );
-  }
+  return (
+    <Screen title={title}>
+      <AccountDetails user={user} />
+      {!isActive && (
+        <Label style={styles.deactivatedText} text="(This user has been deactivated)" />
+      )}
+      <ZulipButton
+        style={styles.pmButton}
+        text={isActive ? 'Send private message' : 'View private messages'}
+        onPress={handleChatPress}
+        Icon={IconPrivateChat}
+      />
+    </Screen>
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  user: getUserForId(state, props.route.params.userId),
-  isActive: getUserIsActive(state, props.route.params.userId),
-}))(AccountDetailsScreen);

src/autocomplete/TopicAutocomplete.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useEffect } from 'react';
+import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
 import type { Narrow } from '../types';
@@ -24,7 +25,7 @@ type Props = $ReadOnly<{|
   onAutocomplete: (name: string) => void,
 |}>;
 
-export default function TopicAutocomplete(props: Props) {
+export default function TopicAutocomplete(props: Props): Node {
   const { narrow, isFocused, text, onAutocomplete } = props;
   const dispatch = useDispatch();
   const topics = useSelector(state => getTopicsForNarrow(state, narrow));

src/chat/GroupDetailsScreen.js

@@ -1,5 +1,6 @@
 /* @flow strict-local */
 import React, { useCallback } from 'react';
+import type { Node } from 'react';
 import { FlatList } from 'react-native';
 
 import type { RouteProp } from '../react-navigation';
@@ -15,7 +16,7 @@ type Props = $ReadOnly<{|
   route: RouteProp<'group-details', {| recipients: $ReadOnlyArray<UserId> |}>,
 |}>;
 
-export default function GroupDetailsScreen(props: Props) {
+export default function GroupDetailsScreen(props: Props): Node {
   const { recipients } = props.route.params;
   const handlePress = useCallback((user: UserOrBot) => {
     NavigationService.dispatch(navigateToAccountDetails(user.user_id));

src/chat/UnreadNotice.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import type { Narrow } from '../types';
@@ -39,7 +40,7 @@ type Props = $ReadOnly<{|
   narrow: Narrow,
 |}>;
 
-export default function UnreadNotice(props: Props) {
+export default function UnreadNotice(props: Props): Node {
   const { narrow } = props;
   const unreadCount = useSelector(state => getUnreadCountForNarrow(state, narrow));
 

src/common/LoadingBanner.js

@@ -1,6 +1,7 @@
 /* @flow strict-local */
 
 import React, { useContext } from 'react';
+import type { Node } from 'react';
 import { View } from 'react-native';
 
 import { useSelector } from '../react-redux';
@@ -30,7 +31,7 @@ type Props = $ReadOnly<{|
 /**
  * Display a notice that the app is connecting to the server, when appropriate.
  */
-export default function LoadingBanner(props: Props) {
+export default function LoadingBanner(props: Props): Node {
   const loading = useSelector(getLoading);
   const themeContext = useContext(ThemeContext);
 

src/common/ZulipStatusBar.js

@@ -1,12 +1,13 @@
 /* @flow strict-local */
 
-import React, { PureComponent } from 'react';
+import React from 'react';
+import type { Node } from 'react';
 import { Platform, StatusBar } from 'react-native';
 // $FlowFixMe[untyped-import]
 import Color from 'color';
 
-import type { Orientation, ThemeName, Dispatch } from '../types';
-import { connect } from '../react-redux';
+import type { ThemeName } from '../types';
+import { useSelector } from '../react-redux';
 import { foregroundColorFromBackground } from '../utils/color';
 import { getSession, getSettings } from '../selectors';
 
@@ -20,17 +21,9 @@ export const getStatusBarStyle = (statusBarColor: string): BarStyle =>
     ? 'light-content'
     : 'dark-content';
 
-type SelectorProps = $ReadOnly<{|
-  theme: ThemeName,
-  orientation: Orientation,
-|}>;
-
 type Props = $ReadOnly<{|
   backgroundColor?: string | void,
-  hidden: boolean,
-
-  dispatch: Dispatch,
-  ...SelectorProps,
+  hidden?: boolean,
 |}>;
 
 /**
@@ -50,33 +43,24 @@ type Props = $ReadOnly<{|
  * top inset grows to accommodate a visible status bar, and shrinks to
  * give more room to the app's content when the status bar is hidden.
  */
-class ZulipStatusBar extends PureComponent<Props> {
-  static defaultProps = {
-    hidden: false,
-  };
-
-  render() {
-    const { theme, hidden, orientation } = this.props;
-    const backgroundColor = this.props.backgroundColor;
-    const statusBarColor = getStatusBarColor(backgroundColor, theme);
-    return (
-      orientation === 'PORTRAIT' && (
-        <StatusBar
-          animated
-          showHideTransition="slide"
-          hidden={hidden && Platform.OS !== 'android'}
-          backgroundColor={Color(statusBarColor)
-            .darken(0.1)
-            .hsl()
-            .string()}
-          barStyle={getStatusBarStyle(statusBarColor)}
-        />
-      )
-    );
-  }
+export default function ZulipStatusBar(props: Props): Node {
+  const { hidden = false } = props;
+  const theme = useSelector(state => getSettings(state).theme);
+  const orientation = useSelector(state => getSession(state).orientation);
+  const backgroundColor = props.backgroundColor;
+  const statusBarColor = getStatusBarColor(backgroundColor, theme);
+  return (
+    orientation === 'PORTRAIT' && (
+      <StatusBar
+        animated
+        showHideTransition="slide"
+        hidden={hidden && Platform.OS !== 'android'}
+        backgroundColor={Color(statusBarColor)
+          .darken(0.1)
+          .hsl()
+          .string()}
+        barStyle={getStatusBarStyle(statusBarColor)}
+      />
+    )
+  );
 }
-
-export default connect<SelectorProps, _, _>((state, props) => ({
-  theme: getSettings(state).theme,
-  orientation: getSession(state).orientation,
-}))(ZulipStatusBar);