fix: make sure that channelListSetter respects the order of channel…

…s, and make sure it only accepts a watched channel

BREAKING CHANGE: the `channelListSetter` no longer accepts a `ChannelResponse`, for more information follow: https://getstream.io/chat/docs/sdk/angular/5/basics/upgrade-v4/#signature-change-for-custom-channel-list-event-handlers

docusaurus/angular_versioned_docs/version-5/basics/upgrade-v4.mdx

@@ -201,6 +201,46 @@ The `stream-message-input` still has all inputs/outputs you need to create a cus
 ></stream-message-input>
 ```
 
+### Signature change for custom channel list event handlers
+
+The `channelListSetter`'s signature changed for the following custom event handlers of the `ChannelService`:
+
+- `customNewMessageNotificationHandler`
+- `customAddedToChannelNotificationHandler`
+- `customRemovedFromChannelNotificationHandler`
+- `customChannelDeletedHandler`
+- `customChannelUpdatedHandler`
+- `customChannelTruncatedHandler`
+- `customChannelHiddenHandler`
+- `customChannelVisibleHandler`
+- `customNewMessageHandler`
+
+If you're adding a new channel to the list from these handlers, you need to make sure to provide a [watched](https://getstream.io/chat/docs/javascript/watch_channel/?language=javascript) channel.
+
+Example code:
+
+```typescript
+private async customEventHandler(
+  clientEvent: ClientEvent,
+  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
+) {
+  const channelResponse = clientEvent!.event!.channel!;
+  // Change 1: create a channel from `ChannelResponse`
+  const newChanel = this.chatService.chatClient.channel(
+    channelResponse.type,
+    channelResponse.id
+  );
+  try {
+    // Change 2: call .watch() before adding it to the channel list
+    await newChanel.watch();
+    const existingChannels = this.channelService.channels;
+    channelListSetter([newChanel, ...existingChannels]);
+  } catch (error) {
+    console.error('Failed to watch channel', error);
+  }
+}
+```
+
 ### Removed deprecated features
 
 #### `MessageListComponent`

docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx

@@ -459,19 +459,26 @@ It's important to note that the filtering set above is not applied to [events](h
 To override the default behavior create a custom event handler in `app.component.ts` that checks if the user was invited to the channel or added directly and only adds the channel to the list if the user was added directly:
 
 ```typescript
-private customAddedToChannelNotificationHandler(
-    clientEvent: ClientEvent,
-    channelListSetter: (channels: (Channel | ChannelResponse)[]) => void
-  ): void {
-    let channels!: Channel[];
-    this.channelService.channels$
-      .pipe(take(1))
-      .subscribe((c) => (channels = c || []));
-    if (clientEvent.event.member?.invited) {
-      return;
-    }
-    channelListSetter([clientEvent!.event!.channel!, ...channels]);
+private async customAddedToChannelNotificationHandler(
+  clientEvent: ClientEvent,
+  channelListSetter: (channels: Channel<DefaultStreamChatGenerics>[]) => void
+) {
+  if (clientEvent.event.member?.invited) {
+    return;
+  }
+  const channelResponse = clientEvent!.event!.channel!;
+  const newChanel = this.chatService.chatClient.channel(
+    channelResponse.type,
+    channelResponse.id
+  );
+  try {
+    await newChanel.watch();
+    const existingChannels = this.channelService.channels;
+    channelListSetter([newChanel, ...existingChannels]);
+  } catch (error) {
+    console.error('Failed to watch channel', error);
   }
+}
 ```
 
 Now register the handler to the [channel service](../services/ChannelService.mdx) in the constructor of `app.component.ts`:
@@ -497,3 +504,5 @@ this.chatService.events$
     });
   });
 ```
+
+If you're doing this in a component other than `AppComponent`, don't forget to unsubscribe from the `events$` Observable.

docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx

@@ -122,7 +122,7 @@ The id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L39)
 
 ---
 
@@ -134,7 +134,7 @@ The parent id of the message the attachments belong to
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L43)
 
 ---
 
@@ -146,7 +146,7 @@ The attachments to display
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L47)
 
 ---
 
@@ -158,6 +158,6 @@ Emits the state of the image carousel window
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
+[projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L51)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx

@@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:17](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L17)
 
 ---
 
@@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:21](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L21)
 
 ---
 
@@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
+[projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts:25](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L25)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx

@@ -51,7 +51,7 @@ TextareaInterface.value
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
 
 ---
 
@@ -67,7 +67,7 @@ TextareaInterface.placeholder
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
 
 ---
 
@@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
 
 ---
 
@@ -99,7 +99,7 @@ TextareaInterface.inputMode
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
 
 ---
 
@@ -115,7 +115,7 @@ TextareaInterface.mentionScope
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
 
 ---
 
@@ -131,7 +131,7 @@ TextareaInterface.autoFocus
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
 
 ---
 
@@ -147,7 +147,7 @@ TextareaInterface.valueChange
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
 
 ---
 
@@ -163,7 +163,7 @@ TextareaInterface.send
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
 
 ---
 
@@ -179,6 +179,6 @@ TextareaInterface.userMentions
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
+[projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AvatarComponent.mdx

@@ -71,7 +71,7 @@ An optional name of the image, used for fallback image or image title (if `image
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:35](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L35)
 
 ---
 
@@ -83,7 +83,7 @@ The URL of the image to be displayed. If the image can't be displayed the first
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:39](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L39)
 
 ---
 
@@ -95,7 +95,7 @@ The location the avatar will be displayed in
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:43](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L43)
 
 ---
 
@@ -107,7 +107,7 @@ The channel the avatar belongs to (if avatar of a channel is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:47](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L47)
 
 ---
 
@@ -119,7 +119,7 @@ The user the avatar belongs to (if avatar of a user is displayed)
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:51](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L51)
 
 ---
 
@@ -131,7 +131,7 @@ The type of the avatar: channel if channel avatar is displayed, user if user ava
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:55](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L55)
 
 ---
 
@@ -143,7 +143,7 @@ If a channel avatar is displayed, and if the channel has exactly two members a g
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:59](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L59)
 
 ---
 
@@ -155,6 +155,6 @@ If channel/user image isn't provided the initials of the name of the channel/use
 
 #### Defined in
 
-[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/f43d2078f2bb47e5525dc36e606606b4b5dfac61/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
+[projects/stream-chat-angular/src/lib/avatar/avatar.component.ts:63](https://github.com/GetStream/stream-chat-angular/blob/3edb3a00ac99d243563a0ba3efab897b5d67137e/projects/stream-chat-angular/src/lib/avatar/avatar.component.ts#L63)
 
 [//]: # "End of generated content"