simplify a lot avatar props

js/views/create_group_dialog_view.js

@@ -46,6 +46,7 @@
         props: {
           titleText: this.titleText,
           isPublic: this.isPublic,
+          pubkey: this.groupId,
           groupName: this.groupName,
           okText: i18n('ok'),
           cancelText: i18n('cancel'),

ts/components/Avatar.tsx

@@ -1,23 +1,15 @@
 import React from 'react';
 import classNames from 'classnames';
 
-import { getInitials } from '../util/getInitials';
-import { LocalizerType } from '../types/Util';
 import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
 import { ConversationAttributes } from '../../js/models/conversations';
 
 interface Props {
   avatarPath?: string;
-  color?: string;
-  conversationType: 'group' | 'direct';
-  isPublic?: boolean;
-  noteToSelf?: boolean;
-  name?: string;
-  phoneNumber?: string;
-  profileName?: string;
+  name?: string; // display name, profileName or phoneNumber, whatever is set first
+  pubkey: string;
   size: number;
   closedMemberConversations?: Array<ConversationAttributes>;
-  i18n?: LocalizerType;
   onAvatarClick?: () => void;
 }
 
@@ -50,19 +42,15 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   public renderIdenticon() {
-    const { phoneNumber, size, name, profileName } = this.props;
+    const { size, name, pubkey } = this.props;
 
-    if (!phoneNumber) {
-      window.log.error('Empty phoneNumber for identicon');
-      return <></>;
-    }
+    const userName = name || '0';
 
-    const userName = profileName || name;
     return (
       <AvatarPlaceHolder
-        phoneNumber={phoneNumber}
         diameter={size}
         name={userName}
+        pubkey={pubkey}
         colors={this.getAvatarColors()}
         borderColor={this.getAvatarBorderColor()}
       />
@@ -70,44 +58,31 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   public renderImage() {
-    const { avatarPath, name, phoneNumber, profileName } = this.props;
+    const { avatarPath, name } = this.props;
     const { imageBroken } = this.state;
 
     if (!avatarPath || imageBroken) {
       return null;
     }
 
-    const title = `${name || phoneNumber}${
-      !name && profileName ? ` ~${profileName}` : ''
-    }`;
-
     return (
       <img
         onError={this.handleImageErrorBound}
-        alt={window.i18n('contactAvatarAlt', [title])}
+        alt={window.i18n('contactAvatarAlt', [name])}
         src={avatarPath}
       />
     );
   }
 
   public renderNoImage() {
-    const {
-      conversationType,
-      closedMemberConversations,
-      isPublic,
-      size,
-      i18n,
-    } = this.props;
-
-    const isGroup = conversationType === 'group';
-
-    if (isGroup && !isPublic && closedMemberConversations) {
-      const forcedI18n = i18n || window.i18n;
+    const { closedMemberConversations, size } = this.props;
+    // if no image but we have conversations set for the group, renders group members avatars
+    if (closedMemberConversations) {
       return (
         <ClosedGroupAvatar
           size={size}
           conversations={closedMemberConversations}
-          i18n={forcedI18n}
+          i18n={window.i18n}
         />
       );
     }
@@ -119,12 +94,9 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   public render() {
-    const { avatarPath, color, size, conversationType } = this.props;
+    const { avatarPath, size } = this.props;
     const { imageBroken } = this.state;
-
-    // If it's a direct conversation then we must have an identicon
-    const hasAvatar = avatarPath || conversationType === 'direct';
-    const hasImage = hasAvatar && !imageBroken;
+    const hasImage = avatarPath && !imageBroken;
 
     if (
       size !== 28 &&
@@ -142,8 +114,7 @@ export class Avatar extends React.PureComponent<Props, State> {
         className={classNames(
           'module-avatar',
           `module-avatar--${size}`,
-          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
-          !hasImage ? `module-avatar--${color}` : null
+          hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image'
         )}
         onClick={e => {
           this.onAvatarClickBound(e);
@@ -163,14 +134,9 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   private renderAvatarOrIdenticon() {
-    const { avatarPath, conversationType } = this.props;
-
-    // If it's a direct conversation then we must have an identicon
-    const hasAvatar = avatarPath || conversationType === 'direct';
+    const { avatarPath } = this.props;
 
-    return hasAvatar && avatarPath
-      ? this.renderImage()
-      : this.renderIdenticon();
+    return avatarPath ? this.renderImage() : this.renderIdenticon();
   }
 
   private getAvatarColors(): Array<string> {

ts/components/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -3,10 +3,10 @@ import { getInitials } from '../../util/getInitials';
 
 interface Props {
   diameter: number;
-  phoneNumber: string;
+  name: string;
+  pubkey: string;
   colors: Array<string>;
   borderColor: string;
-  name?: string;
 }
 
 interface State {
@@ -23,16 +23,16 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
   }
 
   public componentDidMount() {
-    void this.sha512(this.props.phoneNumber).then((sha512Seed: string) => {
+    void this.sha512(this.props.pubkey).then((sha512Seed: string) => {
       this.setState({ sha512Seed });
     });
   }
 
   public componentDidUpdate(prevProps: Props, prevState: State) {
-    if (this.props.phoneNumber === prevProps.phoneNumber) {
+    if (this.props.name === prevProps.name) {
       return;
     }
-    void this.sha512(this.props.phoneNumber).then((sha512Seed: string) => {
+    void this.sha512(this.props.name).then((sha512Seed: string) => {
       this.setState({ sha512Seed });
     });
   }
@@ -42,12 +42,9 @@ export class AvatarPlaceHolder extends React.PureComponent<Props, State> {
       return <></>;
     }
 
-    const { borderColor, colors, diameter, phoneNumber, name } = this.props;
+    const { borderColor, colors, diameter, name } = this.props;
     const r = diameter / 2;
-    const initial =
-      getInitials(name)?.toLocaleUpperCase() ||
-      getInitials(phoneNumber)?.toLocaleUpperCase() ||
-      '0';
+    const initial = getInitials(name)?.toLocaleUpperCase() || '0';
     const viewBox = `0 0 ${diameter} ${diameter}`;
     const fontSize = diameter * 0.5;
 

ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -11,21 +11,17 @@ interface Props {
 
 export class ClosedGroupAvatar extends React.PureComponent<Props> {
   public render() {
-    const { conversations, size, i18n } = this.props;
-
-    if (conversations.length === 1) {
+    const { conversations, size } = this.props;
+    // FIXME audric render grey circle for missing avatar
+    if (conversations.length < 2) {
       const conv = conversations[0];
+      const name = conv.name || conv.id;
       return (
         <Avatar
           avatarPath={conv.avatarPath}
-          noteToSelf={conv.isMe}
-          conversationType="direct"
-          i18n={i18n}
           name={name}
-          phoneNumber={conv.id}
-          profileName={conv.name}
           size={size}
-          isPublic={false}
+          pubkey={conv.id}
         />
       );
     } else if (conversations.length > 1) {
@@ -60,30 +56,23 @@ export class ClosedGroupAvatar extends React.PureComponent<Props> {
       }
       const conv1 = conversations[0];
       const conv2 = conversations[1];
+      const name1 = conv1.name || conv1.id;
+      const name2 = conv2.name || conv2.id;
+
       // use the 2 first members as group avatars
       return (
         <div className="module-avatar__icon-closed">
           <Avatar
             avatarPath={conv1.avatarPath}
-            noteToSelf={conv1.isMe}
-            conversationType="direct"
-            i18n={i18n}
-            name={name}
-            phoneNumber={conv1.id}
-            profileName={conv1.name}
+            name={name1}
             size={avatarsDiameter}
-            isPublic={false}
+            pubkey={conv1.id}
           />
           <Avatar
             avatarPath={conv2.avatarPath}
-            noteToSelf={conv2.isMe}
-            conversationType="direct"
-            i18n={i18n}
-            name={name}
-            phoneNumber={conv2.id}
-            profileName={conv2.name}
+            name={name2}
             size={avatarsDiameter}
-            isPublic={false}
+            pubkey={conv2.id}
           />
         </div>
       );

ts/components/ContactListItem.tsx

@@ -20,25 +20,16 @@ interface Props {
 
 export class ContactListItem extends React.Component<Props> {
   public renderAvatar() {
-    const {
-      avatarPath,
-      i18n,
-      color,
-      name,
-      phoneNumber,
-      profileName,
-    } = this.props;
+    const { avatarPath, name, phoneNumber, profileName } = this.props;
+
+    const userName = name || profileName || phoneNumber;
 
     return (
       <Avatar
         avatarPath={avatarPath}
-        color={color}
-        conversationType="direct"
-        i18n={i18n}
-        name={name}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
+        name={userName}
         size={36}
+        pubkey={phoneNumber}
       />
     );
   }

ts/components/ConversationListItem.tsx

@@ -80,34 +80,19 @@ class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderAvatar() {
-    const {
-      avatarPath,
-      color,
-      type,
-      i18n,
-      isMe,
-      name,
-      phoneNumber,
-      profileName,
-      isPublic,
-    } = this.props;
+    const { avatarPath, i18n, name, phoneNumber, profileName } = this.props;
 
     const iconSize = 36;
+    const userName = name || profileName || phoneNumber;
 
     return (
       <div className="module-conversation-list-item__avatar-container">
         <Avatar
           avatarPath={avatarPath}
-          color={color}
-          noteToSelf={isMe}
-          conversationType={type}
-          i18n={i18n}
-          name={name}
-          phoneNumber={phoneNumber}
-          profileName={profileName}
+          name={userName}
           size={iconSize}
-          isPublic={isPublic}
           closedMemberConversations={this.props.closedMemberConversations}
+          pubkey={phoneNumber}
         />
       </div>
     );

ts/components/EditProfileDialog.tsx

@@ -257,20 +257,12 @@ export class EditProfileDialog extends React.Component<Props, State> {
   }
 
   private renderAvatar() {
-    const avatarPath = this.state.avatar;
-    const color = this.props.avatarColor;
+    const { avatar, profileName } = this.state;
+    const { pubkey } = this.props;
+    const userName = name || profileName || pubkey;
 
     return (
-      <Avatar
-        avatarPath={avatarPath}
-        color={color}
-        conversationType="direct"
-        i18n={this.props.i18n}
-        name={this.state.profileName}
-        phoneNumber={this.props.pubkey}
-        profileName={this.state.profileName}
-        size={80}
-      />
+      <Avatar avatarPath={avatar} name={userName} size={80} pubkey={pubkey} />
     );
   }
 

ts/components/MessageSearchResult.tsx

@@ -100,20 +100,15 @@ export class MessageSearchResult extends React.PureComponent<Props> {
   }
 
   public renderAvatar() {
-    const { from, i18n, to } = this.props;
-    const isNoteToSelf = from.isMe && to.isMe;
+    const { from } = this.props;
+    const userName = from.phoneNumber || from.profileName;
 
     return (
       <Avatar
         avatarPath={from.avatarPath}
-        color={from.color}
-        conversationType="direct"
-        i18n={i18n}
-        name={name}
-        noteToSelf={isNoteToSelf}
-        phoneNumber={from.phoneNumber}
-        profileName={from.profileName}
+        name={userName}
         size={36}
+        pubkey={from.phoneNumber}
       />
     );
   }

ts/components/UserDetailsDialog.tsx

@@ -14,7 +14,7 @@ interface Props {
   isRss: boolean;
   profileName: string;
   avatarPath: string;
-  avatarColor: string;
+  avatarColor: string; //fixme audric toremove
   pubkey: string;
   onClose: any;
   onStartConversation: any;
@@ -64,21 +64,17 @@ export class UserDetailsDialog extends React.Component<Props, State> {
   }
 
   private renderAvatar() {
-    const avatarPath = this.props.avatarPath;
-    const color = this.props.avatarColor;
+    const { avatarPath, pubkey, profileName } = this.props;
     const size = this.state.isEnlargedImageShown ? 300 : 80;
+    const userName = name || profileName || pubkey;
 
     return (
       <Avatar
         avatarPath={avatarPath}
-        color={color}
-        conversationType="direct"
-        i18n={this.props.i18n}
-        name={this.props.profileName}
-        phoneNumber={this.props.pubkey}
-        profileName={this.props.profileName}
+        name={userName}
         size={size}
         onAvatarClick={this.handleShowEnlargedDialog}
+        pubkey={pubkey}
       />
     );
   }

ts/components/conversation/ConversationHeader.tsx

@@ -199,33 +199,24 @@ class ConversationHeader extends React.Component<Props> {
     const {
       avatarPath,
       closedMemberConversations,
-      i18n,
-      isGroup,
-      isMe,
       name,
       phoneNumber,
       profileName,
-      isPublic,
     } = this.props;
 
-    const conversationType = isGroup ? 'group' : 'direct';
+    const userName = name || profileName || phoneNumber;
 
     return (
       <span className="module-conversation-header__avatar">
         <Avatar
           avatarPath={avatarPath}
-          conversationType={conversationType}
-          i18n={i18n}
-          noteToSelf={isMe}
-          name={name}
-          phoneNumber={phoneNumber}
-          profileName={profileName}
+          name={userName}
           size={36}
           onAvatarClick={() => {
             this.onAvatarClickBound(phoneNumber);
           }}
-          isPublic={isPublic}
           closedMemberConversations={closedMemberConversations}
+          pubkey={phoneNumber}
         />
       </span>
     );

ts/components/conversation/MemberList.tsx

@@ -91,17 +91,20 @@ class MemberItem extends React.Component<MemberItemProps> {
   }
 
   private renderAvatar() {
+    const {
+      authorName,
+      authorAvatarPath,
+      authorPhoneNumber,
+      authorProfileName,
+    } = this.props.member;
+    const userName = authorName || authorProfileName || authorPhoneNumber;
+
     return (
       <Avatar
-        avatarPath={this.props.member.authorAvatarPath}
-        color={this.props.member.authorColor}
-        conversationType="direct"
-        i18n={this.props.i18n}
-        name={this.props.member.authorName}
-        phoneNumber={this.props.member.authorPhoneNumber}
-        profileName={this.props.member.authorProfileName}
+        avatarPath={authorAvatarPath}
+        name={userName}
         size={28}
-        isPublic={false}
+        pubkey={authorPhoneNumber}
       />
     );
   }

ts/components/conversation/Message.tsx

@@ -682,21 +682,18 @@ export class Message extends React.PureComponent<Props, State> {
     ) {
       return;
     }
+    const userName = authorName || authorProfileName || authorPhoneNumber;
 
     return (
       <div className="module-message__author-avatar">
         <Avatar
           avatarPath={authorAvatarPath}
-          color={authorColor}
-          conversationType="direct"
-          i18n={i18n}
-          name={authorName}
-          phoneNumber={authorPhoneNumber}
-          profileName={authorProfileName}
+          name={userName}
           size={36}
           onAvatarClick={() => {
             onShowUserDetails(authorPhoneNumber);
           }}
+          pubkey={authorPhoneNumber}
         />
         {senderIsModerator && (
           <div className="module-avatar__icon--crown-wrapper">

ts/components/conversation/MessageDetail.tsx

@@ -37,18 +37,15 @@ interface Props {
 export class MessageDetail extends React.Component<Props> {
   public renderAvatar(contact: Contact) {
     const { i18n } = this.props;
-    const { avatarPath, color, phoneNumber, name, profileName } = contact;
+    const { avatarPath, phoneNumber, name, profileName } = contact;
+    const userName = name || profileName || phoneNumber;
 
     return (
       <Avatar
         avatarPath={avatarPath}
-        color={color}
-        conversationType="direct"
-        i18n={i18n}
-        name={name}
-        phoneNumber={phoneNumber}
-        profileName={profileName}
+        name={userName}
         size={36}
+        pubkey={phoneNumber}
       />
     );
   }

ts/components/conversation/TypingBubble.tsx

@@ -20,29 +20,24 @@ export class TypingBubble extends React.Component<Props> {
   public renderAvatar() {
     const {
       avatarPath,
-      color,
       name,
       phoneNumber,
       profileName,
       conversationType,
-      i18n,
     } = this.props;
 
     if (conversationType !== 'group') {
       return;
     }
+    const userName = name || profileName || phoneNumber;
 
     return (
       <div className="module-message__author-avatar">
         <Avatar
           avatarPath={avatarPath}
-          color={color}
-          conversationType="direct"
-          i18n={i18n}
-          name={name}
-          phoneNumber={phoneNumber}
-          profileName={profileName}
+          name={userName}
           size={36}
+          pubkey={phoneNumber}
         />
       </div>
     );

ts/components/conversation/UpdateGroupNameDialog.tsx

@@ -7,6 +7,7 @@ import { Avatar } from '../Avatar';
 
 interface Props {
   titleText: string;
+  pubkey: string;
   isPublic: boolean;
   groupName: string;
   okText: string;
@@ -176,10 +177,8 @@ export class UpdateGroupNameDialog extends React.Component<Props, State> {
         <div className="avatar-center-inner">
           <Avatar
             avatarPath={avatarPath}
-            conversationType="group"
-            i18n={this.props.i18n}
             size={80}
-            isPublic={isPublic}
+            pubkey={this.props.pubkey}
           />
           <div
             className="image-upload-section"

ts/components/conversation/_contactUtil.tsx

@@ -35,16 +35,9 @@ export function renderAvatar({
     );
   }
 
+  const pubkey = contact.name?.givenName || '0';
   return (
-    <Avatar
-      avatarPath={avatarPath}
-      color="grey"
-      conversationType="direct"
-      i18n={i18n}
-      name={name}
-      size={size}
-      isPublic={false}
-    />
+    <Avatar avatarPath={avatarPath} name={name} size={size} pubkey={pubkey} />
   );
 }
 

ts/components/session/ActionsPanel.tsx

@@ -140,16 +140,15 @@ export class ActionsPanel extends React.Component<Props, State> {
       : undefined;
 
     if (type === SectionType.Profile) {
+      const pubkey = window.storage.get('primaryDevicePubKey');
+      const userName = window.getOurDisplayName() || pubkey;
       return (
         <Avatar
           avatarPath={avatarPath}
-          conversationType="direct"
-          i18n={window.i18n}
-          // tslint:disable-next-line: no-backbone-get-set-outside-model
-          phoneNumber={window.storage.get('primaryDevicePubKey')}
           size={28}
           onAvatarClick={handleClick}
-          profileName={window.getOurDisplayName()}
+          name={userName}
+          pubkey={pubkey}
         />
       );
     }

ts/components/session/SessionGroupSettings.tsx

@@ -325,6 +325,7 @@ class SessionGroupSettings extends React.Component<Props, any> {
     const showInviteContacts =
       (isPublic || isAdmin) && !isKickedFromGroup && !isBlocked;
 
+    const userName = id;
     return (
       <div className="group-settings-header">
         <SessionIconButton
@@ -335,11 +336,10 @@ class SessionGroupSettings extends React.Component<Props, any> {
         />
         <Avatar
           avatarPath={avatarPath}
-          phoneNumber={id}
-          conversationType="group"
+          name={userName}
           size={80}
-          isPublic={isPublic}
           closedMemberConversations={closedMemberConversations}
+          pubkey={id}
         />
         <div className="invite-friends-container">
           {showInviteContacts && (

ts/components/session/SessionMemberListItem.tsx

@@ -86,16 +86,19 @@ export class SessionMemberListItem extends React.Component<Props, State> {
   }
 
   private renderAvatar() {
+    const {
+      authorAvatarPath,
+      authorName,
+      authorPhoneNumber,
+      authorProfileName,
+    } = this.props.member;
+    const userName = authorName || authorProfileName || authorPhoneNumber;
     return (
       <Avatar
-        avatarPath={this.props.member.authorAvatarPath}
-        color={this.props.member.authorColor}
-        conversationType="direct"
-        i18n={window.i18n}
-        name={this.props.member.authorName}
-        phoneNumber={this.props.member.authorPhoneNumber}
-        profileName={this.props.member.authorProfileName}
+        avatarPath={authorAvatarPath}
+        name={userName}
         size={28}
+        pubkey={authorPhoneNumber}
       />
     );
   }

ts/components/session/usingClosedConversationDetails.tsx

@@ -42,6 +42,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) {
         phoneNumber,
         id,
       } = this.props;
+
       if (
         !isPublic &&
         (conversationType === 'group' || type === 'group' || isGroup)