Merge pull request #98 from GetStream/upload-not-finished-notification

fix: Notify if message sent before upload end #97

Author: szuperaz

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

@@ -237,13 +237,32 @@ describe('MessageInputComponent', () => {
   });
 
   it(`shouldn't send message, if file uploads are in progress`, async () => {
+    const notificationService = TestBed.inject(NotificationService);
+    spyOn(notificationService, 'addPermanentNotification');
     uploadAttachmentsSpy.and.resolveTo([]);
     void component.filesSelected([{ type: 'image/png' }] as any as FileList);
     await component.messageSent();
 
     expect(sendMessageSpy).not.toHaveBeenCalled();
+    expect(notificationService.addPermanentNotification).toHaveBeenCalledWith(
+      'streamChat.Wait until all attachments have uploaded'
+    );
   });
 
+  it('should hide "Wait for upload" notification, if upload is finished', fakeAsync(() => {
+    const notificationService = TestBed.inject(NotificationService);
+    const removeNotificationSpy = jasmine.createSpy();
+    spyOn(notificationService, 'addPermanentNotification').and.returnValue(
+      removeNotificationSpy
+    );
+    uploadAttachmentsSpy.and.resolveTo([]);
+    void component.filesSelected([{ type: 'image/png' }] as any as FileList);
+    void component.messageSent();
+    tick();
+
+    expect(removeNotificationSpy).toHaveBeenCalledWith();
+  }));
+
   it(`shouldn't send message, if file uploads are in progress - multiple uploads`, fakeAsync(() => {
     uploadAttachmentsSpy.and.resolveTo([]);
     void component.filesSelected([{ type: 'image/png' }] as any as FileList);

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

@@ -25,6 +25,7 @@ export class MessageInputComponent implements OnDestroy {
   @ViewChild('input') private messageInput!: ElementRef<HTMLInputElement>;
   @ViewChild('fileInput') private fileInput!: ElementRef<HTMLInputElement>;
   private subscriptions: Subscription[] = [];
+  private hideNotification: Function | undefined;
 
   constructor(
     private channelService: ChannelService,
@@ -46,6 +47,12 @@ export class MessageInputComponent implements OnDestroy {
   async messageSent(event?: Event) {
     event?.preventDefault();
     if (this.attachmentUploadInProgressCounter > 0) {
+      if (!this.hideNotification) {
+        this.hideNotification =
+          this.notificationService.addPermanentNotification(
+            'streamChat.Wait until all attachments have uploaded'
+          );
+      }
       return;
     }
     const text = this.messageInput.nativeElement.value;
@@ -182,6 +189,10 @@ export class MessageInputComponent implements OnDestroy {
       }
     });
     this.attachmentUploadInProgressCounter--;
+    if (this.attachmentUploadInProgressCounter === 0 && this.hideNotification) {
+      this.hideNotification();
+      this.hideNotification = undefined;
+    }
   }
 
   private clearFileInput() {