stream-chat-react-native-core 6.3.1 → 6.4.0-beta.2

package/src/components/ChannelList/ChannelList.tsx

@@ -12,6 +12,7 @@ import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMe
 import { useAddedToChannelNotification } from './hooks/listeners/useAddedToChannelNotification';
 import { useChannelDeleted } from './hooks/listeners/useChannelDeleted';
 import { useChannelHidden } from './hooks/listeners/useChannelHidden';
+import { useChannelMemberUpdated } from './hooks/listeners/useChannelMemberUpdated';
 import { useChannelTruncated } from './hooks/listeners/useChannelTruncated';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useChannelVisible } from './hooks/listeners/useChannelVisible';
@@ -29,7 +30,7 @@ import {
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { upsertCidsForQuery } from '../../store/apis/upsertCidsForQuery';
-import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ChannelListEventListenerOptions, DefaultStreamChatGenerics } from '../../types/types';
 import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
@@ -89,12 +90,15 @@ 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>,
+    options?: ChannelListEventListenerOptions<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.
@@ -120,6 +124,21 @@ export type ChannelListProps<
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
+  /**
+   * Function that overrides default behavior when a channel member.updated event is triggered
+   * @param lockChannelOrder If set to true, channels won't dynamically sort by most recent message, defaults to false
+   * @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 `member.updated` event
+   * @param filters Channel filters
+   * @param sort Channel sort options
+   * @overrideType Function
+   */
+  onChannelMemberUpdated?: (
+    lockChannelOrder: boolean,
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+    event: Event<StreamChatGenerics>,
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>,
+  ) => void;
   /**
    * Function to customize behavior when a channel gets truncated
    *
@@ -163,13 +182,16 @@ export type ChannelListProps<
    * @param lockChannelOrder If set to true, channels won't dynamically sort by most recent message, defaults to false
    * @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 `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>,
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
   /**
    * Override the default listener/handler for event `notification.message_new`
@@ -177,13 +199,15 @@ 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.message_new` event
-   *
+   * @param filters Channel filters
    * @overrideType Function
    * */
   onNewMessageNotification?: (
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>,
   ) => void;
