Remove getters from avatar and message reactions components

szuperaz · szuperaz · commit 2828b5d95a26 · 2024-01-23T16:56:14.000+01:00
diff --git a/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts b/projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts
@@ -1,6 +1,6 @@
 import { SimpleChange } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { Subject } from 'rxjs';
+import { Observable, Subject, of } from 'rxjs';
 import { ChatClientService, ClientEvent } from '../chat-client.service';
 import { generateMockChannels } from '../mocks';
 import { AvatarComponent } from './avatar.component';
@@ -18,13 +18,15 @@ describe('AvatarComponent', () => {
   let chatClientServiceMock: {
     chatClient: { user: { id: string } };
     events$: Subject<ClientEvent>;
+    user$: Observable<{ id: string }>;
   };
 
   beforeEach(() => {
     events$ = new Subject();
     chatClientServiceMock = {
       chatClient: { user: { id: 'current-user' } },
       events$,
+      user$: of({ id: 'current-user' }),
     };
     TestBed.configureTestingModule({
       declarations: [AvatarComponent],
@@ -91,6 +93,7 @@ describe('AvatarComponent', () => {
   it(`should display fallback image if #imageUrl wasn't provided`, () => {
     component.name = 'John Doe';
     component.type = 'user';
+    component.ngOnChanges({ type: {} as SimpleChange });
     fixture.detectChanges();
     const img = queryImg();
     const fallbackImg = queryFallbackImg();
@@ -104,16 +107,28 @@ describe('AvatarComponent', () => {
   it('should display initials correctly', () => {
     component.type = 'user';
     component.name = 'John Doe';
+    component.ngOnChanges({
+      type: {} as SimpleChange,
+      name: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(component.initials).toBe('J');
 
     component.name = 'Johhny';
+    component.ngOnChanges({
+      name: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('J');
 
     component.name = undefined;
+    component.ngOnChanges({
+      name: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('');
@@ -122,6 +137,11 @@ describe('AvatarComponent', () => {
     channel.data!.name = undefined;
     component.channel = channel;
     component.type = 'channel';
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+      type: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('#');
@@ -140,6 +160,11 @@ describe('AvatarComponent', () => {
     };
     component.channel = channel;
     component.type = 'channel';
+    component.ngOnChanges({
+      type: {} as SimpleChange,
+      channel: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('T');
@@ -157,11 +182,18 @@ describe('AvatarComponent', () => {
       },
     };
     component.channel = channel;
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('J');
 
     delete channel.state.members['otheruser'].user!.name;
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+    });
 
     expect(component.initials).toBe('o');
 
@@ -176,6 +208,10 @@ describe('AvatarComponent', () => {
       },
     };
     component.channel = channel;
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+    });
+
     fixture.detectChanges();
 
     expect(component.initials).toBe('#');
@@ -196,6 +232,10 @@ describe('AvatarComponent', () => {
     component.imageUrl = undefined;
     component.channel = channel;
     component.type = 'channel';
+    component.ngOnChanges({
+      type: {} as SimpleChange,
+      channel: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(queryImg()?.src).toContain('url/to/img');
@@ -207,6 +247,9 @@ describe('AvatarComponent', () => {
 
     channel.state.members.otheruser.user!.image = undefined;
     component.imageUrl = undefined;
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(queryImg()).toBeNull();
@@ -215,6 +258,9 @@ describe('AvatarComponent', () => {
       user_id: 'thirduser',
       user: { id: 'thirduser', image: 'profile/img' },
     };
+    component.ngOnChanges({
+      channel: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(queryImg()).toBeNull();
@@ -370,6 +416,10 @@ describe('AvatarComponent', () => {
     component.type = 'user';
     component.initialsType = 'first-letter-of-each-word';
     component.name = 'John Doe';
+    component.ngOnChanges({
+      name: {} as SimpleChange,
+      type: {} as SimpleChange,
+    });
     fixture.detectChanges();
 
     expect(component.initials).toBe('JD');
diff --git a/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts b/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts
@@ -1,8 +1,11 @@
 import {
+  AfterViewInit,
+  ChangeDetectorRef,
   Component,
   Input,
   NgZone,
   OnChanges,
+  OnInit,
   SimpleChanges,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
@@ -23,7 +26,9 @@ import {
   templateUrl: './avatar.component.html',
   styleUrls: ['./avatar.component.scss'],
 })
-export class AvatarComponent implements OnChanges {
+export class AvatarComponent
+  implements OnChanges, OnInit, OnChanges, AfterViewInit
+{
   /**
    * An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
    */
@@ -65,38 +70,63 @@ export class AvatarComponent implements OnChanges {
   isError = false;
   isOnline = false;
   private isOnlineSubscription?: Subscription;
+  initials: string = '';
+  fallbackChannelImage: string | undefined;
+  private userId?: string;
+  private isViewInited = false;
+  private subscriptions: Subscription[] = [];
 
   constructor(
     private chatClientService: ChatClientService,
-    private ngZone: NgZone
+    private ngZone: NgZone,
+    private cdRef: ChangeDetectorRef
   ) {}
 
+  ngOnInit(): void {
+    this.subscriptions.push(
+      this.chatClientService.user$.subscribe((u) => {
+        if (u?.id !== this.userId) {
+          this.userId = u?.id;
+          if (this.type || this.channel || this.name) {
+            this.setInitials();
+            this.setFallbackChannelImage();
+            this.updateIsOnlineSubscription();
+          }
+          if (this.isViewInited) {
+            this.cdRef.detectChanges();
+          }
+        }
+      })
+    );
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (changes['channel']) {
-      if (this.channel) {
-        const otherMember = this.getOtherMemberIfOneToOneChannel();
-        if (otherMember) {
-          this.isOnline = otherMember.online || false;
-          this.isOnlineSubscription = this.chatClientService.events$
-            .pipe(filter((e) => e.eventType === 'user.presence.changed'))
-            .subscribe((event) => {
-              if (event.event.user?.id === otherMember.id) {
-                this.ngZone.run(() => {
-                  this.isOnline = event.event.user?.online || false;
-                });
-              }
-            });
-        } else {
-          this.isOnlineSubscription?.unsubscribe();
-        }
+      this.updateIsOnlineSubscription();
+    }
+    if (changes.type || changes.name || changes.channel) {
+      this.setInitials();
+    }
+
+    if (changes.type || changes.channel) {
+      this.setFallbackChannelImage();
+    }
+  }
+
+  private setFallbackChannelImage() {
+    if (this.type !== 'channel') {
+      this.fallbackChannelImage = undefined;
+    } else {
+      const otherMember = this.getOtherMemberIfOneToOneChannel();
+      if (otherMember) {
+        this.fallbackChannelImage = otherMember.image;
       } else {
-        this.isOnline = false;
-        this.isOnlineSubscription?.unsubscribe();
+        this.fallbackChannelImage = undefined;
       }
     }
   }
 
-  get initials() {
+  private setInitials() {
     let result: string = '';
     if (this.type === 'user') {
       result = this.name?.toString() || '';
@@ -120,26 +150,40 @@ export class AvatarComponent implements OnChanges {
     } else {
       initials = words[0].charAt(0) || '';
     }
-    return initials;
+    this.initials = initials;
   }
 
-  get fallbackChannelImage() {
-    if (this.type !== 'channel') {
-      return undefined;
-    } else {
+  private updateIsOnlineSubscription() {
+    if (this.channel) {
       const otherMember = this.getOtherMemberIfOneToOneChannel();
       if (otherMember) {
-        return otherMember.image;
+        this.isOnline = otherMember.online || false;
+        this.isOnlineSubscription = this.chatClientService.events$
+          .pipe(filter((e) => e.eventType === 'user.presence.changed'))
+          .subscribe((event) => {
+            if (event.event.user?.id === otherMember.id) {
+              this.ngZone.run(() => {
+                this.isOnline = event.event.user?.online || false;
+              });
+            }
+          });
       } else {
-        return undefined;
+        this.isOnlineSubscription?.unsubscribe();
       }
+    } else {
+      this.isOnline = false;
+      this.isOnlineSubscription?.unsubscribe();
     }
   }
 
+  ngAfterViewInit(): void {
+    this.isViewInited = true;
+  }
+
   private getOtherMemberIfOneToOneChannel() {
     const otherMembers = Object.values(
       this.channel?.state?.members || {}
-    ).filter((m) => m.user_id !== this.chatClientService.chatClient.user?.id);
+    ).filter((m) => m.user_id !== this.userId);
     if (otherMembers.length === 1) {
       return otherMembers[0].user;
     } else {
diff --git a/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts b/projects/stream-chat-angular/src/lib/channel-preview/channel-preview.component.spec.ts
@@ -13,6 +13,7 @@ import {
   mockMessage,
 } from '../mocks';
 import { ChannelPreviewComponent } from './channel-preview.component';
+import { Observable, of } from 'rxjs';
 
 describe('ChannelPreviewComponent', () => {
   let fixture: ComponentFixture<ChannelPreviewComponent>;
@@ -21,6 +22,7 @@ describe('ChannelPreviewComponent', () => {
   let channelServiceMock: MockChannelService;
   let chatClientServiceMock: {
     chatClient: { user: UserResponse };
+    user$: Observable<{ id: string }>;
   };
   let queryContainer: () => HTMLElement | null;
   let queryAvatar: () => AvatarPlaceholderComponent;
@@ -32,6 +34,7 @@ describe('ChannelPreviewComponent', () => {
     channelServiceMock = mockChannelService();
     chatClientServiceMock = {
       chatClient: { user: { id: 'currentUser' } },
+      user$: of({ id: 'currentUser' }),
     };
     TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.spec.ts
@@ -9,7 +9,7 @@ import {
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { TranslateModule } from '@ngx-translate/core';
-import { BehaviorSubject, Subject } from 'rxjs';
+import { BehaviorSubject, Subject, of } from 'rxjs';
 import { AppSettings, Channel, UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
@@ -138,7 +138,12 @@ describe('MessageInputComponent', () => {
         },
         {
           provide: ChatClientService,
-          useValue: { chatClient: { user }, appSettings$, getAppSettings },
+          useValue: {
+            user$: of(user),
+            chatClient: { user },
+            appSettings$,
+            getAppSettings,
+          },
         },
         {
           provide: ThemeService,
diff --git a/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.spec.ts b/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.spec.ts
diff --git a/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts b/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts
