Merge pull request #442 from GetStream/fixes

Fixes

Author: szuperaz

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html

@@ -23,6 +23,6 @@
 <ng-container
   *ngTemplateOutlet="
     (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;
-    context: getAvatarContext()
+    context: context
   "
 ></ng-container>

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

@@ -19,6 +19,7 @@ describe('AvatarPlaceholderComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(AvatarPlaceholderComponent);
     component = fixture.componentInstance;
+    component.ngOnChanges();
     fixture.detectChanges();
   });
 
@@ -39,6 +40,7 @@ describe('AvatarPlaceholderComponent', () => {
     component.location = 'autocomplete-item';
     const user = { id: 'user-id' };
     component.user = user;
+    component.ngOnChanges();
     fixture.detectChanges();
 
     expect(avatar.imageUrl).toBe('imageUrl');
@@ -51,6 +53,7 @@ describe('AvatarPlaceholderComponent', () => {
     component.type = 'channel';
     const channel = { id: 'channel-id' } as Channel<DefaultStreamChatGenerics>;
     component.channel = channel;
+    component.ngOnChanges();
     fixture.detectChanges();
 
     expect(avatar.type).toEqual('channel');

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { Channel, User } from 'stream-chat';
 import { CustomTemplatesService } from '../custom-templates.service';
 import {
@@ -16,7 +16,7 @@ import {
   templateUrl: './avatar-placeholder.component.html',
   styles: [],
 })
-export class AvatarPlaceholderComponent {
+export class AvatarPlaceholderComponent implements OnChanges {
   /**
    * An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
    */
@@ -51,10 +51,20 @@ export class AvatarPlaceholderComponent {
   @Input() initialsType:
     | 'first-letter-of-first-word'
     | 'first-letter-of-each-word' = 'first-letter-of-first-word';
+  context: AvatarContext = {
+    name: undefined,
+    imageUrl: undefined,
+    size: undefined,
+    location: undefined,
+    channel: undefined,
+    user: undefined,
+    type: undefined,
+    initialsType: undefined,
+  };
   constructor(public customTemplatesService: CustomTemplatesService) {}
 
-  getAvatarContext(): AvatarContext {
-    return {
+  ngOnChanges(): void {
+    this.context = {
       name: this.name,
       imageUrl: this.imageUrl,
       size: this.size,

projects/stream-chat-angular/src/lib/channel-list/channel-list.component.html

@@ -48,7 +48,7 @@
           <ng-container
             *ngTemplateOutlet="
               customChannelPreviewTemplate || defaultTemplate;
-              context: getChannelPreviewContext(channel)
+              context: { channel: channel }
             "
           ></ng-container>
         </div>

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

@@ -81,12 +81,4 @@ export class ChannelListComponent implements AfterViewInit, OnDestroy {
   channelSelected() {
     this.channelListToggleService.channelSelected();
   }
-
-  getChannelPreviewContext(
-    channel: Channel<DefaultStreamChatGenerics>
-  ): ChannelPreviewContext<DefaultStreamChatGenerics> {
-    return {
-      channel,
-    };
-  }
 }

projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.html

@@ -4,6 +4,6 @@
 <ng-container
   *ngTemplateOutlet="
     (customTemplatesService.iconTemplate$ | async) || defaultIcon;
-    context: getIconContext()
+    context: iconContext
   "
 ></ng-container>

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

@@ -27,6 +27,7 @@ describe('IconPlaceholderComponent', () => {
   it('should bind inputs', () => {
     component.icon = 'action-icon';
     component.size = 30;
+    component.ngOnChanges();
     fixture.detectChanges();
 
     const iconComponent = fixture.debugElement.query(
@@ -36,4 +37,30 @@ describe('IconPlaceholderComponent', () => {
     expect(iconComponent.icon).toBe('action-icon');
     expect(iconComponent.size).toBe(30);
   });
+
+  it('should ipdate inputs', () => {
+    component.icon = 'action-icon';
+    component.size = 30;
+    fixture.detectChanges();
+
+    component.icon = 'arrow-down';
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    let iconComponent = fixture.debugElement.query(By.directive(IconComponent))
+      .componentInstance as IconComponent;
+
+    expect(iconComponent.icon).toBe('arrow-down');
+    expect(iconComponent.size).toBe(30);
+
+    component.size = 25;
+    component.ngOnChanges();
+    fixture.detectChanges();
+
+    iconComponent = fixture.debugElement.query(By.directive(IconComponent))
+      .componentInstance as IconComponent;
+
+    expect(iconComponent.icon).toBe('arrow-down');
+    expect(iconComponent.size).toBe(25);
+  });
 });

projects/stream-chat-angular/src/lib/icon-placeholder/icon-placeholder.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnChanges } from '@angular/core';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { Icon } from '../icon/icon.component';
 import { IconContext } from '../types';
@@ -11,7 +11,7 @@ import { IconContext } from '../types';
   templateUrl: './icon-placeholder.component.html',
   styles: [],
 })
-export class IconPlaceholderComponent {
+export class IconPlaceholderComponent implements OnChanges {
   /**
    * The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
    */
@@ -20,10 +20,12 @@ export class IconPlaceholderComponent {
    * The size of the icon (in pixels)
    */
   @Input() size: number | undefined;
+  iconContext: IconContext = { icon: undefined, size: undefined };
+
   constructor(public customTemplatesService: CustomTemplatesService) {}
 
-  getIconContext(): IconContext {
-    return {
+  ngOnChanges(): void {
+    this.iconContext = {
       icon: this.icon,
       size: this.size,
     };

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

@@ -998,4 +998,36 @@ describe('MessageInputComponent', () => {
 
     expect(component.messageSent).toHaveBeenCalledWith();
   });
+
+  it('should trim leading and ending empty lines in message text', () => {
+    component.textareaValue =
+      'This is a multiline text\nthis should be left unchanged';
+    void component.messageSent();
+    //eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    let sentText = sendMessageSpy.calls.mostRecent().args[0];
+
+    expect(sentText).toEqual(
+      'This is a multiline text\nthis should be left unchanged'
+    );
+
+    component.textareaValue =
+      '\n\nLeading and trailing empty \nlines should be removed\n\n';
+    void component.messageSent();
+    //eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    sentText = sendMessageSpy.calls.mostRecent().args[0];
+
+    expect(sentText).toEqual(
+      'Leading and trailing empty \nlines should be removed'
+    );
+
+    component.textareaValue =
+      'Multiple empty line inside the message\n\n\nis allowed';
+    void component.messageSent();
+    //eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    sentText = sendMessageSpy.calls.mostRecent().args[0];
+
+    expect(sentText).toEqual(
+      'Multiple empty line inside the message\n\n\nis allowed'
+    );
+  });
 });

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

@@ -331,6 +331,8 @@ export class MessageInputComponent
     }
     const attachments = this.attachmentService.mapToAttachments();
     let text = this.textareaValue;
+    text = text.replace(/^\n+/g, ''); // leading empty lines
+    text = text.replace(/\n+$/g, ''); // ending empty lines
     const textContainsOnlySpaceChars = !text.replace(/ /g, ''); //spcae
     if (
       (!text || textContainsOnlySpaceChars) &&