narrow: Convert more email usage to user IDs

src/chat/narrowsSelectors.js

@@ -22,7 +22,7 @@ import {
   getOutbox,
 } from '../directSelectors';
 import { getCaughtUpForNarrow } from '../caughtup/caughtUpSelectors';
-import { getAllUsersByEmail, getOwnUser } from '../users/userSelectors';
+import { getAllUsersByEmail, getAllUsersById, getOwnUser } from '../users/userSelectors';
 import {
   isStreamOrTopicNarrow,
   emailsOfGroupPmNarrow,
@@ -149,13 +149,16 @@ export const isNarrowValid: Selector<boolean, Narrow> = createSelector(
   (state, narrow) => narrow,
   state => getStreams(state),
   state => getAllUsersByEmail(state),
-  (narrow, streams, allUsersByEmail) =>
+  state => getAllUsersById(state),
+  (narrow, streams, allUsersByEmail, allUsersById) =>
     caseNarrowDefault(
       narrow,
       {
         stream: streamName => streams.find(s => s.name === streamName) !== undefined,
         topic: streamName => streams.find(s => s.name === streamName) !== undefined,
-        pm: emails => emails.every(email => allUsersByEmail.get(email) !== undefined),
+        pm: (emails, ids) =>
+          emails.every(email => allUsersByEmail.get(email) !== undefined)
+          && ids.every(id => allUsersById.get(id) !== undefined),
       },
       () => true,
     ),

src/common/GroupAvatar.js

@@ -20,7 +20,6 @@ const styles = createStyleSheet({
 type Props = $ReadOnly<{|
   names: string[],
   size: number,
-  shape: 'rounded' | 'square',
   children?: React$Node,
   onPress?: () => void,
 |}>;
@@ -43,22 +42,17 @@ export const initialsForGroupIcon = (names: string[]): string => {
  *
  * @prop names - The name of one or more users, used to extract their initials.
  * @prop size - Sets width and height in logical pixels.
- * @prop [shape]
  * @prop children - If provided, will render inside the component body.
  * @prop onPress - Event fired on pressing the component.
  */
 export default class GroupAvatar extends PureComponent<Props> {
-  static defaultProps = {
-    shape: 'rounded',
-  };
-
   render() {
-    const { children, names, size, shape, onPress } = this.props;
+    const { children, names, size, onPress } = this.props;
 
     const frameSize = {
       height: size,
       width: size,
-      borderRadius: shape === 'rounded' ? size / 8 : 0,
+      borderRadius: size / 8,
       backgroundColor: colorHashFromString(names.join(', ')),
     };
     const textSize = {

src/common/UserAvatar.js

@@ -8,7 +8,6 @@ import { AvatarURL } from '../utils/avatar';
 type Props = $ReadOnly<{|
   avatarUrl: AvatarURL,
   size: number,
-  shape: 'rounded' | 'square',
   children?: React$Node,
   onPress?: () => void,
 |}>;
@@ -18,18 +17,13 @@ type Props = $ReadOnly<{|
  *
  * @prop avatarUrl
  * @prop size - Sets width and height in logical pixels.
- * @prop [shape] - 'rounded' (default) means a square with rounded corners.
  * @prop [children] - If provided, will render inside the component body.
  * @prop [onPress] - Event fired on pressing the component.
  */
 export default class UserAvatar extends PureComponent<Props> {
-  static defaultProps = {
-    shape: 'rounded',
-  };
-
   render() {
-    const { avatarUrl, children, size, shape, onPress } = this.props;
-    const borderRadius = shape === 'rounded' ? size / 8 : 0;
+    const { avatarUrl, children, size, onPress } = this.props;
+    const borderRadius = size / 8;
     const style = {
       height: size,
       width: size,

src/common/UserAvatarWithPresence.js

@@ -1,11 +1,13 @@
 /* @flow strict-local */
-
-import React, { PureComponent } from 'react';
+import React, { type ComponentType, PureComponent } from 'react';
 
 import { createStyleSheet } from '../styles';
+import type { Dispatch } from '../types';
 import UserAvatar from './UserAvatar';
 import PresenceStatusIndicator from './PresenceStatusIndicator';
 import { AvatarURL } from '../utils/avatar';
+import { getUserForId } from '../users/userSelectors';
+import { connect } from '../react-redux';
 
 const styles = createStyleSheet({
   status: {
@@ -17,33 +19,65 @@ const styles = createStyleSheet({
 
 type Props = $ReadOnly<{|
   avatarUrl: AvatarURL,
-  email: string,
   size: number,
-  shape: 'rounded' | 'square',
   onPress?: () => void,
+  email: string,
 |}>;
 
 /**
- * Renders a user avatar with a PresenceStatusIndicator in the corner
+ * A user avatar with a PresenceStatusIndicator in the corner.
+ *
+ * Prefer `UserAvatarWithPresenceById` over this component: it does the same
+ * thing but avoids an email in the component's interface.  Once all callers
+ * have migrated to that version, it'll replace this one.
  *
  * @prop [avatarUrl]
  * @prop [email] - Sender's / user's email address, for the presence dot.
  * @prop [size] - Sets width and height in logical pixels.
- * @prop [shape] - 'rounded' (default) means a square with rounded corners.
  * @prop [onPress] - Event fired on pressing the component.
  */
-export default class UserAvatarWithPresence extends PureComponent<Props> {
-  static defaultProps = {
-    shape: 'rounded',
-  };
-
+// The underlying class gets an inexact Props type to express that it's fine
+// for it to be passed extra props by the implementation of …ById.
+// We don't export it with that type, because we want exact Props types to
+// get the most effective type-checking.
+class UserAvatarWithPresence extends PureComponent<$ReadOnly<{ ...Props, ... }>> {
   render() {
-    const { avatarUrl, email, size, onPress, shape } = this.props;
+    const { avatarUrl, email, size, onPress } = this.props;
 
     return (
-      <UserAvatar avatarUrl={avatarUrl} size={size} onPress={onPress} shape={shape}>
+      <UserAvatar avatarUrl={avatarUrl} size={size} onPress={onPress}>
         <PresenceStatusIndicator style={styles.status} email={email} hideIfOffline />
       </UserAvatar>
     );
   }
 }
+
+// Export the class with a tighter constraint on acceptable props, namely
+// that the type is an exact object type as usual.
+export default (UserAvatarWithPresence: ComponentType<Props>);
+
+/**
+ * A user avatar with a PresenceStatusIndicator in the corner.
+ *
+ * Use this in preference to the default export `UserAvatarWithPresence`.
+ * We're migrating from that one to this in order to avoid using emails.
+ *
+ * @prop [userId]
+ * @prop [size]
+ * @prop [onPress]
+ */
+export const UserAvatarWithPresenceById = connect<{| avatarUrl: AvatarURL, email: string |}, _, _>(
+  (state, props) => {
+    const user = getUserForId(state, props.userId);
+    return { avatarUrl: user.avatar_url, email: user.email };
+  },
+)(
+  // The type inference embedded in our `connect` type relies on seeing the
+  // exact Props type for the underlying component, complete with all the
+  // expected props.  Normally that's just how our Props types are in the
+  // first place, but here we have to provide it explicitly.
+  /* eslint-disable flowtype/generic-spacing */
+  (UserAvatarWithPresence: ComponentType<
+    $ReadOnly<{| ...Props, dispatch: Dispatch, userId: number |}>,
+  >),
+);

src/compose/ComposeBox.js

@@ -44,7 +44,6 @@ import {
   getIsAdmin,
   getSession,
   getLastMessageTopic,
-  getActiveUsersByEmail,
   getCaughtUpForNarrow,
   getStreamInNarrow,
   getVideoChatProvider,
@@ -56,12 +55,12 @@ import {
 import { getDraftForNarrow } from '../drafts/draftsSelectors';
 import TopicAutocomplete from '../autocomplete/TopicAutocomplete';
 import AutocompleteView from '../autocomplete/AutocompleteView';
-import { getOwnEmail } from '../users/userSelectors';
+import { getActiveUsersById, getOwnUserId } from '../users/userSelectors';
 
 type SelectorProps = {|
   auth: Auth,
-  ownEmail: string,
-  usersByEmail: Map<string, UserOrBot>,
+  ownUserId: number,
+  usersById: Map<number, UserOrBot>,
   safeAreaInsets: Dimensions,
   isAdmin: boolean,
   isAnnouncementOnly: boolean,
@@ -420,9 +419,9 @@ class ComposeBox extends PureComponent<Props, State> {
   render() {
     const { isTopicFocused, isMenuExpanded, height, message, topic, selection } = this.state;
     const {
-      ownEmail,
+      ownUserId,
       narrow,
-      usersByEmail,
+      usersById,
       editMessage,
       safeAreaInsets,
       isAdmin,
@@ -441,7 +440,7 @@ class ComposeBox extends PureComponent<Props, State> {
       return <AnnouncementOnly />;
     }
 
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     const style = {
       paddingBottom: safeAreaInsets.bottom,
       backgroundColor: 'hsla(0, 0%, 50%, 0.1)',
@@ -519,8 +518,8 @@ class ComposeBox extends PureComponent<Props, State> {
 
 export default connect<SelectorProps, _, _>((state, props) => ({
   auth: getAuth(state),
-  ownEmail: getOwnEmail(state),
-  usersByEmail: getActiveUsersByEmail(state),
+  ownUserId: getOwnUserId(state),
+  usersById: getActiveUsersById(state),
   safeAreaInsets: getSession(state).safeAreaInsets,
   isAdmin: getIsAdmin(state),
   isAnnouncementOnly: getIsActiveStreamAnnouncementOnly(state, props.narrow),

src/compose/__tests__/getComposeInputPlaceholder-test.js

@@ -11,12 +11,12 @@ import {
 import * as eg from '../../__tests__/lib/exampleData';
 
 describe('getComposeInputPlaceholder', () => {
-  const usersByEmail = new Map([eg.selfUser, eg.otherUser, eg.thirdUser].map(u => [u.email, u]));
-  const ownEmail = eg.selfUser.email;
+  const usersById = new Map([eg.selfUser, eg.otherUser, eg.thirdUser].map(u => [u.user_id, u]));
+  const ownUserId = eg.selfUser.user_id;
 
   test('returns "Message @ThisPerson" object for person narrow', () => {
     const narrow = deepFreeze(pm1to1NarrowFromUser(eg.otherUser));
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     expect(placeholder).toEqual({
       text: 'Message {recipient}',
       values: { recipient: `@${eg.otherUser.full_name}` },
@@ -25,25 +25,25 @@ describe('getComposeInputPlaceholder', () => {
 
   test('returns "Jot down something" object for self narrow', () => {
     const narrow = deepFreeze(pm1to1NarrowFromUser(eg.selfUser));
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     expect(placeholder).toEqual({ text: 'Jot down something' });
   });
 
   test('returns "Message #streamName" for stream narrow', () => {
     const narrow = deepFreeze(streamNarrow('Denmark'));
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     expect(placeholder).toEqual({ text: 'Message {recipient}', values: { recipient: '#Denmark' } });
   });
 
   test('returns properly for topic narrow', () => {
     const narrow = deepFreeze(topicNarrow('Denmark', 'Copenhagen'));
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     expect(placeholder).toEqual({ text: 'Reply' });
   });
 
   test('returns "Message group" object for group narrow', () => {
     const narrow = deepFreeze(pmNarrowFromUsersUnsafe([eg.otherUser, eg.thirdUser]));
-    const placeholder = getComposeInputPlaceholder(narrow, ownEmail, usersByEmail);
+    const placeholder = getComposeInputPlaceholder(narrow, ownUserId, usersById);
     expect(placeholder).toEqual({ text: 'Message group' });
   });
 });

src/compose/getComposeInputPlaceholder.js

@@ -4,23 +4,23 @@ import { caseNarrowDefault } from '../utils/narrow';
 
 export default (
   narrow: Narrow,
-  ownEmail: string,
-  usersByEmail: Map<string, UserOrBot>,
+  ownUserId: number,
+  usersById: Map<number, UserOrBot>,
 ): LocalizableText =>
   caseNarrowDefault(
     narrow,
     {
-      pm: emails => {
-        if (emails.length > 1) {
+      pm: (emails, ids) => {
+        if (ids.length > 1) {
           return { text: 'Message group' };
         }
-        const email = emails[0];
+        const userId = ids[0];
 
-        if (email === ownEmail) {
+        if (userId === ownUserId) {
           return { text: 'Jot down something' };
         }
 
-        const user = usersByEmail.get(email);
+        const user = usersById.get(userId);
         if (!user) {
           return { text: 'Type a message' };
         }

src/outbox/outboxActions.js

@@ -12,7 +12,7 @@ import {
 } from '../actionConstants';
 import { getAuth } from '../selectors';
 import * as api from '../api';
-import { getAllUsersByEmail, getOwnUser } from '../users/userSelectors';
+import { getAllUsersById, getOwnUser } from '../users/userSelectors';
 import { getUsersAndWildcards } from '../users/userHelpers';
 import { caseNarrowPartial } from '../utils/narrow';
 import { BackoffMachine } from '../utils/async';
@@ -98,13 +98,13 @@ export const sendOutbox = () => async (dispatch: Dispatch, getState: GetState) =
 };
 
 // A valid display_recipient with all the thread's users, sorted by ID.
-const mapEmailsToUsers = (emails, allUsersByEmail, ownUser) => {
-  const result = emails.map(email => {
-    const user = allUsersByEmail.get(email);
+const recipientsFromIds = (ids, allUsersById, ownUser) => {
+  const result = ids.map(id => {
+    const user = allUsersById.get(id);
     if (!user) {
       throw new Error('outbox: missing user when preparing to send PM');
     }
-    return { email, id: user.user_id, full_name: user.full_name };
+    return { id, email: user.email, full_name: user.full_name };
   });
   if (!result.some(r => r.id === ownUser.user_id)) {
     result.push({ email: ownUser.email, id: ownUser.user_id, full_name: ownUser.full_name });
@@ -120,13 +120,13 @@ type DataFromNarrow = SubsetProperties<
 
 const extractTypeToAndSubjectFromNarrow = (
   narrow: Narrow,
-  allUsersByEmail: Map<string, UserOrBot>,
+  allUsersById: Map<number, UserOrBot>,
   ownUser: UserOrBot,
 ): DataFromNarrow =>
   caseNarrowPartial(narrow, {
-    pm: emails => ({
+    pm: (emails, ids) => ({
       type: 'private',
-      display_recipient: mapEmailsToUsers(emails, allUsersByEmail, ownUser),
+      display_recipient: recipientsFromIds(ids, allUsersById, ownUser),
       subject: '',
     }),
 
@@ -167,7 +167,7 @@ export const addToOutbox = (narrow: Narrow, content: string) => async (
   dispatch(
     messageSendStart({
       isSent: false,
-      ...extractTypeToAndSubjectFromNarrow(narrow, getAllUsersByEmail(state), ownUser),
+      ...extractTypeToAndSubjectFromNarrow(narrow, getAllUsersById(state), ownUser),
       markdownContent: content,
       content: getContentPreview(content, state),
       timestamp: localTime,

src/title/Title.js

@@ -30,11 +30,11 @@ export default class Title extends PureComponent<Props> {
       allPrivate: () => <TitleSpecial code="private" color={color} />,
       stream: () => <TitleStream narrow={narrow} color={color} />,
       topic: () => <TitleStream narrow={narrow} color={color} />,
-      pm: emails =>
-        emails.length === 1 ? (
-          <TitlePrivate email={emails[0]} color={color} />
+      pm: (emails, ids) =>
+        ids.length === 1 ? (
+          <TitlePrivate userId={ids[0]} color={color} />
         ) : (
-          <TitleGroup narrow={narrow} />
+          <TitleGroup userIds={ids} />
         ),
       search: () => null,
     });