user: Use UserItemById in ReactionUserList; simplify whole call stack.

This is a nice chain of simplifications we get from this conversion.

Author: gnprice

src/reactions/MessageReactionList.js

@@ -9,19 +9,11 @@ import * as NavigationService from '../nav/NavigationService';
 import * as logging from '../utils/logging';
 import ReactionUserList from './ReactionUserList';
 import { connect } from '../react-redux';
-import type {
-  AggregatedReaction,
-  Dispatch,
-  EmojiType,
-  Message,
-  ReactionType,
-  UserOrBot,
-} from '../types';
+import type { AggregatedReaction, 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 { objectFromEntries } from '../jsBackport';
@@ -39,16 +31,13 @@ const emojiTypeFromReactionType = (reactionType: ReactionType): EmojiType => {
 const getReactionsTabs = (
   aggregatedReactions: $ReadOnlyArray<AggregatedReaction>,
   reactionName?: string,
-  allUsersById: Map<number, UserOrBot>,
 ) => {
   // Each tab corresponds to an aggregated reaction, and has a user list.
   const reactionsTabs = objectFromEntries(
     aggregatedReactions.map(aggregatedReaction => [
       aggregatedReaction.name,
       {
-        screen: () => (
-          <ReactionUserList reactedUserIds={aggregatedReaction.users} allUsersById={allUsersById} />
-        ),
+        screen: () => <ReactionUserList reactedUserIds={aggregatedReaction.users} />,
         navigationOptions: {
           tabBarLabel: () => (
             <View style={styles.row}>
@@ -100,7 +89,6 @@ const getReactionsTabs = (
 type SelectorProps = $ReadOnly<{|
   message: Message | void,
   ownUserId: number,
-  allUsersById: Map<number, UserOrBot>,
 |}>;
 
 type Props = $ReadOnly<{|
@@ -144,7 +132,7 @@ class MessageReactionList extends PureComponent<Props> {
   }
 
   render() {
-    const { message, navigation, ownUserId, allUsersById } = this.props;
+    const { message, navigation, ownUserId } = this.props;
     const { reactionName } = navigation.state.params;
 
     const content: React$Node = (() => {
@@ -162,7 +150,7 @@ class MessageReactionList extends PureComponent<Props> {
         // more than one navigator in the app, and the recommended
         // workaround isn't feasible; see discussion at
         // https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/Dynamic.20routes.20in.20react-navigation/near/1008268.
-        const TabView = getReactionsTabs(aggregatedReactions, reactionName, allUsersById);
+        const TabView = getReactionsTabs(aggregatedReactions, reactionName);
         return (
           <View style={styles.flexed}>
             <TabView />
@@ -183,5 +171,4 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   // message *can* be undefined; see componentDidUpdate for explanation and handling.
   message: (state.messages[props.navigation.state.params.messageId]: Message | void),
   ownUserId: getOwnUser(state).user_id,
-  allUsersById: getAllUsersById(state),
 }))(MessageReactionList);

src/reactions/ReactionUserList.js

@@ -5,13 +5,12 @@ import { connect } from '../react-redux';
 
 import * as NavigationService from '../nav/NavigationService';
 import type { Dispatch, UserOrBot } from '../types';
-import UserItem from '../users/UserItem';
+import { UserItemById } from '../users/UserItem';
 import { navigateToAccountDetails } from '../actions';
 
 type Props = $ReadOnly<{|
   dispatch: Dispatch,
   reactedUserIds: $ReadOnlyArray<number>,
-  allUsersById: Map<number, UserOrBot>,
 |}>;
 
 /**
@@ -25,19 +24,15 @@ 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 }) => (
+          <UserItemById key={item} user={item} onPress={this.handlePress} />
+        )}
       />
     );
   }