From 33739bd730f61da62e6fbe305a2807575643af50 Mon Sep 17 00:00:00 2001
From: Jaap <jaap@getstream.io>
Date: Tue, 11 Aug 2020 16:32:39 +0200
Subject: [PATCH] add useChannelHiddenListener

---
 src/components/ChannelList/ChannelList.js     |  8 +++-
 .../hooks/useChannelDeletedListener.js        |  2 +-
 .../hooks/useChannelHiddenListener.js         | 43 +++++++++++++++++++
 types/index.d.ts                              |  4 ++
 4 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ChannelList/hooks/useChannelHiddenListener.js

diff --git a/src/components/ChannelList/ChannelList.js b/src/components/ChannelList/ChannelList.js
index f3cc63bf3..ec10f0bcf 100644
--- a/src/components/ChannelList/ChannelList.js
+++ b/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 */
diff --git a/src/components/ChannelList/hooks/useChannelDeletedListener.js b/src/components/ChannelList/hooks/useChannelDeletedListener.js
index 9a8349f0f..2ace8bde7 100644
--- a/src/components/ChannelList/hooks/useChannelDeletedListener.js
+++ b/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];
diff --git a/src/components/ChannelList/hooks/useChannelHiddenListener.js b/src/components/ChannelList/hooks/useChannelHiddenListener.js
new file mode 100644
index 000000000..1c2d7fd02
--- /dev/null
+++ b/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]);
+};
diff --git a/types/index.d.ts b/types/index.d.ts
index 9176a7746..61bb6ef53 100644
--- a/types/index.d.ts
+++ b/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>,