Adding a prop allowNewMessagesFromUnfilteredChannels on ChannelList

Author: vishalnarkhede

src/components/ChannelList/ChannelList.js

@@ -121,7 +121,11 @@ const ChannelList = (props) => {
   useMobileNavigation(channelListRef, navOpen, closeMobileNav);
 
   // All the event listeners
-  useMessageNewListener(setChannels, props.lockChannelOrder);
+  useMessageNewListener(
+    setChannels,
+    props.lockChannelOrder,
+    props.allowNewMessagesFromUnfilteredChannels,
+  );
   useNotificationMessageNewListener(setChannels, props.onMessageNew);
   useNotificationAddedToChannelListener(setChannels, props.onAddedToChannel);
   useNotificationRemovedFromChannelListener(
@@ -381,6 +385,18 @@ ChannelList.propTypes = {
    * If true, channels won't be dynamically sorted by most recent message.
    */
   lockChannelOrder: PropTypes.bool,
+  /**
+   * When client receives an event `message.new`, we push that channel to top of the list.
+   *
+   * But If the channel doesn't exist in the list, then we get the channel from client
+   * (client maintains list of watched channels as `client.activeChannels`) and push
+   * that channel to top of the list by default. You can disallow this behavior by setting following
+   * prop to false. This is quite usefull where you have multiple tab structure and you don't want
+   * ChannelList in Tab1 to react to new message on some channel in Tab2.
+   *
+   * Default value is true.
+   */
+  allowNewMessagesFromUnfilteredChannels: PropTypes.bool,
 };
 
 export default React.memo(ChannelList);

src/components/ChannelList/hooks/useMessageNewListener.js

@@ -14,6 +14,7 @@ import { moveChannelUp } from '../utils';
 export const useMessageNewListener = (
   setChannels,
   lockChannelOrder = false,
+  allowNewMessagesFromUnfilteredChannels = true,
 ) => {
   const { client } = useContext(ChatContext);
   useEffect(() => {
@@ -22,7 +23,7 @@ export const useMessageNewListener = (
       setChannels((channels) => {
         const channelInList =
           channels.filter((c) => c.cid === e.cid).length > 0;
-        if (!channelInList) {
+        if (!channelInList && allowNewMessagesFromUnfilteredChannels) {
           // @ts-ignore
           const channel = client.channel(e.channel_type, e.channel_id);
           return uniqBy([channel, ...channels], 'cid');

types/index.d.ts

@@ -275,6 +275,18 @@ export interface ChannelListProps {
   List?: React.ElementType<ChannelListUIComponentProps>;
   Paginator?: React.ElementType<PaginatorProps>;
   lockChannelOrder?: boolean;
+  /**
+   * When client receives an event `message.new`, we push that channel to top of the list.
+   *
+   * But If the channel doesn't exist in the list, then we get the channel from client
+   * (client maintains list of watched channels as `client.activeChannels`) and push
+   * that channel to top of the list by default. You can disallow this behavior by setting following
+   * prop to false. This is quite usefull where you have multiple tab structure and you don't want
+   * ChannelList in Tab1 to react to new message on some channel in Tab2.
+   *
+   * Default value is true.
+   */
+  allowNewMessagesFromUnfilteredChannels?: PropTypes.bool;
   onMessageNew?(
     thisArg: React.Dispatch<React.SetStateAction<Client.Channel[]>>,
     e: Client.Event,