Merge pull request #531 from GetStream/message-menu

refactor: Move logic from MessageActionsBox to MessageActionsService

Author: szuperaz

projects/customizations-example/src/app/app.component.html

@@ -5,16 +5,7 @@
   </stream-channel-list>
   <stream-channel>
     <stream-channel-header></stream-channel-header>
-    <stream-message-list
-      [customMessageActions]="[
-        {
-          actionName: 'forward',
-          actionLabelOrTranslationKey: 'Forward',
-          isVisible: isVisible,
-          actionHandler: actionHandler
-        }
-      ]"
-    ></stream-message-list>
+    <stream-message-list></stream-message-list>
     <stream-notification-list></stream-notification-list>
     <stream-message-input></stream-message-input>
     <stream-thread name="thread">
@@ -175,20 +166,16 @@
 
 <ng-template
   #messageActionsBoxTemplate
-  let-isOpen="isOpen"
   let-isMine="isMine"
   let-enabledActions="enabledActions"
   let-messageInput="message"
-  let-displayedActionsCountChangeHandler="displayedActionsCountChangeHandler"
-  let-isEditingChangeHandler="isEditingChangeHandler"
+  let-customActions="customActions"
 >
   <stream-message-actions-box
-    [isOpen]="isOpen"
     [isMine]="isMine"
     [enabledActions]="enabledActions"
     [message]="messageInput"
-    (displayedActionsCount)="displayedActionsCountChangeHandler($event)"
-    (isEditing)="isEditingChangeHandler($event)"
+    [customActions]="customActions"
   ></stream-message-actions-box>
 </ng-template>
 

projects/customizations-example/src/app/app.component.ts

@@ -36,6 +36,7 @@ import {
   ThreadHeaderContext,
   CustomAttachmentUploadContext,
   DateSeparatorContext,
+  MessageActionsService,
 } from 'stream-chat-angular';
 import { environment } from '../environments/environment';
 
@@ -100,8 +101,17 @@ export class AppComponent implements AfterViewInit {
     private chatService: ChatClientService,
     public channelService: ChannelService,
     private streamI18nService: StreamI18nService,
-    private customTemplatesService: CustomTemplatesService
+    private customTemplatesService: CustomTemplatesService,
+    private messageActionsService: MessageActionsService
   ) {
+    this.messageActionsService.customActions$.next([
+      {
+        actionName: 'forward',
+        actionLabelOrTranslationKey: 'Forward',
+        isVisible: this.isVisible,
+        actionHandler: this.actionHandler,
+      },
+    ]);
     void this.chatService.init(
       environment.apiKey,
       environment.userId,
@@ -210,5 +220,8 @@ export class AppComponent implements AfterViewInit {
     return true;
   }
 
-  actionHandler() {}
+  actionHandler() {
+    /* eslint-disable-next-line no-console */
+    console.log('forwarded');
+  }
 }

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

@@ -26,6 +26,7 @@ import { NotificationService } from '../notification.service';
 import { DefaultStreamChatGenerics, StreamMessage } from '../types';
 
 import { MessageActionsBoxComponent } from './message-actions-box.component';
+import { MessageActionsService } from '../message-actions.service';
 
 describe('MessageActionsBoxComponent', () => {
   let component: MessageActionsBoxComponent;
@@ -88,6 +89,7 @@ describe('MessageActionsBoxComponent', () => {
     component = fixture.componentInstance;
     message = mockMessage();
     component.message = message;
+    component.ngOnInit();
     component.ngOnChanges({ message: {} as SimpleChange });
     nativeElement = fixture.nativeElement as HTMLElement;
     queryQuoteAction = () =>
@@ -268,42 +270,6 @@ describe('MessageActionsBoxComponent', () => {
     );
   });
 
-  it('should emit the number of displayed actions', () => {
-    component.enabledActions = [
-      'pin-message',
-      'update-own-message',
-      'delete-own-message',
-      'flag-message',
-    ];
-    component.isMine = true;
-    const spy = jasmine.createSpy();
-    component.displayedActionsCount.subscribe(spy);
-    component.ngOnChanges({
-      isMine: {} as any as SimpleChange,
-      enabledActions: {} as any as SimpleChange,
-    });
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledWith(3);
-
-    spy.calls.reset();
-    component.enabledActions = [
-      'pin-message',
-      'update-any-message',
-      'delete',
-      'flag-message',
-      'quote-message',
-    ];
-    component.isMine = false;
-    component.ngOnChanges({
-      isMine: {} as any as SimpleChange,
-      enabledActions: {} as any as SimpleChange,
-    });
-    fixture.detectChanges();
-
-    expect(spy).toHaveBeenCalledWith(4);
-  });
-
   describe('should display edit action', () => {
     it('if #enabledActions contains "edit" and #isMine', () => {
       component.enabledActions = ['update-own-message'];
@@ -372,7 +338,9 @@ describe('MessageActionsBoxComponent', () => {
 
   it('should emit #isEditing if user starts to edit', () => {
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
+    spy.calls.reset();
     component.enabledActions = [
       'pin-message',
       'update-any-message',
@@ -386,7 +354,7 @@ describe('MessageActionsBoxComponent', () => {
     queryEditAction()?.click();
     fixture.detectChanges();
 
-    expect(spy).toHaveBeenCalledWith(true);
+    expect(spy).toHaveBeenCalledWith(component.message);
   });
 
   it('should open modal if user starts to edit', () => {
@@ -435,14 +403,16 @@ describe('MessageActionsBoxComponent', () => {
     });
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
     queryEditAction()?.click();
     fixture.detectChanges();
+    spy.calls.reset();
     queryModalCancelButton()?.click();
     fixture.detectChanges();
 
     expect(queryEditModal().isOpen).toBeFalse();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should update #isEditModalOpen if modal is closed', () => {
@@ -455,14 +425,16 @@ describe('MessageActionsBoxComponent', () => {
     });
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
     queryEditAction()?.click();
     fixture.detectChanges();
+    spy.calls.reset();
     queryEditModal().close();
     fixture.detectChanges();
 
     expect(component.isEditModalOpen).toBeFalse();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should close modal if message was updated successfully', () => {
@@ -476,14 +448,16 @@ describe('MessageActionsBoxComponent', () => {
     queryEditAction()?.click();
     fixture.detectChanges();
     const spy = jasmine.createSpy();
-    component.isEditing.subscribe(spy);
+    const actionsService = TestBed.inject(MessageActionsService);
+    actionsService.messageToEdit$.subscribe(spy);
+    spy.calls.reset();
     const messageInputComponent = queryMessageInputComponent();
 
     messageInputComponent.messageUpdate.emit();
     fixture.detectChanges();
 
     expect(queryEditModal().isOpen).toBeFalse();
-    expect(spy).toHaveBeenCalledWith(false);
+    expect(spy).toHaveBeenCalledWith(undefined);
   });
 
   it('should delete message', () => {