fix: Message reactions toggle #108

feat: Set default theme in sample app

fix: Fix reactions toggle for new messages

feat: Close reactions on outside click

Author: szuperaz

projects/sample-app/src/app/app.component.ts

@@ -3,7 +3,6 @@ import {
   ChatClientService,
   ChannelService,
   StreamI18nService,
-  ThemeService,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -16,8 +15,7 @@ export class AppComponent {
   constructor(
     private chatService: ChatClientService,
     private channelService: ChannelService,
-    private streamI18nService: StreamI18nService,
-    private themeService: ThemeService
+    private streamI18nService: StreamI18nService
   ) {
     void this.chatService.init(
       environment.apiKey,
@@ -29,12 +27,5 @@ export class AppComponent {
       members: { $in: [environment.userId] },
     });
     this.streamI18nService.setTranslation();
-    this.themeService.customLightThemeVariables = {
-      '--primary-color': 'lightgreen',
-    };
-    this.themeService.customDarkThemeVariables = {
-      '--primary-color': 'darkgreen',
-    };
-    this.themeService.theme$.next('dark');
   }
 }

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

@@ -361,9 +361,12 @@ export class ChannelService {
   private watchForActiveChannelEvents(channel: Channel) {
     this.activeChannelSubscriptions.push(
       channel.on('message.new', () => {
-        this.activeChannelMessagesSubject.next([...channel.state.messages]);
-        this.activeChannel$.pipe(first()).subscribe((c) => void c?.markRead());
-        this.appRef.tick();
+        this.ngZone.run(() => {
+          this.activeChannelMessagesSubject.next([...channel.state.messages]);
+          this.activeChannel$
+            .pipe(first())
+            .subscribe((c) => void c?.markRead());
+        });
       })
     );
     this.activeChannelSubscriptions.push(
@@ -398,22 +401,17 @@ export class ChannelService {
   }
 
   private messageReactionEventReceived(e: Event) {
-    let message: StreamMessage | undefined;
-    this.activeChannelMessages$
-      .pipe(first())
-      .subscribe(
-        (messages) => (message = messages.find((m) => m.id === e.message?.id))
-      );
+    let messages!: StreamMessage[];
+    this.activeChannelMessages$.pipe(first()).subscribe((m) => (messages = m));
+    const message = messages.find((m) => m.id === e?.message?.id);
     if (!message) {
       return;
     }
     message.reaction_counts = { ...e.message?.reaction_counts };
     message.reaction_scores = { ...e.message?.reaction_scores };
     message.latest_reactions = [...(e.message?.latest_reactions || [])];
     message.own_reactions = [...(e.message?.own_reactions || [])];
-    this.activeChannelMessagesSubject.next(
-      this.activeChannelMessagesSubject.getValue()
-    );
+    this.activeChannelMessagesSubject.next([...messages]);
     this.appRef.tick();
   }
 

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

@@ -1,4 +1,9 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
 import { ReactionResponse } from 'stream-chat';
 import { By } from '@angular/platform-browser';
 import { AvatarComponent } from '../avatar/avatar.component';
@@ -9,6 +14,7 @@ import {
 } from './message-reactions.component';
 import { EmojiModule } from '@ctrl/ngx-emoji-mart/ngx-emoji';
 import { ChannelService } from '../channel.service';
+import { SimpleChange } from '@angular/core';
 
 describe('MessageReactionsComponent', () => {
   let component: MessageReactionsComponent;
@@ -216,4 +222,40 @@ describe('MessageReactionsComponent', () => {
       'like'
     );
   });
+
+  it('should emit #isSelectorOpenChange, if outside click happens', fakeAsync(() => {
+    let eventHandler: Function | undefined;
+    spyOn(window, 'addEventListener').and.callFake(
+      (_: string, handler: any) => {
+        eventHandler = handler as Function;
+      }
+    );
+    const spy = jasmine.createSpy();
+    component.isSelectorOpenChange.subscribe(spy);
+    component.isSelectorOpen = true;
+    component.ngOnChanges({
+      isSelectorOpen: {} as any as SimpleChange,
+    });
+    tick();
+    fixture.detectChanges();
+    eventHandler!(queryReactionsSelector());
+
+    expect(spy).toHaveBeenCalledWith(false);
+  }));
+
+  it('should only watch for outside clicks if selector is open', () => {
+    const addEventListenerSpy = spyOn(window, 'addEventListener');
+    const removeEventListenerSpy = spyOn(window, 'removeEventListener');
+    component.isSelectorOpen = false;
+    component.ngOnChanges({
+      isSelectorOpen: {} as any as SimpleChange,
+    });
+    fixture.detectChanges();
+
+    expect(addEventListenerSpy).not.toHaveBeenCalled();
+    expect(removeEventListenerSpy).toHaveBeenCalledWith(
+      'click',
+      jasmine.any(Function)
+    );
+  });
 });

projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts

@@ -3,7 +3,11 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  EventEmitter,
   Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
   ViewChild,
 } from '@angular/core';
 import { ReactionResponse } from 'stream-chat';
@@ -31,11 +35,12 @@ const emojiReactionsMapping: { [key in MessageReactionType]: string } = {
   templateUrl: './message-reactions.component.html',
   styles: [],
 })
-export class MessageReactionsComponent implements AfterViewChecked {
+export class MessageReactionsComponent implements AfterViewChecked, OnChanges {
   @Input() messageId: string | undefined;
   @Input() messageReactionCounts: { [key in MessageReactionType]?: number } =
     {};
   @Input() isSelectorOpen: boolean = false;
+  @Output() readonly isSelectorOpenChange = new EventEmitter<boolean>();
   @Input() latestReactions: ReactionResponse<
     DefaultReactionType,
     DefaultUserType
@@ -59,6 +64,14 @@ export class MessageReactionsComponent implements AfterViewChecked {
     private channelService: ChannelService
   ) {}
 
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.isSelectorOpen) {
+      this.isSelectorOpen
+        ? setTimeout(() => this.watchForOutsideClicks()) // setTimeout: wait for current click to bubble up, and only watch for clicks after that
+        : this.stopWatchForOutsideClicks();
+    }
+  }
+
   ngAfterViewChecked(): void {
     if (this.tooltipText && !this.tooltipPositions) {
       this.setTooltipPosition();
@@ -121,6 +134,20 @@ export class MessageReactionsComponent implements AfterViewChecked {
       : void this.channelService.addReaction(this.messageId!, type);
   }
 
+  private eventHandler = (event: Event) => {
+    if (!this.selectorContainer?.nativeElement.contains(event.target as Node)) {
+      this.isSelectorOpenChange.emit(false);
+    }
+  };
+
+  private watchForOutsideClicks() {
+    window.addEventListener('click', this.eventHandler);
+  }
+
+  private stopWatchForOutsideClicks() {
+    window.removeEventListener('click', this.eventHandler);
+  }
+
   private setTooltipPosition() {
     const tooltip = this.selectorTooltip?.nativeElement.getBoundingClientRect();
     const target = this.currentTooltipTarget?.getBoundingClientRect();

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

@@ -81,7 +81,7 @@
         *ngIf="areReactionsEnabled"
         [messageReactionCounts]="message?.reaction_counts || {}"
         [latestReactions]="message?.latest_reactions || []"
-        [isSelectorOpen]="isReactionSelectorOpen"
+        [(isSelectorOpen)]="isReactionSelectorOpen"
         [messageId]="message?.id"
         [ownReactions]="message?.own_reactions || []"
       ></stream-message-reactions>

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

@@ -567,6 +567,14 @@ describe('MessageComponent', () => {
     fixture.detectChanges();
 
     expect(queryMessageReactionsComponent()).toBeUndefined();
+
+    component.isReactionSelectorOpen = true;
+    component.areReactionsEnabled = true;
+    fixture.detectChanges();
+    queryMessageReactionsComponent().isSelectorOpenChange.emit(false);
+    fixture.detectChanges();
+
+    expect(component.isReactionSelectorOpen).toBeFalse();
   });
 
   it('should toggle reactions selector', () => {