UserAvatarWithPresence [nfc]: Finish migration to UserId-based interface

By unexporting the old UserAvatarWithPresence and giving its name to
UserAvatarWithPresenceById.

Author: chrisbobbe

src/common/UserAvatarWithPresence.js

@@ -6,7 +6,6 @@ import type { UserId } from '../types';
 import { createStyleSheet } from '../styles';
 import UserAvatar from './UserAvatar';
 import PresenceStatusIndicator from './PresenceStatusIndicator';
-import { AvatarURL } from '../utils/avatar';
 import { tryGetUserForId } from '../users/userSelectors';
 import { useSelector } from '../react-redux';
 
@@ -19,57 +18,21 @@ const styles = createStyleSheet({
 });
 
 type Props = $ReadOnly<{|
-  avatarUrl: AvatarURL,
+  userId: UserId,
   size: number,
   onPress?: () => void,
-  email: string,
   isMuted?: boolean,
 |}>;
 
 /**
  * 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 [onPress] - Event fired on pressing the component.
- */
-export default function UserAvatarWithPresence(props: Props): Node {
-  const { avatarUrl, email, isMuted, size, onPress } = props;
-
-  return (
-    <UserAvatar avatarUrl={avatarUrl} size={size} isMuted={isMuted} onPress={onPress}>
-      <PresenceStatusIndicator
-        style={styles.status}
-        email={email}
-        hideIfOffline
-        useOpaqueBackground
-      />
-    </UserAvatar>
-  );
-}
-
-/**
- * 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 function UserAvatarWithPresenceById(
-  props: $ReadOnly<{|
-    ...$Diff<Props, {| avatarUrl: mixed, email: mixed |}>,
-    userId: UserId,
-  |}>,
-): Node {
-  const { userId, ...restProps } = props;
+export default function UserAvatarWithPresence(props: Props): Node {
+  const { userId, isMuted, size, onPress } = props;
 
   const user = useSelector(state => tryGetUserForId(state, userId));
   if (!user) {
@@ -79,5 +42,14 @@ export function UserAvatarWithPresenceById(
     return null;
   }
 
-  return <UserAvatarWithPresence {...restProps} avatarUrl={user.avatar_url} email={user.email} />;
+  return (
+    <UserAvatar avatarUrl={user.avatar_url} size={size} isMuted={isMuted} onPress={onPress}>
+      <PresenceStatusIndicator
+        style={styles.status}
+        email={user.email}
+        hideIfOffline
+        useOpaqueBackground
+      />
+    </UserAvatar>
+  );
 }

src/lightbox/LightboxHeader.js

@@ -6,7 +6,7 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 
 import { shortTime, humanDate } from '../utils/date';
 import { createStyleSheet } from '../styles';
-import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
+import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { Icon } from '../common/Icons';
 import { OfflineNoticePlaceholder } from '../boot/OfflineNoticeProvider';
 import type { UserId } from '../api/idTypes';
@@ -63,7 +63,7 @@ export default function LightboxHeader(props: Props): Node {
     <SafeAreaView mode="padding" edges={['top']}>
       <OfflineNoticePlaceholder />
       <SafeAreaView mode="padding" edges={['right', 'left']} style={styles.contentArea}>
-        <UserAvatarWithPresenceById size={36} userId={senderId} />
+        <UserAvatarWithPresence size={36} userId={senderId} />
         <View style={styles.text}>
           <Text style={styles.name} numberOfLines={1}>
             {senderName}

src/title/TitleGroup.js

@@ -8,7 +8,7 @@ import { useSelector } from '../react-redux';
 import { getMutedUsers, getOwnUserId } from '../selectors';
 import { pmUiRecipientsFromKeyRecipients, type PmKeyRecipients } from '../utils/recipient';
 import styles, { createStyleSheet } from '../styles';
-import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
+import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import { useNavigation } from '../react-navigation';
 
 type Props = $ReadOnly<{|
@@ -32,7 +32,7 @@ export default function TitleGroup(props: Props): Node {
     <View style={styles.navWrapper}>
       {userIds.map(userId => (
         <View key={userId} style={componentStyles.titleAvatar}>
-          <UserAvatarWithPresenceById
+          <UserAvatarWithPresence
             onPress={() => {
               navigation.push('account-details', { userId });
             }}

src/title/TitlePrivate.js

@@ -9,7 +9,7 @@ import styles, { createStyleSheet } from '../styles';
 import { useSelector } from '../react-redux';
 import Touchable from '../common/Touchable';
 import ViewPlaceholder from '../common/ViewPlaceholder';
-import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
+import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import ActivityText from './ActivityText';
 import { tryGetUserForId } from '../users/userSelectors';
 import { useNavigation } from '../react-navigation';
@@ -44,7 +44,7 @@ export default function TitlePrivate(props: Props): Node {
       style={componentStyles.outer}
     >
       <View style={componentStyles.inner}>
-        <UserAvatarWithPresenceById size={32} userId={user.user_id} />
+        <UserAvatarWithPresence size={32} userId={user.user_id} />
         <ViewPlaceholder width={8} />
         <View style={componentStyles.textWrapper}>
           <Text style={[styles.navTitle, { color }]} numberOfLines={1} ellipsizeMode="tail">

src/user-picker/AvatarItem.js

@@ -5,7 +5,7 @@ import { Animated, Easing, View } from 'react-native';
 import type AnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue';
 
 import type { UserId, UserOrBot } from '../types';
-import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
+import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import ComponentWithOverlay from '../common/ComponentWithOverlay';
 import ZulipText from '../common/ZulipText';
 import Touchable from '../common/Touchable';
@@ -77,7 +77,7 @@ export default class AvatarItem extends PureComponent<Props> {
             overlayPosition="bottom-right"
             overlay={<IconCancel color="gray" size={20} />}
           >
-            <UserAvatarWithPresenceById key={user.user_id} size={50} userId={user.user_id} />
+            <UserAvatarWithPresence key={user.user_id} size={50} userId={user.user_id} />
           </ComponentWithOverlay>
         </Touchable>
         <View style={styles.textFrame}>

src/users/UserItem.js

@@ -8,7 +8,7 @@ import type { UserId } from '../types';
 import ZulipText from '../common/ZulipText';
 import Touchable from '../common/Touchable';
 import UnreadCount from '../common/UnreadCount';
-import { UserAvatarWithPresenceById } from '../common/UserAvatarWithPresence';
+import UserAvatarWithPresence from '../common/UserAvatarWithPresence';
 import globalStyles, { createStyleSheet, BRAND_COLOR } from '../styles';
 import { useSelector } from '../react-redux';
 import { getUserForId } from './userSelectors';
@@ -96,7 +96,7 @@ export function UserItemRaw<
   return (
     <Touchable onPress={onPress && handlePress}>
       <View style={[styles.wrapper, isSelected && styles.selectedRow]}>
-        <UserAvatarWithPresenceById
+        <UserAvatarWithPresence
           // At size medium, keep just big enough for a 48px touch target.
           size={size === 'large' ? 48 : 32}
           userId={user.user_id}