feat: channel pinning and archiving events handler improvements

Author: khushal87

package/src/components/ChannelList/ChannelList.tsx

@@ -166,13 +166,15 @@ export type ChannelListProps<
    * @param event An [Event object](https://getstream.io/chat/docs/event_object) corresponding to `message.new` event
    * @param considerArchivedChannels If set to true, archived channels will be considered while updating the list of channels
    * @param filters Channel filters
+   * @param sort Channel sort options
    * @overrideType Function
    * */
   onNewMessage?: (
     lockChannelOrder: boolean,
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
     filters?: ChannelFilters<StreamChatGenerics>,
+    sort?: ChannelSort<StreamChatGenerics>,
   ) => void;
   /**
    * Override the default listener/handler for event `notification.message_new`
@@ -354,6 +356,7 @@ export const ChannelList = <
     onNewMessage,
     setChannels,
     filters,
+    sort,
   });
 
   useNewMessageNotification({

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

@@ -5,6 +5,11 @@ import type { Channel, ChannelFilters, ChannelSort, Event } from 'stream-chat';
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
 import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import {
+  findLastPinnedChannelIndex,
+  findPinnedAtSortOrder,
+  shouldConsiderPinnedChannels,
+} from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
@@ -44,6 +49,9 @@ export const useChannelMemberUpdated = <
         const channelType = event.channel_type;
         const channelId = event.channel_id;
 
+        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        const pinnedAtSort = findPinnedAtSortOrder({ sort });
+
         setChannels((currentChannels) => {
           if (!currentChannels) return currentChannels;
 
@@ -52,7 +60,7 @@ export const useChannelMemberUpdated = <
           const targetChannelIndex = currentChannels.indexOf(targetChannel);
           const targetChannelExistsWithinList = targetChannelIndex >= 0;
 
-          if (lockChannelOrder) {
+          if (!considerPinnedChannels || lockChannelOrder) {
             return currentChannels;
           }
 
@@ -69,7 +77,24 @@ export const useChannelMemberUpdated = <
           ) {
             return newChannels;
           }
-          return currentChannels;
+
+          // handle pinning
+          let lastPinnedChannelIndex: number | null = null;
+
+          if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !member.pinned_at)) {
+            lastPinnedChannelIndex = findLastPinnedChannelIndex({ channels: newChannels });
+          }
+          const newTargetChannelIndex =
+            typeof lastPinnedChannelIndex === 'number' ? lastPinnedChannelIndex + 1 : 0;
+
+          // skip re-render if the position of the channel does not change
+          if (currentChannels[newTargetChannelIndex] === targetChannel) {
+            return currentChannels;
+          }
+
+          newChannels.splice(newTargetChannelIndex, 0, targetChannel);
+
+          return newChannels;
         });
       }
     };

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

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
 
-import type { Channel, ChannelFilters, 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 { moveChannelUp } from '../../utils';
-import { isChannelArchived } from '../utils';
+import { isChannelArchived, isChannelPinned, shouldConsiderPinnedChannels } from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
@@ -17,8 +17,10 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
       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 useNewMessage = <
@@ -28,13 +30,14 @@ export const useNewMessage = <
   onNewMessage,
   setChannels,
   filters,
+  sort,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
 
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       if (typeof onNewMessage === 'function') {
-        onNewMessage(lockChannelOrder, setChannels, event, filters);
+        onNewMessage(lockChannelOrder, setChannels, event, filters, sort);
       } else {
         setChannels((channels) => {
           if (!channels) return channels;
@@ -45,11 +48,19 @@ export const useNewMessage = <
           const targetChannel = channels[targetChannelIndex];
 
           const isTargetChannelArchived = isChannelArchived(targetChannel);
+          const isTargetChannelPinned = isChannelPinned(targetChannel);
+          const isArchivedFilterTrue = filters && filters.archived === true;
+          const isArchivedFilterFalse = filters && filters.archived === false;
 
-          const considerArchivedChannels = filters && filters.archived === false;
+          const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
 
-          // If channel is archived and we don't want to consider archived channels, return existing list
-          if (isTargetChannelArchived && considerArchivedChannels) {
+          if (
+            // If the channel is archived and we are not considering archived channels
+            (isTargetChannelArchived && isArchivedFilterFalse) ||
+            // If the channel is pinned and we are not considering pinned channels
+            (isTargetChannelPinned && considerPinnedChannels) ||
+            lockChannelOrder
+          ) {
             return channels;
           }
 
@@ -58,6 +69,14 @@ export const useNewMessage = <
             // It may happen that channel was hidden using channel.hide(). In that case
             // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
             const channel = client.channel(event.channel_type, event.channel_id);
+            // While adding new channels, we need to consider whether they are archived or not.
+            if (
+              // When archived filter false, and channel is archived
+              (isChannelArchived(channel) && isArchivedFilterFalse) ||
+              // When archived filter true, and channel is not archived
+              (isArchivedFilterTrue && !isChannelArchived(channel))
+            )
+              return channels;
             return [channel, ...channels];
           }
 

package/src/components/ChannelList/hooks/utils/index.ts

@@ -1,5 +1,6 @@
 import { Channel } from 'stream-chat';
 import { DefaultStreamChatGenerics } from '../../../../types/types';
+import { ChannelListProps } from '../../ChannelList';
 
 export const isChannelPinned = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -24,3 +25,62 @@ export const isChannelArchived = <
 
   return !!member?.archived_at;
 };
+
+/**
+ * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ */
+export const shouldConsiderPinnedChannels = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  sort: ChannelListProps<StreamChatGenerics>['sort'],
+) => {
+  if (!sort) return false;
+
+  if (Array.isArray(sort)) {
+    const [option] = sort;
+
+    if (!option?.pinned_at) return false;
+
+    return Math.abs(option.pinned_at) === 1;
+  } else {
+    if (!sort.pinned_at) return false;
+
+    return Math.abs(sort.pinned_at) === 1;
+  }
+};
+
+export function findPinnedAtSortOrder<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({ sort }: { sort: ChannelListProps<StreamChatGenerics>['sort'] }) {
+  if (!sort) return null;
+
+  if (Array.isArray(sort)) {
+    const [option] = sort;
+
+    if (!option?.pinned_at) return null;
+
+    return option.pinned_at;
+  } else {
+    if (!sort.pinned_at) return null;
+
+    return sort.pinned_at;
+  }
+}
+
+export function findLastPinnedChannelIndex<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({ channels }: { channels: Channel<StreamChatGenerics>[] }) {
+  let lastPinnedChannelIndex: number | null = null;
+
+  for (const channel of channels) {
+    if (!isChannelPinned(channel)) break;
+
+    if (typeof lastPinnedChannelIndex === 'number') {
+      lastPinnedChannelIndex++;
+    } else {
+      lastPinnedChannelIndex = 0;
+    }
+  }
+
+  return lastPinnedChannelIndex;
+}