Merge pull request #263 from GetStream/member-list-if-no-channel-name

Member list if no channel name

Author: szuperaz

docusaurus/docs/Angular/components/MessageComponent.mdx

@@ -46,7 +46,7 @@ The `Message` component uses the [`parseDate`](https://github.com/GetStream/stre
 
 ### Read by
 
-The `Message` component uses the [`getReadByText`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/message/read-by-text.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
+The `Message` component uses the [`listUsers`](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/list-users.ts) utility function to display the list of people who have read a particular message in a user friendly way (for example _Bob, Sophie, Jack, Rose, John and 1 more_).
 
 ### Loading indicator
 

docusaurus/docs/Angular/components/MessageListComponent.mdx

@@ -7,10 +7,6 @@ The `MessageList` displays messages using pagination, new messages are loaded wh
 
 ## Customization
 
-**Example 1** - Using a custom message list component
-
-## Customization
-
 See [our customization guide](../concepts/customization.mdx) on how to provide your own message list component.
 
 :::note

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.html

@@ -8,11 +8,11 @@
   </div>
   <stream-avatar-placeholder
     imageUrl="{{ activeChannel?.data?.image }}"
-    name="{{ activeChannel?.data?.name }}"
+    name="{{ avatarName }}"
   ></stream-avatar-placeholder>
   <div class="str-chat__header-livestream-left">
     <p data-testid="name" class="str-chat__header-livestream-left--title">
-      {{ activeChannel?.data?.name }}
+      {{ displayText }}
     </p>
     <p data-testid="info" class="str-chat__header-livestream-left--members">
       {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}

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

@@ -1,8 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
-import { Channel } from 'stream-chat';
+import { Channel, UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
+import { ChatClientService } from '../chat-client.service';
 import { StreamI18nService } from '../stream-i18n.service';
 import { ChannelHeaderComponent } from './channel-header.component';
 
@@ -14,15 +15,24 @@ describe('ChannelHeaderComponent', () => {
   let channelServiceMock: {
     activeChannel$: Subject<Channel>;
   };
+  let chatClientServiceMock: {
+    chatClient: { user: UserResponse };
+  };
 
   beforeEach(() => {
     channelServiceMock = {
       activeChannel$: new Subject(),
     };
+    chatClientServiceMock = {
+      chatClient: { user: { id: 'currentUser' } },
+    };
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [ChannelHeaderComponent],
-      providers: [{ provide: ChannelService, useValue: channelServiceMock }],
+      providers: [
+        { provide: ChannelService, useValue: channelServiceMock },
+        { provide: ChatClientService, useValue: chatClientServiceMock },
+      ],
     });
     TestBed.inject(StreamI18nService).setTranslation();
     fixture = TestBed.createComponent(ChannelHeaderComponent);
@@ -35,19 +45,27 @@ describe('ChannelHeaderComponent', () => {
   it('should display members count', () => {
     channelServiceMock.activeChannel$.next({
       data: { member_count: 6 },
+      state: {},
     } as any as Channel);
     fixture.detectChanges();
 
     expect(queryInfo()?.textContent).toContain('6 members');
   });
 
-  it('should display channel name', () => {
+  it('should display channel display text', () => {
     channelServiceMock.activeChannel$.next({
-      data: { name: 'Book club' },
+      state: {
+        members: {
+          user1: { user: { id: 'user1', name: 'Ben' } },
+          [chatClientServiceMock.chatClient.user.id]: {
+            user: { id: chatClientServiceMock.chatClient.user.id },
+          },
+        },
+      },
     } as any as Channel);
     fixture.detectChanges();
 
-    expect(queryName()?.textContent).toContain('Book club');
+    expect(queryName()?.textContent).toContain('Ben');
   });
 
   it('should display watcher count', () => {

projects/stream-chat-angular/src/lib/channel-header/channel-header.component.ts

@@ -9,7 +9,9 @@ import { Subscription } from 'rxjs';
 import { Channel } from 'stream-chat';
 import { ChannelListToggleService } from '../channel-list/channel-list-toggle.service';
 import { ChannelService } from '../channel.service';
+import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { getChannelDisplayText } from '../get-channel-display-text';
 import { ChannelActionsContext, DefaultStreamChatGenerics } from '../types';
 
 /**
@@ -30,7 +32,8 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
     private channelService: ChannelService,
     private channelListToggleService: ChannelListToggleService,
     private customTemplatesService: CustomTemplatesService,
-    private cdRef: ChangeDetectorRef
+    private cdRef: ChangeDetectorRef,
+    private chatClientService: ChatClientService
   ) {
     this.channelService.activeChannel$.subscribe((c) => {
       this.activeChannel = c;
@@ -74,4 +77,27 @@ export class ChannelHeaderComponent implements OnInit, OnDestroy {
   get watcherCountParam() {
     return { watcherCount: this.activeChannel?.state?.watcher_count || 0 };
   }
+
+  get displayText() {
+    if (!this.activeChannel) {
+      return '';
+    }
+    return getChannelDisplayText(
+      this.activeChannel,
+      this.chatClientService.chatClient.user!
+    );
+  }
+
+  get avatarName() {
+    if (this.activeChannel?.data?.name) {
+      return this.activeChannel?.data?.name;
+    }
+    const otherMembers = Object.values(
+      this.activeChannel?.state.members || {}
+    ).filter((m) => m.user_id !== this.chatClientService.chatClient.user!.id);
+    if (otherMembers.length === 1) {
+      return otherMembers[0].user?.name || otherMembers[0].user?.name;
+    }
+    return '#';
+  }
 }

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

@@ -3,6 +3,7 @@ import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
 import { ChannelPreviewComponent } from '../channel-preview/channel-preview.component';
 import { ChannelService } from '../channel.service';
+import { ChatClientService } from '../chat-client.service';
 import {
   generateMockChannels,
   mockChannelService,
@@ -28,7 +29,13 @@ describe('ChannelListComponent', () => {
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [ChannelListComponent, ChannelPreviewComponent],
-      providers: [{ provide: ChannelService, useValue: channelServiceMock }],
+      providers: [
+        { provide: ChannelService, useValue: channelServiceMock },
+        {
+          provide: ChatClientService,
+          useValue: { chatClient: { user: { id: 'userid' } } },
+        },
+      ],
     });
     fixture = TestBed.createComponent(ChannelListComponent);
     nativeElement = fixture.nativeElement as HTMLElement;

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.html

@@ -13,7 +13,10 @@
     ></stream-avatar-placeholder>
   </div>
   <div class="str-chat__channel-preview-messenger--right">
-    <div class="str-chat__channel-preview-messenger--name">
+    <div
+      style="position: relative"
+      class="str-chat__channel-preview-messenger--name"
+    >
       <span data-testid="channel-preview-title">{{ title }}</span>
     </div>
     <div

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

@@ -1,9 +1,11 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
+import { UserResponse } from 'stream-chat';
 import { AvatarPlaceholderComponent } from '../avatar-placeholder/avatar-placeholder.component';
 import { AvatarComponent } from '../avatar/avatar.component';
 import { ChannelService } from '../channel.service';
+import { ChatClientService } from '../chat-client.service';
 import {
   generateMockChannels,
   mockChannelService,
@@ -17,21 +19,30 @@ describe('ChannelPreviewComponent', () => {
   let component: ChannelPreviewComponent;
   let nativeElement: HTMLElement;
   let channelServiceMock: MockChannelService;
+  let chatClientServiceMock: {
+    chatClient: { user: UserResponse };
+  };
   let queryContainer: () => HTMLElement | null;
   let queryAvatar: () => AvatarPlaceholderComponent;
   let queryTitle: () => HTMLElement | null;
   let queryLatestMessage: () => HTMLElement | null;
 
   beforeEach(() => {
     channelServiceMock = mockChannelService();
+    chatClientServiceMock = {
+      chatClient: { user: { id: 'currentUser' } },
+    };
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [
         ChannelPreviewComponent,
         AvatarComponent,
         AvatarPlaceholderComponent,
       ],
-      providers: [{ provide: ChannelService, useValue: channelServiceMock }],
+      providers: [
+        { provide: ChannelService, useValue: channelServiceMock },
+        { provide: ChatClientService, useValue: chatClientServiceMock },
+      ],
     });
     fixture = TestBed.createComponent(ChannelPreviewComponent);
     component = fixture.componentInstance;
@@ -146,13 +157,19 @@ describe('ChannelPreviewComponent', () => {
     expect(avatar.imageUrl).toBe(channel.data?.image as string);
   });
 
-  it('should display channel name', () => {
+  it('should display channel display text', () => {
     const channel = generateMockChannels()[0];
-    channelServiceMock.activeChannel$.next(channel);
+    channel.data!.name = undefined;
+    channel.state.members = {
+      user1: { user: { id: 'user1', name: 'Ben' } },
+      [chatClientServiceMock.chatClient.user.id]: {
+        user: { id: chatClientServiceMock.chatClient.user.id },
+      },
+    };
     component.channel = channel;
     fixture.detectChanges();
 
-    expect(queryTitle()?.textContent).toBe(channel.data?.name);
+    expect(queryTitle()?.textContent).toContain('Ben');
   });
 
   describe('should display latest message of channel', () => {
@@ -263,4 +280,47 @@ describe('ChannelPreviewComponent', () => {
 
     expect(queryLatestMessage()?.textContent).toContain('Nothing yet...');
   });
+
+  it('should use "#" as avatar name fallback', () => {
+    const channel = generateMockChannels()[0];
+    channel.data!.name = undefined;
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(component.avatarName).toBe('#');
+  });
+
+  it('should use the name of the other member if channel only has two members', () => {
+    const channel = generateMockChannels()[0];
+    channel.data!.name = undefined;
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack' },
+      },
+      [chatClientServiceMock.chatClient.user.id]: {
+        user_id: chatClientServiceMock.chatClient.user.id,
+        user: { id: chatClientServiceMock.chatClient.user.id, name: 'Sara' },
+      },
+    };
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(component.avatarName).toBe('Jack');
+
+    channel.state.members = {
+      otheruser: {
+        user_id: 'otheruser',
+        user: { id: 'otheruser', name: 'Jack' },
+      },
+      otheruser2: {
+        user_id: 'otheruser2',
+        user: { id: 'otheruser2', name: 'Sara' },
+      },
+    };
+    component.channel = channel;
+    fixture.detectChanges();
+
+    expect(component.avatarName).toBe('#');
+  });
 });

projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.ts

@@ -7,7 +7,9 @@ import {
   MessageResponse,
 } from 'stream-chat';
 import { ChannelService } from '../channel.service';
+import { getChannelDisplayText } from '../get-channel-display-text';
 import { DefaultStreamChatGenerics } from '../types';
+import { ChatClientService } from '../chat-client.service';
 
 /**
  * The `ChannelPreview` component displays a channel preview in the channel list, it consists of the image, name and latest message of the channel.
@@ -28,7 +30,11 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
   private subscriptions: (Subscription | { unsubscribe: () => void })[] = [];
   private canSendReadEvents = true;
 
-  constructor(private channelService: ChannelService, private ngZone: NgZone) {}
+  constructor(
+    private channelService: ChannelService,
+    private ngZone: NgZone,
+    private chatClientService: ChatClientService
+  ) {}
 
   ngOnInit(): void {
     this.subscriptions.push(
@@ -76,11 +82,26 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
   }
 
   get avatarName() {
-    return this.channel?.data?.name;
+    if (this.channel?.data?.name) {
+      return this.channel?.data?.name;
+    }
+    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?.name || otherMembers[0].user?.name;
+    }
+    return '#';
   }
 
   get title() {
-    return this.channel?.data?.name;
+    if (!this.channel) {
+      return '';
+    }
+    return getChannelDisplayText(
+      this.channel,
+      this.chatClientService.chatClient.user!
+    );
   }
 
   setAsActiveChannel(): void {

projects/stream-chat-angular/src/lib/channel.service.ts

@@ -76,6 +76,8 @@ export class ChannelService<
    * :::important
    * If you want to subscribe to channel events, you need to manually reenter Angular's change detection zone, our [Change detection guide](../concepts/change-detection.mdx) explains this in detail.
    * :::
+   *
+   * The active channel will always be marked as read when a new message is received
    */
   activeChannel$: Observable<Channel<T> | undefined>;
   /**
@@ -344,7 +346,7 @@ export class ChannelService<
   }
 
   /**
-   * Sets the given `channel` as active.
+   * Sets the given `channel` as active and marks it as read.
    * @param channel
    */
   setAsActiveChannel(channel: Channel<T>) {
@@ -443,7 +445,7 @@ export class ChannelService<
   }
 
   /**
-   * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation.
+   * Queries the channels with the given filters, sorts and options. More info about [channel querying](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript) can be found in the platform documentation. By default the first channel in the list will be set as active channel and will be marked as read.
    * @param filters
    * @param sort
    * @param options