user: Convert to UserItemById from whole-User-taking UserItem

src/autocomplete/PeopleAutocomplete.js

@@ -11,7 +11,7 @@ import {
   getAutocompleteUserGroupSuggestions,
 } from '../users/userHelpers';
 import { Popup } from '../common';
-import UserItem from '../users/UserItem';
+import { UserItemRaw } from '../users/UserItem';
 import UserGroupItem from '../user-groups/UserGroupItem';
 
 type Props = $ReadOnly<{|
@@ -65,7 +65,11 @@ class PeopleAutocomplete extends PureComponent<Props> {
       {
         data: filteredUsers,
         renderItem: ({ item }) => (
-          <UserItem
+          // "Raw" because some of our autocomplete suggestions are fake
+          // synthetic "users" to represent @all and @everyone.
+          // TODO display those in a UI that makes more sense for them,
+          //   and drop the fake "users" and use the normal UserItem.
+          <UserItemRaw
             key={item.user_id}
             user={item}
             showEmail

src/chat/GroupDetailsScreen.js

@@ -7,7 +7,7 @@ import * as NavigationService from '../nav/NavigationService';
 import type { Dispatch, UserOrBot } from '../types';
 import { connect } from '../react-redux';
 import { Screen } from '../common';
-import { UserItemById } from '../users/UserItem';
+import UserItem from '../users/UserItem';
 import { navigateToAccountDetails } from '../actions';
 
 type Props = $ReadOnly<{|
@@ -31,7 +31,7 @@ class GroupDetailsScreen extends PureComponent<Props> {
           data={recipients}
           keyExtractor={item => String(item)}
           renderItem={({ item }) => (
-            <UserItemById key={item} userId={item} showEmail onPress={this.handlePress} />
+            <UserItem key={item} userId={item} showEmail onPress={this.handlePress} />
           )}
         />
       </Screen>

src/pm-conversations/PmConversationList.js

@@ -47,7 +47,11 @@ export default class PmConversationList extends PureComponent<Props> {
           const users = item.keyRecipients;
           if (users.length === 1) {
             return (
-              <UserItem user={users[0]} unreadCount={item.unread} onPress={this.handleUserNarrow} />
+              <UserItem
+                userId={users[0].user_id}
+                unreadCount={item.unread}
+                onPress={this.handleUserNarrow}
+              />
             );
           } else {
             return (

src/reactions/MessageReactionList.js

@@ -8,12 +8,11 @@ import * as NavigationService from '../nav/NavigationService';
 import * as logging from '../utils/logging';
 import ReactionUserList from './ReactionUserList';
 import { connect } from '../react-redux';
-import type { Dispatch, EmojiType, Message, ReactionType, UserOrBot } from '../types';
+import type { Dispatch, EmojiType, Message, ReactionType } from '../types';
 import { Screen, Label, RawLabel } from '../common';
 import { getOwnUser } from '../selectors';
 import aggregateReactions from './aggregateReactions';
 import styles from '../styles';
-import { getAllUsersById } from '../users/userSelectors';
 import { materialTopTabNavigatorConfig } from '../styles/tabs';
 import Emoji from '../emoji/Emoji';
 import { navigateBack } from '../nav/navActions';
@@ -30,7 +29,6 @@ const emojiTypeFromReactionType = (reactionType: ReactionType): EmojiType => {
 type SelectorProps = $ReadOnly<{|
   message: Message | void,
   ownUserId: number,
-  allUsersById: Map<number, UserOrBot>,
 |}>;
 
 type Props = $ReadOnly<{|
@@ -68,7 +66,7 @@ class MessageReactionList extends PureComponent<Props> {
   }
 
   render() {
-    const { message, route, ownUserId, allUsersById } = this.props;
+    const { message, route, ownUserId } = this.props;
     const { reactionName } = route.params;
 
     const content: React$Node = (() => {
@@ -110,12 +108,7 @@ class MessageReactionList extends PureComponent<Props> {
                 <Tab.Screen
                   key={aggregatedReaction.name}
                   name={aggregatedReaction.name}
-                  component={() => (
-                    <ReactionUserList
-                      reactedUserIds={aggregatedReaction.users}
-                      allUsersById={allUsersById}
-                    />
-                  )}
+                  component={() => <ReactionUserList reactedUserIds={aggregatedReaction.users} />}
                   options={{
                     tabBarLabel: () => (
                       <View style={styles.row}>
@@ -147,5 +140,4 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   // message *can* be undefined; see componentDidUpdate for explanation and handling.
   message: state.messages.get(props.route.params.messageId),
   ownUserId: getOwnUser(state).user_id,
-  allUsersById: getAllUsersById(state),
 }))(MessageReactionList);

src/reactions/ReactionUserList.js

@@ -11,7 +11,6 @@ import { navigateToAccountDetails } from '../actions';
 type Props = $ReadOnly<{|
   dispatch: Dispatch,
   reactedUserIds: $ReadOnlyArray<number>,
-  allUsersById: Map<number, UserOrBot>,
 |}>;
 
 /**
@@ -25,19 +24,13 @@ class ReactionUserList extends PureComponent<Props> {
   };
 
   render() {
-    const { reactedUserIds, allUsersById } = this.props;
+    const { reactedUserIds } = this.props;
 
     return (
       <FlatList
         data={reactedUserIds}
         keyExtractor={userId => `${userId}`}
-        renderItem={({ item }) => {
-          const user = allUsersById.get(item);
-          if (!user) {
-            return null;
-          }
-          return <UserItem key={user.user_id} user={user} onPress={this.handlePress} />;
-        }}
+        renderItem={({ item }) => <UserItem key={item} userId={item} onPress={this.handlePress} />}
       />
     );
   }

src/sharing/ChooseRecipientsScreen.js

@@ -7,7 +7,7 @@ import UserPickerCard from '../user-picker/UserPickerCard';
 
 type Props = $ReadOnly<{|
   dispatch: Dispatch,
-  onComplete: (User[]) => void,
+  onComplete: ($ReadOnlyArray<number>) => void,
 |}>;
 
 type State = {|
@@ -23,7 +23,7 @@ class ChooseRecipientsScreen extends PureComponent<Props, State> {
 
   handleComplete = (selected: Array<User>) => {
     const { onComplete } = this.props;
-    onComplete(selected);
+    onComplete(selected.map(u => u.user_id));
   };
 
   render() {

src/sharing/ShareToPm.js

@@ -4,7 +4,7 @@ import { View, Image, ScrollView, Modal, BackHandler } from 'react-native';
 
 import type { SharingNavigationProp, SharingRouteProp } from './SharingScreen';
 import * as NavigationService from '../nav/NavigationService';
-import type { Dispatch, User, Auth, GetText } from '../types';
+import type { Dispatch, Auth, GetText } from '../types';
 import { createStyleSheet } from '../styles';
 import { TranslationContext } from '../boot/TranslationProvider';
 import { connect } from '../react-redux';
@@ -63,7 +63,7 @@ type Props = $ReadOnly<{|
 |}>;
 
 type State = $ReadOnly<{|
-  selectedRecipients: User[],
+  selectedRecipients: $ReadOnlyArray<number>,
   message: string,
   choosingRecipients: boolean,
   sending: boolean,
@@ -91,7 +91,7 @@ class ShareToPm extends React.Component<Props, State> {
     this.setState({ sending: true });
   };
 
-  handleChooseRecipients = (selectedRecipients: Array<User>) => {
+  handleChooseRecipients = selectedRecipients => {
     this.setState({ selectedRecipients });
     this.setState({ choosingRecipients: false });
   };
@@ -135,8 +135,8 @@ class ShareToPm extends React.Component<Props, State> {
       return <Label text="Please choose recipients to share with" />;
     }
     const preview = [];
-    selectedRecipients.forEach((user: User) => {
-      preview.push(<UserItem user={user} onPress={() => {}} key={user.user_id} />);
+    selectedRecipients.forEach(userId => {
+      preview.push(<UserItem userId={userId} onPress={() => {}} key={userId} />);
     });
     return preview;
   };

src/sharing/send.js

@@ -1,6 +1,6 @@
 /* @flow strict-local */
 
-import type { SharedData, User, Auth, GetText } from '../types';
+import type { SharedData, Auth, GetText } from '../types';
 import { showToast } from '../utils/info';
 import { sendMessage, uploadFile } from '../api';
 
@@ -13,7 +13,7 @@ type SendStream = {|
 |};
 
 type SendPm = {|
-  selectedRecipients: Array<User>,
+  selectedRecipients: $ReadOnlyArray<number>,
   message: string,
   sharedData: SharedData,
   type: 'pm',
@@ -43,7 +43,7 @@ export const handleSend = async (data: SendStream | SendPm, auth: Auth, _: GetTe
       ? {
           content: messageToSend,
           type: 'private',
-          to: JSON.stringify(data.selectedRecipients.map(user => user.user_id)),
+          to: JSON.stringify(data.selectedRecipients),
         }
       : {
           content: messageToSend,

src/users/UserItem.js

@@ -2,11 +2,11 @@
 import React, { type ComponentType, type ElementConfig, PureComponent } from 'react';
 import { View } from 'react-native';
 
-import type { Dispatch, UserOrBot } from '../types';
+import type { UserOrBot } from '../types';
 import { RawLabel, Touchable, UnreadCount } from '../common';
 import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
 import styles, { createStyleSheet, BRAND_COLOR } from '../styles';
-import { connect } from '../react-redux';
+import { useSelector } from '../react-redux';
 import { getUserForId } from './userSelectors';
 
 const componentStyles = createStyleSheet({
@@ -36,13 +36,6 @@ type Props = $ReadOnly<{|
   onPress: UserOrBot => void,
 |}>;
 
-/**
- * A user represented with avatar and name, for use in a list.
- *
- * Prefer `UserItemById` over this component: it does the same thing but
- * provides a more encapsulated interface.  Once all callers have migrated
- * to that version, it'll replace this one.
- */
 // See UserAvatarWithPresence for discussion of this inexact object type.
 class UserItem extends PureComponent<$ReadOnly<{ ...Props, ... }>> {
   static defaultProps = {
@@ -93,23 +86,33 @@ class UserItem extends PureComponent<$ReadOnly<{ ...Props, ... }>> {
   }
 }
 
+/**
+ * A user represented with avatar and name, for use in a list.
+ *
+ * Prefer the default export `UserItem` over this component: it does the
+ * same thing but provides a more encapsulated interface.
+ *
+ * This component is potentially appropriate if displaying a synthetic fake
+ * user, one that doesn't exist in the database.  (But anywhere we're doing
+ * that, there's probably a better UI anyway than showing a fake user.)
+ */
 // Export the class with a tighter constraint on acceptable props, namely
 // that the type is an exact object type as usual.
-export default (UserItem: ComponentType<$Exact<ElementConfig<typeof UserItem>>>);
+export const UserItemRaw = (UserItem: ComponentType<$Exact<ElementConfig<typeof UserItem>>>);
 
-type ByIdProps = $ReadOnly<{|
-  ...$Exact<ElementConfig<typeof UserItem>>,
+type OuterProps = $ReadOnly<{|
+  ...$Exact<$Diff<ElementConfig<typeof UserItem>, { user: mixed }>>,
   userId: number,
-  dispatch: Dispatch,
 |}>;
 
 /**
  * A user represented with avatar and name, for use in a list.
  *
- * Use this in preference to the default export `UserItem`.  We're migrating
- * from that one to this in order to better encapsulate getting user data
- * where it's needed.
+ * Use this in preference to `UserItemRaw`.  That helps us better
+ * encapsulate getting user data where it's needed.
  */
-export const UserItemById = connect<{| user: UserOrBot |}, _, _>((state, props) => ({
-  user: getUserForId(state, props.userId),
-}))((UserItem: ComponentType<ByIdProps>));
+// eslint-disable-next-line func-names
+export default function (props: OuterProps) {
+  const user = useSelector(state => getUserForId(state, props.userId));
+  return <UserItem {...props} user={user} />;
+}

src/users/UserList.js

@@ -38,7 +38,7 @@ export default class UserList extends PureComponent<Props> {
     const groupedUsers = groupUsersByStatus(shownUsers, presences);
     const sections = Object.keys(groupedUsers).map(key => ({
       key: `${key.charAt(0).toUpperCase()}${key.slice(1)}`,
-      data: groupedUsers[key],
+      data: groupedUsers[key].map(u => u.user_id),
     }));
 
     return (
@@ -48,13 +48,13 @@ export default class UserList extends PureComponent<Props> {
         keyboardShouldPersistTaps="always"
         initialNumToRender={20}
         sections={sections}
-        keyExtractor={item => item.email}
+        keyExtractor={item => item}
         renderItem={({ item }) => (
           <UserItem
-            key={item.user_id}
-            user={item}
+            key={item}
+            userId={item}
             onPress={onPress}
-            isSelected={!!selected.find(user => user.user_id === item.user_id)}
+            isSelected={!!selected.find(user => user.user_id === item)}
           />
         )}
         renderSectionHeader={({ section }) =>