Merge pull request #546 from GetStream/mark-unread

Mark unread

Author: szuperaz

docusaurus/docs/Angular/concepts/message-interactions.mdx

@@ -17,3 +17,4 @@ Users can interact with the messages in the message list. The following table pr
 | Receive read events                                                                                  | read-events                              | [`Message`](../components/MessageComponent.mdx)                     |
 | Reply to a message in a thread                                                                       | send-reply                               | [`Message`](../components/MessageComponent.mdx)                     |
 | Quote reply to a message                                                                             | quote-message                            | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |
+| Mark a message as unread                                                                             | read-events                              | [`MessageActionsBox`](../components/MessageActionsBoxComponent.mdx) |

package-lock.json

@@ -126,7 +126,7 @@
     "ngx-popperjs": "^12.2.2",
     "pretty-bytes": "^5.6.0",
     "rxjs": "^7.1.0",
-    "stream-chat": "^8.14.2",
+    "stream-chat": "^8.15.0",
     "ts-node": "^10.2.1",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12",

package.json

@@ -12,7 +12,7 @@
     "@angular/common": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@angular/core": "^12.2.0 || ^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0 || ^15.0.0",
-    "stream-chat": "^8.11.0"
+    "stream-chat": "^8.15.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",

projects/stream-chat-angular/package.json

@@ -107,5 +107,12 @@ export const en = {
     'See original (automatically translated)':
       'See original (automatically translated)',
     'See translation': 'See translation',
+    'Mark as unread': 'Mark as unread',
+    'Error marking message as unread': 'Error marking message as unread',
+    'Error, only the first {{count}} message can be marked as unread':
+      'Error, only the first {{count}} message can be marked as unread',
+    'Unread messages': 'Unread messages',
+    '{{count}} unread messages': '{{count}} unread messages',
+    '{{count}} unread message': '{{count}} unread message',
   },
 };

projects/stream-chat-angular/src/assets/i18n/en.ts

@@ -3,7 +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 { ChatClientService, ClientEvent } from '../chat-client.service';
 import {
   generateMockChannels,
   mockChannelService,
@@ -12,6 +12,7 @@ import {
 import { ThemeService } from '../theme.service';
 import { ChannelListToggleService } from './channel-list-toggle.service';
 import { ChannelListComponent } from './channel-list.component';
+import { Subject } from 'rxjs';
 
 describe('ChannelListComponent', () => {
   let channelServiceMock: MockChannelService;
@@ -34,7 +35,10 @@ describe('ChannelListComponent', () => {
         { provide: ChannelService, useValue: channelServiceMock },
         {
           provide: ChatClientService,
-          useValue: { chatClient: { user: { id: 'userid' } } },
+          useValue: {
+            chatClient: { user: { id: 'userid' } },
+            events$: new Subject<ClientEvent>(),
+          },
         },
         ThemeService,
       ],

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

@@ -1,19 +1,20 @@
 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 { Event, 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 { ChatClientService, ClientEvent } from '../chat-client.service';
 import {
   generateMockChannels,
   mockChannelService,
   MockChannelService,
   mockMessage,
 } from '../mocks';
 import { ChannelPreviewComponent } from './channel-preview.component';
-import { Observable, of } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
+import { DefaultStreamChatGenerics } from '../types';
 
 describe('ChannelPreviewComponent', () => {
   let fixture: ComponentFixture<ChannelPreviewComponent>;
@@ -22,6 +23,7 @@ describe('ChannelPreviewComponent', () => {
   let channelServiceMock: MockChannelService;
   let chatClientServiceMock: {
     chatClient: { user: UserResponse };
+    events$: Subject<ClientEvent>;
     user$: Observable<{ id: string }>;
   };
   let queryContainer: () => HTMLElement | null;
@@ -33,6 +35,7 @@ describe('ChannelPreviewComponent', () => {
   beforeEach(() => {
     channelServiceMock = mockChannelService();
     chatClientServiceMock = {
+      events$: new Subject(),
       chatClient: { user: { id: 'currentUser' } },
       user$: of({ id: 'currentUser' }),
     };
@@ -164,6 +167,30 @@ describe('ChannelPreviewComponent', () => {
     expect(component.unreadCount).toBe(0);
   });
 
+  it('should set unread state based on `notification.mark_unread`', () => {
+    const channels = generateMockChannels();
+    const channel = channels[0];
+    const countUnreadSpy = spyOn(channel, 'countUnread');
+    countUnreadSpy.and.returnValue(1);
+    component.channel = channel;
+    channelServiceMock.activeChannel$.next(channel);
+    component.channel = channel;
+    component.ngOnInit();
+
+    expect(component.isUnread).toBe(false);
+    expect(component.unreadCount).toBe(0);
+
+    chatClientServiceMock.events$.next({
+      eventType: 'notification.mark_unread',
+      event: {
+        channel_id: channel.id,
+      } as Event<DefaultStreamChatGenerics>,
+    });
+
+    expect(component.isUnread).toBe(true);
+    expect(component.unreadCount).toBe(1);
+  });
+
   it('should set channel as active', () => {
     const channel = generateMockChannels()[0];
     component.channel = channel;

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

@@ -1,5 +1,6 @@
 import { Component, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { filter } from 'rxjs/operators';
 import {
   Channel,
   Event,
@@ -27,6 +28,7 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
    */
   @Input() channel: Channel<DefaultStreamChatGenerics> | undefined;
   isActive = false;
+  isUnreadMessageWasCalled = false;
   isUnread = false;
   unreadCount: number | undefined;
   latestMessage: string = 'streamChat.Nothing yet...';
@@ -73,10 +75,27 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
     this.subscriptions.push(
       this.channel!.on('message.read', () =>
         this.ngZone.run(() => {
+          this.isUnreadMessageWasCalled = false;
           this.updateUnreadState();
         })
       )
     );
+    this.subscriptions.push(
+      this.chatClientService.events$
+        .pipe(
+          filter(
+            (e) =>
+              e.eventType === 'notification.mark_unread' &&
+              this.channel!.id === e.event?.channel_id
+          )
+        )
+        .subscribe(() => {
+          this.ngZone.run(() => {
+            this.isUnreadMessageWasCalled = true;
+            this.updateUnreadState();
+          });
+        })
+    );
   }
 
   ngOnDestroy(): void {
@@ -140,7 +159,10 @@ export class ChannelPreviewComponent implements OnInit, OnDestroy {
   }
 
   private updateUnreadState() {
-    if (this.isActive || !this.canSendReadEvents) {
+    if (
+      (this.isActive && !this.isUnreadMessageWasCalled) ||
+      !this.canSendReadEvents
+    ) {
       this.unreadCount = 0;
       this.isUnread = false;
       return;