check for changes on member avatars only on re rendering

ts/components/Avatar.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import classNames from 'classnames';
 
 import { AvatarPlaceHolder, ClosedGroupAvatar } from './AvatarPlaceHolder';
-import { ConversationAttributes } from '../../js/models/conversations';
+import { ConversationAvatar } from './session/usingClosedConversationDetails';
 
 interface Props {
   avatarPath?: string;
   name?: string; // display name, profileName or phoneNumber, whatever is set first
   pubkey?: string;
   size: number;
-  closedMemberConversations?: Array<ConversationAttributes>;
+  memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
   onAvatarClick?: () => void;
 }
 
@@ -75,13 +75,13 @@ export class Avatar extends React.PureComponent<Props, State> {
   }
 
   public renderNoImage() {
-    const { closedMemberConversations, size } = this.props;
+    const { memberAvatars, size } = this.props;
     // if no image but we have conversations set for the group, renders group members avatars
-    if (closedMemberConversations) {
+    if (memberAvatars) {
       return (
         <ClosedGroupAvatar
           size={size}
-          conversations={closedMemberConversations}
+          memberAvatars={memberAvatars}
           i18n={window.i18n}
         />
       );

ts/components/AvatarPlaceHolder/ClosedGroupAvatar.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Avatar } from '../Avatar';
 import { LocalizerType } from '../../types/Util';
-import { ConversationAttributes } from '../../../js/models/conversations';
+import { ConversationAvatar } from '../session/usingClosedConversationDetails';
 
 interface Props {
   size: number;
-  conversations: Array<ConversationAttributes>;
+  memberAvatars: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
   i18n: LocalizerType;
 }
 
@@ -31,11 +31,11 @@ export class ClosedGroupAvatar extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { conversations, size } = this.props;
+    const { memberAvatars, size } = this.props;
     const avatarsDiameter = this.getClosedGroupAvatarsSize(size);
 
-    const conv1 = conversations.length > 0 ? conversations[0] : undefined;
-    const conv2 = conversations.length > 1 ? conversations[1] : undefined;
+    const conv1 = memberAvatars.length > 0 ? memberAvatars[0] : undefined;
+    const conv2 = memberAvatars.length > 1 ? memberAvatars[1] : undefined;
     const name1 = conv1?.name || conv1?.id || undefined;
     const name2 = conv2?.name || conv2?.id || undefined;
 

ts/components/ConversationListItem.tsx

@@ -21,7 +21,10 @@ import {
   getLeaveGroupMenuItem,
 } from '../session/utils/Menu';
 
-import { usingClosedConversationDetails } from './session/usingClosedConversationDetails';
+import {
+  ConversationAvatar,
+  usingClosedConversationDetails,
+} from './session/usingClosedConversationDetails';
 
 export type PropsData = {
   id: string;
@@ -55,7 +58,7 @@ export type PropsData = {
   isSecondary?: boolean;
   isGroupInvitation?: boolean;
   isKickedFromGroup?: boolean;
-  closedMemberConversations?: any; // this is added by usingClosedConversationDetails
+  memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
 };
 
 type PropsHousekeeping = {
@@ -80,7 +83,14 @@ class ConversationListItem extends React.PureComponent<Props> {
   }
 
   public renderAvatar() {
-    const { avatarPath, i18n, name, phoneNumber, profileName } = this.props;
+    const {
+      avatarPath,
+      i18n,
+      name,
+      phoneNumber,
+      profileName,
+      memberAvatars,
+    } = this.props;
 
     const iconSize = 36;
     const userName = name || profileName || phoneNumber;
@@ -91,7 +101,7 @@ class ConversationListItem extends React.PureComponent<Props> {
           avatarPath={avatarPath}
           name={userName}
           size={iconSize}
-          closedMemberConversations={this.props.closedMemberConversations}
+          memberAvatars={memberAvatars}
           pubkey={phoneNumber}
         />
       </div>

ts/components/conversation/ConversationHeader.tsx

@@ -16,7 +16,10 @@ import {
   SessionButtonType,
 } from '../session/SessionButton';
 import * as Menu from '../../session/utils/Menu';
-import { usingClosedConversationDetails } from '../session/usingClosedConversationDetails';
+import {
+  ConversationAvatar,
+  usingClosedConversationDetails,
+} from '../session/usingClosedConversationDetails';
 
 export interface TimerOption {
   name: string;
@@ -92,7 +95,7 @@ interface Props {
   onUpdateGroupName: () => void;
 
   i18n: LocalizerType;
-  closedMemberConversations?: any; // this is added by usingClosedConversationDetails
+  memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
 }
 
 class ConversationHeader extends React.Component<Props> {
@@ -198,7 +201,7 @@ class ConversationHeader extends React.Component<Props> {
   public renderAvatar() {
     const {
       avatarPath,
-      closedMemberConversations,
+      memberAvatars,
       name,
       phoneNumber,
       profileName,
@@ -215,7 +218,7 @@ class ConversationHeader extends React.Component<Props> {
           onAvatarClick={() => {
             this.onAvatarClickBound(phoneNumber);
           }}
-          closedMemberConversations={closedMemberConversations}
+          memberAvatars={memberAvatars}
           pubkey={phoneNumber}
         />
       </span>

ts/components/session/SessionGroupSettings.tsx

@@ -10,7 +10,10 @@ import { SessionDropdown } from './SessionDropdown';
 import { MediaGallery } from '../conversation/media-gallery/MediaGallery';
 import _ from 'lodash';
 import { TimerOption } from '../conversation/ConversationHeader';
-import { usingClosedConversationDetails } from '../session/usingClosedConversationDetails';
+import {
+  ConversationAvatar,
+  usingClosedConversationDetails,
+} from '../session/usingClosedConversationDetails';
 
 interface Props {
   id: string;
@@ -24,7 +27,7 @@ interface Props {
   amMod: boolean;
   isKickedFromGroup: boolean;
   isBlocked: boolean;
-  closedMemberConversations?: any; // this is added by usingClosedConversationDetails
+  memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
 
   onGoBack: () => void;
   onInviteContacts: () => void;
@@ -311,7 +314,7 @@ class SessionGroupSettings extends React.Component<Props, any> {
 
   private renderHeader() {
     const {
-      closedMemberConversations,
+      memberAvatars,
       id,
       onGoBack,
       onInviteContacts,
@@ -338,7 +341,7 @@ class SessionGroupSettings extends React.Component<Props, any> {
           avatarPath={avatarPath}
           name={userName}
           size={80}
-          closedMemberConversations={closedMemberConversations}
+          memberAvatars={memberAvatars}
           pubkey={id}
         />
         <div className="invite-friends-container">

ts/components/session/usingClosedConversationDetails.tsx

@@ -2,9 +2,16 @@ import { GroupUtils } from '../../session/utils';
 import { UserUtil } from '../../util';
 import { PubKey } from '../../session/types';
 import React from 'react';
-import { ConversationAttributes } from '../../../js/models/conversations';
+import * as _ from 'lodash';
+
+export type ConversationAvatar = {
+  avatarPath?: string;
+  id?: string; // member's pubkey
+  name?: string;
+};
+
 type State = {
-  closedMemberConversations?: Array<ConversationAttributes>;
+  memberAvatars?: Array<ConversationAvatar>; // this is added by usingClosedConversationDetails
 };
 
 export function usingClosedConversationDetails(WrappedComponent: any) {
@@ -12,7 +19,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) {
     constructor(props: any) {
       super(props);
       this.state = {
-        closedMemberConversations: undefined,
+        memberAvatars: undefined,
       };
     }
 
@@ -27,7 +34,7 @@ export function usingClosedConversationDetails(WrappedComponent: any) {
     public render() {
       return (
         <WrappedComponent
-          closedMemberConversations={this.state.closedMemberConversations}
+          memberAvatars={this.state.memberAvatars}
           {...this.props}
         />
       );
@@ -58,20 +65,24 @@ export function usingClosedConversationDetails(WrappedComponent: any) {
         if (ourself) {
           members.push(ourPrimary);
         }
-        // no need to forward more than 2 conversation for rendering the group avatar
+        // no need to forward more than 2 conversations for rendering the group avatar
         members.slice(0, 2);
-        const membersConvos = await Promise.all(
-          members.map(
-            async m =>
-              (
-                await window.ConversationController.getOrCreateAndWait(
-                  m.key,
-                  'private'
-                )
-              ).cachedProps
+        const memberConvos = await Promise.all(
+          members.map(async m =>
+            window.ConversationController.getOrCreateAndWait(m.key, 'private')
           )
         );
-        this.setState({ closedMemberConversations: membersConvos });
+        const memberAvatars = memberConvos.map(m => {
+          return {
+            avatarPath: m.getAvatar()?.url || null,
+            id: m.id,
+            name: m.get('name') || m.get('profileName') || m.id,
+          };
+        });
+
+        if (!_.isEqual(memberAvatars, this.state.memberAvatars)) {
+          this.setState({ memberAvatars });
+        }
       }
     }
   };