fix: Gifs not removed from threads #319

Author: szuperaz

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

@@ -356,15 +356,20 @@ describe('AttachmentListComponent', () => {
     } as any as Attachment<DefaultStreamChatGenerics>;
     component.messageId = 'message-id';
     component.attachments = [attachment];
+    component.parentMessageId = 'parent-id';
     component.ngOnChanges();
     fixture.detectChanges();
 
     const actions = queryActions();
     actions[1].click();
 
-    expect(sendAction).toHaveBeenCalledWith('message-id', {
-      image_action: 'shuffle',
-    });
+    expect(sendAction).toHaveBeenCalledWith(
+      'message-id',
+      {
+        image_action: 'shuffle',
+      },
+      'parent-id'
+    );
   });
 
   describe('should display image attachment', () => {

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

@@ -26,6 +26,10 @@ export class AttachmentListComponent implements OnChanges {
    * The id of the message the attachments belong to
    */
   @Input() messageId: string | undefined;
+  /**
+   * The parent id of the message the attachments belong to
+   */
+  @Input() parentMessageId: string | undefined;
   /**
    * The attachments to display
    */
@@ -119,9 +123,13 @@ export class AttachmentListComponent implements OnChanges {
   }
 
   sendAction(action: Action) {
-    void this.channelService.sendAction(this.messageId!, {
-      [action.name!]: action.value!,
-    });
+    void this.channelService.sendAction(
+      this.messageId!,
+      {
+        [action.name!]: action.value!,
+      },
+      this.parentMessageId
+    );
   }
 
   trackByActionValue(_: number, item: Action) {

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

@@ -983,7 +983,10 @@ describe('ChannelService', () => {
     spyOn(channel.state, 'removeMessage');
     await service.sendAction('1', { image_action: 'send' });
 
-    expect(channel.state.removeMessage).toHaveBeenCalledWith({ id: '1' });
+    expect(channel.state.removeMessage).toHaveBeenCalledWith({
+      id: '1',
+      parent_id: undefined,
+    });
   });
 
   it('should update message', () => {

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

@@ -529,12 +529,17 @@ describe('ChannelService - threads', () => {
       {} as any as SendMessageAPIResponse<DefaultStreamChatGenerics>
     );
     spyOn(channel.state, 'removeMessage');
-    await service.sendAction(replies[replies.length - 1].id, {
-      image_action: 'send',
-    });
+    await service.sendAction(
+      replies[replies.length - 1].id,
+      {
+        image_action: 'send',
+      },
+      parentMessage.id
+    );
 
     expect(channel.state.removeMessage).toHaveBeenCalledWith({
       id: replies[replies.length - 1].id,
+      parent_id: parentMessage.id,
     });
   });
 

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

@@ -695,8 +695,13 @@ export class ChannelService<
    * [Runs a message action](https://getstream.io/chat/docs/rest/#messages-runmessageaction) in the current channel. Updates the message list based on the action result (if no message is returned, the message will be removed from the message list).
    * @param messageId
    * @param formData
+   * @param parentMessageId
    */
-  async sendAction(messageId: string, formData: Record<string, string>) {
+  async sendAction(
+    messageId: string,
+    formData: Record<string, string>,
+    parentMessageId?: string
+  ) {
     const channel = this.activeChannelSubject.getValue()!;
     const response = await channel.sendAction(messageId, formData);
     if (response?.message) {
@@ -711,21 +716,16 @@ export class ChannelService<
           ])
         : this.activeChannelMessagesSubject.next([...channel.state.messages]);
     } else {
-      channel.state.removeMessage({ id: messageId });
-      if (
-        this.activeChannelMessagesSubject
-          .getValue()
-          .find((m) => m.id === messageId)
-      ) {
-        this.activeChannelMessagesSubject.next([...channel.state.messages]);
-      } else if (
-        this.activeThreadMessagesSubject
-          .getValue()
-          .find((m) => m.id === messageId)
-      ) {
+      channel.state.removeMessage({
+        id: messageId,
+        parent_id: parentMessageId,
+      });
+      if (parentMessageId) {
         this.activeThreadMessagesSubject.next(
           channel.state.threads[this.activeParentMessageIdSubject.getValue()!]
         );
+      } else {
+        this.activeChannelMessagesSubject.next([...channel.state.messages]);
       }
     }
   }

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

@@ -160,10 +160,12 @@
             #defaultAttachments
             let-messageId="messageId"
             let-attachments="attachments"
+            let-parentMessageId="parentMessageId"
           >
             <stream-attachment-list
               [messageId]="messageId"
               [attachments]="attachments"
+              [parentMessageId]="parentMessageId"
             ></stream-attachment-list>
           </ng-template>
           <ng-container
@@ -389,6 +391,7 @@
         "
         [attachments]="quotedMessageAttachments"
         [messageId]="message?.quoted_message?.id"
+        [parentMessageId]="message?.quoted_message?.parent_id"
       ></stream-attachment-list>
       <div
         data-testid="quoted-message-text"

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

@@ -563,6 +563,7 @@ describe('MessageComponent', () => {
       ...message,
       ...{ attachments },
     };
+    component.message!.parent_id = 'parent-id';
     fixture.detectChanges();
     const attachmentComponent = queryAttachmentComponent();
 
@@ -579,6 +580,9 @@ describe('MessageComponent', () => {
     expect(attachmentComponent).not.toBeUndefined();
     expect(attachmentComponent.attachments).toBe(attachments);
     expect(attachmentComponent.messageId).toBe(component.message.id);
+    expect(attachmentComponent.parentMessageId).toBe(
+      component.message.parent_id
+    );
   });
 
   it('should display reactions icon, if user can react to message', () => {

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

@@ -209,6 +209,7 @@ export class MessageComponent implements OnInit, OnChanges, OnDestroy {
     return {
       messageId: this.message?.id || '',
       attachments: this.message?.attachments || [],
+      parentMessageId: this.message?.parent_id,
     };
   }
 

projects/stream-chat-angular/src/lib/types.ts

@@ -156,6 +156,7 @@ export type ChannelActionsContext<
 export type AttachmentListContext = {
   messageId: string;
   attachments: Attachment<DefaultStreamChatGenerics>[];
+  parentMessageId?: string;
 };
 
 export type AvatarType = 'channel' | 'user';