Merge pull request #1175 from GetStream/channellist-hooks-additions

add allowNewMessagesFromUnfilteredChannels argument to channellist hooks

Author: DanC5

CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## [6.7.2](https://github.com/GetStream/stream-chat-react/releases/tag/v6.7.2) 2021-09-15
+
+### Feature
+
+- Add optional `allowNewMessagesFromUnfilteredChannels` argument to `useNotificationMessageNewListener` and `useNotificationAddedToChannelListener` hooks to prevent channel from incrementing the list [#1175](https://github.com/GetStream/stream-chat-react/pull/1175)
+
+### Bug
+
+- Fix issue with autocomplete mentions displaying muted users [#1171](https://github.com/GetStream/stream-chat-react/pull/1171)
+- Prevent user mention edge case crash [#1172](https://github.com/GetStream/stream-chat-react/pull/1172)
+- Fix reaction handler edge case on mobile web use case [#1173](https://github.com/GetStream/stream-chat-react/pull/1173)
+- Add missing default value for `publishTypingEvent` `MessageInput` prop [#1174](https://github.com/GetStream/stream-chat-react/pull/1174)
+
 ## [6.7.1](https://github.com/GetStream/stream-chat-react/releases/tag/v6.7.1) 2021-09-14
 
 ### Bug

docusaurus/docs/React/core-components/channel-list.mdx

@@ -102,9 +102,10 @@ Additional props to be passed to the underlying [`ChannelSearch`](../utility-com
 
 ### allowNewMessagesFromUnfilteredChannels
 
-When the client receives a `message.new` event, we automatically push that channel to the top of the list. If the channel
-doesn't currently exist in the list, we grab the channel from `client.activeChannels` and push it to the top of the list.
-You can disable this behavior by setting this prop to false, which will prevent channels not in the list from incrementing the list.
+When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically push
+that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from `client.activeChannels`
+and push it to the top of the list. You can disable this behavior by setting this prop to false, which will prevent channels not in the
+list from incrementing the list.
 
 | Type    | Default |
 | ------- | ------- |

src/components/ChannelList/ChannelList.tsx

@@ -62,9 +62,9 @@ export type ChannelListProps<
   /** Additional props for underlying ChannelSearch component, [available props](https://getstream.io/chat/docs/sdk/react/utility-components/channel_search/#props) */
   additionalChannelSearchProps?: ChannelSearchProps<At, Ch, Co, Ev, Me, Re, Us>;
   /**
-   * When the client receives a `message.new` event, we automatically push that channel to the top of the list.
-   * If the channel doesn't currently exist in the list, we grab the channel from `client.activeChannels`
-   * and push it to the top of the list. You can disable this behavior by setting this prop
+   * When the client receives `message.new`, `notification.message_new`, and `notification.added_to_channel` events, we automatically
+   * push that channel to the top of the list. If the channel doesn't currently exist in the list, we grab the channel from
+   * `client.activeChannels` and push it to the top of the list. You can disable this behavior by setting this prop
    * to false, which will prevent channels not in the list from incrementing the list. The default is true.
    */
   allowNewMessagesFromUnfilteredChannels?: boolean;
@@ -270,8 +270,17 @@ const UnMemoizedChannelList = <
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
   useMessageNewListener(setChannels, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
-  useNotificationMessageNewListener(setChannels, onMessageNew, setOffset);
-  useNotificationAddedToChannelListener(setChannels, onAddedToChannel);
+  useNotificationMessageNewListener(
+    setChannels,
+    onMessageNew,
+    setOffset,
+    allowNewMessagesFromUnfilteredChannels,
+  );
+  useNotificationAddedToChannelListener(
+    setChannels,
+    onAddedToChannel,
+    allowNewMessagesFromUnfilteredChannels,
+  );
   useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
   useChannelDeletedListener(setChannels, onChannelDeleted);
   useChannelHiddenListener(setChannels, onChannelHidden);

src/components/ChannelList/hooks/useNotificationAddedToChannelListener.ts

@@ -31,14 +31,15 @@ export const useNotificationAddedToChannelListener = <
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>>>,
     event: Event<At, Ch, Co, Ev, Me, Re, Us>,
   ) => void,
+  allowNewMessagesFromUnfilteredChannels = true,
 ) => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   useEffect(() => {
     const handleEvent = async (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
       if (customHandler && typeof customHandler === 'function') {
         customHandler(setChannels, event);
-      } else if (event.channel?.type) {
+      } else if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
         const channel = await getChannel(client, event.channel.type, event.channel.id);
         setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
       }

src/components/ChannelList/hooks/useNotificationMessageNewListener.ts

@@ -32,18 +32,16 @@ export const useNotificationMessageNewListener = <
     event: Event<At, Ch, Co, Ev, Me, Re, Us>,
   ) => void,
   setOffset?: React.Dispatch<React.SetStateAction<number>>,
+  allowNewMessagesFromUnfilteredChannels = true,
 ) => {
   const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   useEffect(() => {
     const handleEvent = async (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
-      // if new message, put move channel up
-      // get channel if not in state currently
       if (customHandler && typeof customHandler === 'function') {
         customHandler(setChannels, event);
-      } else if (event.channel?.type) {
+      } else if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
         const channel = await getChannel(client, event.channel.type, event.channel.id);
-        // move channel to starting position
         setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
       }