handle channel.visible event and add onChannelVisible prop on Channel…

…List

src/components/ChannelList/ChannelList.tsx

@@ -20,6 +20,7 @@ import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
 import { useRemovedFromChannelNotification } from './hooks/listeners/useRemovedFromChannelNotification';
 import { useUserPresence } from './hooks/listeners/useUserPresence';
+import { useChannelVisible } from './hooks/listeners/useChannelVisible';
 import { Skeleton as SkeletonDefault } from './Skeleton';
 
 import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
@@ -174,6 +175,20 @@ export type ChannelListProps<
     >,
     event: Event<At, Ch, Co, Ev, Me, Re, Us>,
   ) => void;
+  /**
+   * Function that overrides default behavior when a channel gets visible. In absence of this prop, the channel will be added to the list.
+   *
+   * @param setChannels Setter for internal state property - `channels`. It's created from useState() hook.
+   * @param event An [Event object](https://getstream.io/chat/docs/event_object) corresponding to `channel.visible` event
+   *
+   * @overrideType Function
+   * */
+  onChannelVisible?: (
+    setChannels: React.Dispatch<
+      React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>
+    >,
+    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+  ) => void;
   /**
    * Override the default listener/handler for event `notification.message_new`
    * This event is received on channel, which is not being watched.
@@ -256,6 +271,7 @@ export const ChannelList = <
     onAddedToChannel,
     onChannelDeleted,
     onChannelHidden,
+    onChannelVisible,
     onChannelTruncated,
     onChannelUpdated,
     onMessageNew,
@@ -308,6 +324,11 @@ export const ChannelList = <
     setChannels,
   });
 
+  useChannelVisible({
+    onChannelVisible,
+    setChannels,
+  });
+
   useChannelTruncated({
     onChannelTruncated,
     refreshList,

src/components/ChannelList/hooks/listeners/useChannelVisible.ts

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+import uniqBy from 'lodash/uniqBy';
+import type { Channel, Event } from 'stream-chat';
+
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+import { getChannel } from '../../utils';
+
+import type {
+  DefaultAttachmentType,
+  DefaultChannelType,
+  DefaultCommandType,
+  DefaultEventType,
+  DefaultMessageType,
+  DefaultReactionType,
+  DefaultUserType,
+  UnknownType,
+} from '../../../../types/types';
+
+type Parameters<
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+> = {
+  setChannels: React.Dispatch<
+    React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>
+  >;
+  onChannelVisible?: (
+    setChannels: React.Dispatch<
+      React.SetStateAction<Channel<At, Ch, Co, Ev, Me, Re, Us>[]>
+    >,
+    event: Event<At, Ch, Co, Ev, Me, Re, Us>,
+  ) => void;
+};
+
+export const useChannelVisible = <
+  At extends UnknownType = DefaultAttachmentType,
+  Ch extends UnknownType = DefaultChannelType,
+  Co extends string = DefaultCommandType,
+  Ev extends UnknownType = DefaultEventType,
+  Me extends UnknownType = DefaultMessageType,
+  Re extends UnknownType = DefaultReactionType,
+  Us extends UnknownType = DefaultUserType
+>({
+  onChannelVisible,
+  setChannels,
+}: Parameters<At, Ch, Co, Ev, Me, Re, Us>) => {
+  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
+
+  useEffect(() => {
+    const handleEvent = async (event: Event<At, Ch, Co, Ev, Me, Re, Us>) => {
+      if (typeof onChannelVisible === 'function') {
+        onChannelVisible(setChannels, event);
+      } else {
+        if (event.channel_id && event.channel_type) {
+          const channel = await getChannel<At, Ch, Co, Ev, Me, Re, Us>({
+            client,
+            id: event.channel_id,
+            type: event.channel_type,
+          });
+          setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        }
+      }
+    };
+
+    client.on('channel.visible', handleEvent);
+    return () => client.off('channel.visible', handleEvent);
+  }, []);
+};