feat: handle on added to channel event

Author: khushal87

package/src/components/ChannelList/ChannelList.tsx

@@ -90,12 +90,16 @@ export type ChannelListProps<
    *
    * @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 `notification.added_to_channel` event
+   * @param filters Channel filters
+   * @param sort Channel sort options
    *
    * @overrideType Function
    * */
   onAddedToChannel?: (
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
+    filters?: ChannelFilters<StreamChatGenerics>,
+    sort?: ChannelSort<StreamChatGenerics>,
   ) => void;
   /**
    * Function that overrides default behavior when a channel gets deleted. In absence of this prop, the channel will be removed from the list.
@@ -314,6 +318,8 @@ export const ChannelList = <
   useAddedToChannelNotification({
     onAddedToChannel,
     setChannels,
+    filters,
+    sort,
   });
 
   useChannelDeleted({

package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts

@@ -2,42 +2,70 @@ import { useEffect } from 'react';
 
 import uniqBy from 'lodash/uniqBy';
 
-import type { Channel, Event } from 'stream-chat';
+import type { Channel, ChannelFilters, ChannelSort, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
 import { getChannel } from '../../utils';
+import { findLastPinnedChannelIndex, findPinnedAtSortOrder } from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onAddedToChannel?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
+      filters?: ChannelFilters<StreamChatGenerics>,
+      sort?: ChannelSort<StreamChatGenerics>,
     ) => void;
+    filters?: ChannelFilters<StreamChatGenerics>;
+    sort?: ChannelSort<StreamChatGenerics>;
   };
 
 export const useAddedToChannelNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onAddedToChannel,
   setChannels,
+  filters,
+  sort,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
       if (typeof onAddedToChannel === 'function') {
-        onAddedToChannel(setChannels, event);
+        onAddedToChannel(setChannels, event, filters, sort);
       } else {
         if (event.channel?.id && event.channel?.type) {
           const channel = await getChannel<StreamChatGenerics>({
             client,
             id: event.channel.id,
             type: event.channel.type,
           });
-          setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
+
+          const pinnedAtSort = findPinnedAtSortOrder({ sort });
+
+          setChannels((channels) => {
+            if (!channels) return channels;
+
+            // handle pinning
+            let lastPinnedChannelIndex: number | null = null;
+
+            const newChannels = [...channels];
+
+            if (pinnedAtSort === 1 || pinnedAtSort === -1) {
+              lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+              const newTargetChannelIndex =
+                typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0;
+
+              newChannels.splice(newTargetChannelIndex, 0, channel);
+              return newChannels;
+            }
+
+            return uniqBy([channel, ...channels], 'cid');
+          });
         }
       }
     };