add useChannelHiddenListener

src/components/ChannelList/ChannelList.js

@@ -20,6 +20,7 @@ import { useNotificationRemovedFromChannelListener } from './hooks/useNotificati
 import { useChannelDeletedListener } from './hooks/useChannelDeletedListener';
 import { useChannelTruncatedListener } from './hooks/useChannelTruncatedListener';
 import { useChannelUpdatedListener } from './hooks/useChannelUpdatedListener';
+import { useChannelHiddenListener } from './hooks/useChannelHiddenListener';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
 import { useUserPresenceChangedListener } from './hooks/useUserPresenceChangedListener';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -121,6 +122,7 @@ const ChannelList = (props) => {
     props.onRemovedFromChannel,
   );
   useChannelDeletedListener(setChannels, props.onChannelDeleted);
+  useChannelHiddenListener(setChannels, props.onChannelHidden);
   useChannelTruncatedListener(
     setChannels,
     props.onChannelTruncated,
@@ -134,18 +136,20 @@ const ChannelList = (props) => {
   useEffect(() => {
     /** @param {import('stream-chat').Event<string>} e */
     const handleEvent = (e) => {
-      if (e.channel?.cid === channel?.cid) {
+      if (e?.cid === channel?.cid) {
         setActiveChannel?.();
       }
     };
 
     client.on('channel.deleted', handleEvent);
+    client.on('channel.hidden', handleEvent);
 
     return () => {
       client.off('channel.deleted', handleEvent);
+      client.off('channel.hidden', handleEvent);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [channel]);
 
   // renders the channel preview or item
   /** @param {import('stream-chat').Channel} item */

src/components/ChannelList/hooks/useChannelDeletedListener.js

@@ -20,7 +20,7 @@ export const useChannelDeletedListener = (setChannels, customHandler) => {
       } else {
         setChannels((channels) => {
           const channelIndex = channels.findIndex(
-            (channel) => channel.cid === e.channel?.cid,
+            (channel) => channel.cid === e?.cid,
           );
 
           if (channelIndex < 0) return [...channels];

src/components/ChannelList/hooks/useChannelHiddenListener.js

@@ -0,0 +1,43 @@
+// @ts-check
+
+import { useEffect, useContext } from 'react';
+import { ChatContext } from '../../../context';
+
+/**
+ * @typedef {import('stream-chat').Event<string>} ChannelHiddenEvent
+ * @typedef {React.Dispatch<React.SetStateAction<import('stream-chat').Channel[]>>} SetChannels
+ * @param {SetChannels} setChannels
+ * @param {(setChannels: SetChannels, event: ChannelHiddenEvent) => void} [customHandler]
+ */
+export const useChannelHiddenListener = (setChannels, customHandler) => {
+  const { client } = useContext(ChatContext);
+
+  useEffect(() => {
+    /** @param {import('stream-chat').Event<string>} e */
+    const handleEvent = (e) => {
+      if (customHandler && typeof customHandler === 'function') {
+        customHandler(setChannels, e);
+      } else {
+        setChannels((channels) => {
+          const channelIndex = channels.findIndex(
+            (channel) => channel.cid === e?.cid,
+          );
+          if (channelIndex < 0) return [...channels];
+
+          // Remove the hidden channel from the list.s
+          channels.splice(channelIndex, 1);
+
+          // eslint-disable-next-line consistent-return
+          return [...channels];
+        });
+      }
+    };
+
+    client.on('channel.hidden', handleEvent);
+
+    return () => {
+      client.off('channel.hidden', handleEvent);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [customHandler]);
+};

types/index.d.ts

@@ -220,6 +220,10 @@ export interface ChannelListProps {
     thisArg: React.Dispatch<React.SetStateAction<Client.Channel[]>>,
     e: Client.Event<string>,
   ): void;
+  onChannelHidden?(
+    thisArg: React.Dispatch<React.SetStateAction<Client.Channel[]>>,
+    e: Client.Event<string>,
+  ): void;
   onChannelUpdated?(
     thisArg: React.Dispatch<React.SetStateAction<Client.Channel[]>>,
     e: Client.Event<string>,