+
   /**
    * Function that overrides default behavior when a user gets removed from a channel
    *
@@ -244,6 +268,7 @@ export const ChannelList = <
     onAddedToChannel,
     onChannelDeleted,
     onChannelHidden,
+    onChannelMemberUpdated,
     onChannelTruncated,
     onChannelUpdated,
     onChannelVisible,
@@ -289,6 +314,7 @@ export const ChannelList = <
   // Setup event listeners
   useAddedToChannelNotification({
     onAddedToChannel,
+    options: { filters, sort },
     setChannels,
   });
 
@@ -302,6 +328,13 @@ export const ChannelList = <
     setChannels,
   });
 
+  useChannelMemberUpdated({
+    lockChannelOrder,
+    onChannelMemberUpdated,
+    options: { filters, sort },
+    setChannels,
+  });
+
   useChannelTruncated({
     onChannelTruncated,
     refreshList,
@@ -322,11 +355,13 @@ export const ChannelList = <
   useNewMessage({
     lockChannelOrder,
     onNewMessage,
+    options: { filters, sort },
     setChannels,
   });
 
   useNewMessageNotification({
     onNewMessageNotification,
+    options: { filters, sort },
     setChannels,
   });
 

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

@@ -6,8 +6,12 @@ import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type {
+  ChannelListEventListenerOptions,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
 import { getChannel } from '../../utils';
+import { findLastPinnedChannelIndex, findPinnedAtSortOrder } from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
@@ -15,13 +19,16 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
     onAddedToChannel?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
+      options?: ChannelListEventListenerOptions<StreamChatGenerics>,
     ) => void;
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>;
   };
 
 export const useAddedToChannelNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onAddedToChannel,
+  options,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
@@ -29,15 +36,37 @@ export const useAddedToChannelNotification = <
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
       if (typeof onAddedToChannel === 'function') {
-        onAddedToChannel(setChannels, event);
+        onAddedToChannel(setChannels, event, options);
       } else {
+        if (!options) return;
+        const { sort } = options;
         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');
+          });
         }
       }
     };

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

@@ -0,0 +1,116 @@
+import { useEffect } from 'react';
+
+import type { Channel, Event } from 'stream-chat';
+
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
+
+import type {
+  ChannelListEventListenerOptions,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
+import {
+  findLastPinnedChannelIndex,
+  findPinnedAtSortOrder,
+  isChannelArchived,
+  isChannelPinned,
+  shouldConsiderArchivedChannels,
+  shouldConsiderPinnedChannels,
+} from '../utils';
+
+type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
+  {
+    lockChannelOrder: boolean;
+    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
+    onChannelMemberUpdated?: (
+      lockChannelOrder: boolean,
+      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
+      event: Event<StreamChatGenerics>,
+      options?: ChannelListEventListenerOptions<StreamChatGenerics>,
+    ) => void;
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>;
+  };
+
+export const useChannelMemberUpdated = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  lockChannelOrder,
+  onChannelMemberUpdated,
+  options,
+  setChannels,
+}: Parameters<StreamChatGenerics>) => {
+  const { client } = useChatContext<StreamChatGenerics>();
+
+  useEffect(() => {
+    const handleEvent = (event: Event<StreamChatGenerics>) => {
+      if (typeof onChannelMemberUpdated === 'function') {
+        onChannelMemberUpdated(lockChannelOrder, setChannels, event, options);
+      } else {
+        if (!options) return;
+        const { filters, sort } = options;
+        if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
+          return;
+        }
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+
+        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+        const pinnedAtSort = findPinnedAtSortOrder({ sort });
+
+        setChannels((currentChannels) => {
+          if (!currentChannels) return currentChannels;
+
+          const targetChannel = client.channel(channelType, channelId);
+          // assumes that channel instances are not changing
+          const targetChannelIndex = currentChannels.indexOf(targetChannel);
+          const targetChannelExistsWithinList = targetChannelIndex >= 0;
+
+          const isTargetChannelPinned = isChannelPinned(targetChannel);
+          const isTargetChannelArchived = isChannelArchived(targetChannel);
+
+          if (!considerPinnedChannels || lockChannelOrder) {
+            return currentChannels;
+          }
+
+          const newChannels = [...currentChannels];
+
+          if (targetChannelExistsWithinList) {
+            newChannels.splice(targetChannelIndex, 1);
+          }
+
+          // handle archiving (remove channel)
+          if (
+            // When archived filter true, and channel is unarchived
+            (considerArchivedChannels && !isTargetChannelArchived && filters?.archived) ||
+            // When archived filter false, and channel is archived
+            (considerArchivedChannels && isTargetChannelArchived && !filters?.archived)
+          ) {
+            return newChannels;
+          }
+
+          // handle pinning
+          let lastPinnedChannelIndex: number | null = null;
+
+          if (pinnedAtSort === 1 || (pinnedAtSort === -1 && !isTargetChannelPinned)) {
+            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;
+        });
+      }
+    };
+
+    const listener = client?.on('member.updated', handleEvent);
+    return () => listener?.unsubscribe();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+};

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

@@ -4,8 +4,17 @@ import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type {
+  ChannelListEventListenerOptions,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
 import { moveChannelUp } from '../../utils';
+import {
+  isChannelArchived,
+  isChannelPinned,
+  shouldConsiderArchivedChannels,
+  shouldConsiderPinnedChannels,
+} from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
@@ -15,7 +24,9 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
       lockChannelOrder: boolean,
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
+      options?: ChannelListEventListenerOptions<StreamChatGenerics>,
     ) => void;
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>;
   };
 
 export const useNewMessage = <
@@ -23,6 +34,7 @@ export const useNewMessage = <
 >({
   lockChannelOrder,
   onNewMessage,
+  options,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
@@ -30,27 +42,44 @@ export const useNewMessage = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       if (typeof onNewMessage === 'function') {
-        onNewMessage(lockChannelOrder, setChannels, event);
+        onNewMessage(lockChannelOrder, setChannels, event, options);
       } else {
+        if (!options) return;
+        const { filters, sort } = options;
+        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+
+        if (!channelType || !channelId) return;
+
         setChannels((channels) => {
           if (!channels) return channels;
-          const channelInList = channels.filter((channel) => channel.cid === event.cid).length > 0;
-
-          if (!channelInList && event.channel_type && event.channel_id) {
-            // If channel doesn't exist in existing list, check in activeChannels as well.
-            // 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);
-            return [channel, ...channels];
-          }
+          const targetChannel = client.channel(channelType, channelId);
+          const targetChannelIndex = channels.indexOf(targetChannel);
+
+          const isTargetChannelArchived = isChannelArchived(targetChannel);
+          const isTargetChannelPinned = isChannelPinned(targetChannel);
 
-          if (!lockChannelOrder && event.cid)
-            return moveChannelUp<StreamChatGenerics>({
-              channels,
-              cid: event.cid,
-            });
+          if (
+            // When archived filter false, and channel is archived
+            (considerArchivedChannels && isTargetChannelArchived && !filters?.archived) ||
+            // When archived filter true, and channel is unarchived
+            (considerArchivedChannels && !isTargetChannelArchived && filters?.archived) ||
+            // If the channel is pinned and we are not considering pinned channels
+            (isTargetChannelPinned && considerPinnedChannels) ||
+            lockChannelOrder
+          ) {
+            return [...channels];
+          }
 
-          return [...channels];
+          return moveChannelUp<StreamChatGenerics>({
+            channels,
+            channelToMove: targetChannel,
+            channelToMoveIndexWithinChannels: targetChannelIndex,
+            sort,
+          });
         });
       }
     };

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

@@ -6,23 +6,29 @@ import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
+import type {
+  ChannelListEventListenerOptions,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
 import { getChannel } from '../../utils';
+import { isChannelArchived } from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
-
     onNewMessageNotification?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
+      options?: ChannelListEventListenerOptions<StreamChatGenerics>,
     ) => void;
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>;
   };
 
 export const useNewMessageNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onNewMessageNotification,
+  options,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
@@ -30,14 +36,23 @@ export const useNewMessageNotification = <
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
       if (typeof onNewMessageNotification === 'function') {
-        onNewMessageNotification(setChannels, event);
+        onNewMessageNotification(setChannels, event, options);
       } else {
+        if (!options) return;
+        const { filters } = options;
         if (event.channel?.id && event.channel?.type) {
           const channel = await getChannel({
             client,
             id: event.channel.id,
             type: event.channel.type,
           });
+
+          // Handle archived channels
+          const considerArchivedChannels = filters && filters.archived === false;
+          if (isChannelArchived(channel) && considerArchivedChannels) {
+            return;
+          }
+
           setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
         }
       }

package/src/components/ChannelList/hooks/useChannelMembershipState.ts

@@ -0,0 +1,22 @@
+import { Channel, ChannelMemberResponse, EventTypes } from 'stream-chat';
+
+import { useSelectedChannelState } from './useSelectedChannelState';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+const selector = <StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel: Channel<StreamChatGenerics>,
+) => channel.state.membership;
+const keys: EventTypes[] = ['member.updated'];
+
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel: Channel<StreamChatGenerics>,
+): ChannelMemberResponse<StreamChatGenerics>;
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel?: Channel<StreamChatGenerics>,
+): ChannelMemberResponse<StreamChatGenerics> | undefined;
+export function useChannelMembershipState<StreamChatGenerics extends DefaultStreamChatGenerics>(
+  channel?: Channel<StreamChatGenerics>,
+) {
+  return useSelectedChannelState({ channel, selector, stateChangeEventKeys: keys });
+}

package/src/components/ChannelList/hooks/useSelectedChannelState.ts

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+
+import type { Channel, EventTypes } from 'stream-chat';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
+
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+const noop = () => {};
+
+export function useSelectedChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  channel: Channel<StreamChatGenerics>;
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  stateChangeEventKeys?: EventTypes[];
+}): O;
+export function useSelectedChannelState<
+  StreamChatGenerics extends DefaultStreamChatGenerics,
+  O,
+>(_: {
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics> | undefined;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined;
+export function useSelectedChannelState<StreamChatGenerics extends DefaultStreamChatGenerics, O>({
+  channel,
+  selector,
+  stateChangeEventKeys = ['all'],
+}: {
+  selector: (channel: Channel<StreamChatGenerics>) => O;
+  channel?: Channel<StreamChatGenerics>;
+  stateChangeEventKeys?: EventTypes[];
+}): O | undefined {
+  const subscribe = useCallback(
+    (onStoreChange: (value: O) => void) => {
+      if (!channel) return noop;
+
+      const subscriptions = stateChangeEventKeys.map((et) =>
+        channel.on(et, () => {
+          onStoreChange(selector(channel));
+        }),
+      );
+
+      return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    },
+    [channel, selector, stateChangeEventKeys],
+  );
+
+  const getSnapshot = useCallback(() => {
+    if (!channel) return undefined;
+
+    return selector(channel);
+  }, [channel, selector]);
+
+  return useSyncExternalStore(subscribe, getSnapshot);
+}

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

@@ -0,0 +1,130 @@
+import { Channel, ChannelSortBase } from 'stream-chat';
+
+import { DefaultStreamChatGenerics } from '../../../../types/types';
+import { ChannelListProps } from '../../ChannelList';
+
+export const isChannelPinned = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  if (!channel) return false;
+
+  const member = channel.state.membership;
+
+  return !!member?.pinned_at;
+};
+
+export const isChannelArchived = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  channel: Channel<StreamChatGenerics>,
+) => {
+  if (!channel) return false;
+
+  const member = channel.state.membership;
+
+  return !!member?.archived_at;
+};
+
+export const shouldConsiderArchivedChannels = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  filters: ChannelListProps<StreamChatGenerics>['filters'],
+) => {
+  if (!filters) return false;
+
+  return typeof filters.archived === 'boolean';
+};
+
+export const extractSortValue = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  atIndex,
+  sort,
+  targetKey,
+}: {
+  atIndex: number;
+  targetKey: keyof ChannelSortBase<StreamChatGenerics>;
+  sort?: ChannelListProps<StreamChatGenerics>['sort'];
+}) => {
+  if (!sort) return null;
+  let option: null | ChannelSortBase<StreamChatGenerics> = null;
+
+  if (Array.isArray(sort)) {
+    option = sort[atIndex] ?? null;
+  } else {
+    let index = 0;
+    for (const key in sort) {
+      if (index !== atIndex) {
+        index++;
+        continue;
+      }
+
+      if (key !== targetKey) {
+        return null;
+      }
+
+      option = sort;
+
+      break;
+    }
+  }
+
+  return option?.[targetKey] ?? null;
+};
+
+/**
+ * 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'],
+) => {
+  const value = extractSortValue({
+    atIndex: 0,
+    sort,
+    targetKey: 'pinned_at',
+  });
+
+  if (typeof value !== 'number') return false;
+
+  return Math.abs(value) === 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;
+}