Merge pull request #381 from GetStream/display-other-user-image-for-one-to-one-chat

feat: Display other user's image in 1:1 channels #380

Author: szuperaz

projects/stream-chat-angular/src/lib/avatar/avatar.component.html

@@ -12,11 +12,11 @@
   }"
 >
   <img
-    *ngIf="imageUrl && !isError; else fallback"
+    *ngIf="(imageUrl || fallbackChannelImage) && !isError; else fallback"
     class="str-chat__avatar-image str-chat__avatar-image{{
       isLoaded ? ' str-chat__avatar-image--loaded' : ''
     }}"
-    src="{{ imageUrl }}"
+    src="{{ imageUrl || fallbackChannelImage }}"
     alt="{{ initials }}"
     data-testid="avatar-img"
     (load)="isLoaded = true"

projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts

@@ -169,4 +169,43 @@ describe('AvatarComponent', () => {
 
     expect(component.initials).toBe('#');
   });
+
+  it(`should display other user's image in 1:1 chats`, () => {
+    const channel = generateMockChannels()[0];
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack', image: 'url/to/img' },
+      },
+      [chatClientServiceMock.chatClient.user.id]: {
+        user_id: chatClientServiceMock.chatClient.user.id,
+        user: { id: chatClientServiceMock.chatClient.user.id, name: 'Sara' },
+      },
+    };
+    component.imageUrl = undefined;
+    component.channel = channel;
+    component.type = 'channel';
+    fixture.detectChanges();
+
+    expect(queryImg()?.src).toContain('url/to/img');
+
+    component.imageUrl = 'channel/img';
+    fixture.detectChanges();
+
+    expect(queryImg()?.src).toContain('channel/img');
+
+    channel.state.members.otheruser.user!.image = undefined;
+    component.imageUrl = undefined;
+    fixture.detectChanges();
+
+    expect(queryImg()).toBeNull();
+
+    channel.state.members['thirduser'] = {
+      user_id: 'thirduser',
+      user: { id: 'thirduser', image: 'profile/img' },
+    };
+    fixture.detectChanges();
+
+    expect(queryImg()).toBeNull();
+  });
 });

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts

@@ -57,13 +57,9 @@ export class AvatarComponent {
       if (this.channel?.data?.name) {
         result = this.channel?.data?.name;
       } else {
-        const otherMembers = Object.values(
-          this.channel?.state?.members || {}
-        ).filter(
-          (m) => m.user_id !== this.chatClientService.chatClient.user?.id
-        );
-        if (otherMembers.length === 1) {
-          result = otherMembers[0].user?.name || otherMembers[0].user?.id || '';
+        const otherMember = this.getOtherMemberIfOneToOneChannel();
+        if (otherMember) {
+          result = otherMember.name || otherMember.id || '';
         } else {
           result = '#';
         }
@@ -72,4 +68,28 @@ export class AvatarComponent {
 
     return result.charAt(0) || '';
   }
+
+  get fallbackChannelImage() {
+    if (this.type !== 'channel') {
+      return undefined;
+    } else {
+      const otherMember = this.getOtherMemberIfOneToOneChannel();
+      if (otherMember) {
+        return otherMember.image;
+      } else {
+        return undefined;
+      }
+    }
+  }
+
+  private getOtherMemberIfOneToOneChannel() {
+    const otherMembers = Object.values(
+      this.channel?.state?.members || {}
+    ).filter((m) => m.user_id !== this.chatClientService.chatClient.user?.id);
+    if (otherMembers.length === 1) {
+      return otherMembers[0].user;
+    } else {
+      return undefined;
+    }
+  }
 }