stream-chat-react 12.7.1 → 12.8.1

package/dist/components/ChannelList/ChannelList.d.ts

@@ -94,4 +94,4 @@ export type ChannelListProps<StreamChatGenerics extends DefaultStreamChatGeneric
 /**
  * Renders a preview list of Channels, allowing you to select the Channel you want to open
  */
-export declare const ChannelList: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelListProps<StreamChatGenerics>) => React.JSX.Element;
+export declare const ChannelList: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelListProps<SCG>) => React.JSX.Element;

package/dist/components/ChannelList/ChannelList.js

@@ -1,20 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { ChannelListMessenger } from './ChannelListMessenger';
-import { useChannelDeletedListener } from './hooks/useChannelDeletedListener';
-import { useChannelHiddenListener } from './hooks/useChannelHiddenListener';
-import { useChannelTruncatedListener } from './hooks/useChannelTruncatedListener';
-import { useChannelUpdatedListener } from './hooks/useChannelUpdatedListener';
-import { useChannelVisibleListener } from './hooks/useChannelVisibleListener';
 import { useConnectionRecoveredListener } from './hooks/useConnectionRecoveredListener';
-import { useMessageNewListener } from './hooks/useMessageNewListener';
 import { useMobileNavigation } from './hooks/useMobileNavigation';
-import { useNotificationAddedToChannelListener } from './hooks/useNotificationAddedToChannelListener';
-import { useNotificationMessageNewListener } from './hooks/useNotificationMessageNewListener';
-import { useNotificationRemovedFromChannelListener } from './hooks/useNotificationRemovedFromChannelListener';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
-import { useUserPresenceChangedListener } from './hooks/useUserPresenceChangedListener';
-import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUp } from './utils';
+import { MAX_QUERY_CHANNELS_LIMIT, moveChannelUpwards } from './utils';
 import { Avatar as DefaultAvatar } from '../Avatar';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 import { ChannelSearch as DefaultChannelSearch, } from '../ChannelSearch/ChannelSearch';
@@ -24,11 +14,12 @@ import { LoadMorePaginator } from '../LoadMore/LoadMorePaginator';
 import { NullComponent } from '../UtilityComponents';
 import { ChannelListContextProvider } from '../../context';
 import { useChatContext } from '../../context/ChatContext';
+import { useChannelListShape, usePrepareShapeHandlers } from './hooks/useChannelListShape';
 const DEFAULT_FILTERS = {};
 const DEFAULT_OPTIONS = {};
 const DEFAULT_SORT = {};
 const UnMemoizedChannelList = (props) => {
-    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters, getLatestMessagePreview, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
+    const { additionalChannelSearchProps, Avatar = DefaultAvatar, allowNewMessagesFromUnfilteredChannels = true, channelRenderFilterFn, ChannelSearch = DefaultChannelSearch, customActiveChannel, customQueryChannels, EmptyStateIndicator = DefaultEmptyStateIndicator, filters = {}, getLatestMessagePreview, LoadingErrorIndicator = NullComponent, LoadingIndicator = LoadingChannels, List = ChannelListMessenger, lockChannelOrder = false, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, options, Paginator = LoadMorePaginator, Preview, recoveryThrottleIntervalMs, renderChannels, sendChannelsToList = false, setActiveChannelOnMount = true, showChannelSearch = false, sort = DEFAULT_SORT, watchers = {}, } = props;
     const { channel, channelsQueryState, client, closeMobileNav, customClasses, navOpen = false, setActiveChannel, theme, useImageFlagEmojisOnWindows, } = useChatContext('ChannelList');
     const channelListRef = useRef(null);
     const [channelUpdateCount, setChannelUpdateCount] = useState(0);
@@ -42,6 +33,7 @@ const UnMemoizedChannelList = (props) => {
             return;
         }
         if (customActiveChannel) {
+            // FIXME: this is wrong...
             let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
             if (!customActiveChannelObject) {
                 //@ts-expect-error
@@ -49,10 +41,10 @@ const UnMemoizedChannelList = (props) => {
             }
             if (customActiveChannelObject) {
                 setActiveChannel(customActiveChannelObject, watchers);
-                const newChannels = moveChannelUp({
-                    activeChannel: customActiveChannelObject,
+                const newChannels = moveChannelUpwards({
                     channels,
-                    cid: customActiveChannelObject.cid,
+                    channelToMove: customActiveChannelObject,
+                    sort,
                 });
                 setChannels(newChannels);
             }
@@ -66,16 +58,9 @@ const UnMemoizedChannelList = (props) => {
      * For some events, inner properties on the channel will update but the shallow comparison will not
      * force a re-render. Incrementing this dummy variable ensures the channel previews update.
      */
-    const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), [
-        setChannelUpdateCount,
-    ]);
+    const forceUpdate = useCallback(() => setChannelUpdateCount((count) => count + 1), []);
     const onSearch = useCallback((event) => {
-        if (!event.target.value) {
-            setSearchActive(false);
-        }
-        else {
-            setSearchActive(true);
-        }
+        setSearchActive(!!event.target.value);
         additionalChannelSearchProps?.onSearch?.(event);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -87,17 +72,27 @@ const UnMemoizedChannelList = (props) => {
     const { channels, hasNextPage, loadNextPage, setChannels } = usePaginatedChannels(client, filters || DEFAULT_FILTERS, sort || DEFAULT_SORT, options || DEFAULT_OPTIONS, activeChannelHandler, recoveryThrottleIntervalMs, customQueryChannels);
     const loadedChannels = channelRenderFilterFn ? channelRenderFilterFn(channels) : channels;
     useMobileNavigation(channelListRef, navOpen, closeMobileNav);
-    useMessageNewListener(setChannels, onMessageNewHandler, lockChannelOrder, allowNewMessagesFromUnfilteredChannels);
-    useNotificationMessageNewListener(setChannels, onMessageNew, allowNewMessagesFromUnfilteredChannels);
-    useNotificationAddedToChannelListener(setChannels, onAddedToChannel, allowNewMessagesFromUnfilteredChannels);
-    useNotificationRemovedFromChannelListener(setChannels, onRemovedFromChannel);
-    useChannelDeletedListener(setChannels, onChannelDeleted);
-    useChannelHiddenListener(setChannels, onChannelHidden);
-    useChannelVisibleListener(setChannels, onChannelVisible);
-    useChannelTruncatedListener(setChannels, onChannelTruncated, forceUpdate);
-    useChannelUpdatedListener(setChannels, onChannelUpdated, forceUpdate);
+    const { customHandler, defaultHandler } = usePrepareShapeHandlers({
+        allowNewMessagesFromUnfilteredChannels,
+        filters,
+        lockChannelOrder,
+        onAddedToChannel,
+        onChannelDeleted,
+        onChannelHidden,
+        onChannelTruncated,
+        onChannelUpdated,
+        onChannelVisible,
+        onMessageNew,
+        onMessageNewHandler,
+        onRemovedFromChannel,
+        setChannels,
+        sort,
+        // TODO: implement
+        // customHandleChannelListShape
+    });
+    useChannelListShape(customHandler ?? defaultHandler);
+    // TODO: maybe move this too
     useConnectionRecoveredListener(forceUpdate);
-    useUserPresenceChangedListener(setChannels);
     useEffect(() => {
         const handleEvent = (event) => {
             if (event.cid === channel?.cid) {

package/dist/components/ChannelList/hooks/index.d.ts

@@ -11,3 +11,4 @@ export * from './useNotificationMessageNewListener';
 export * from './useNotificationRemovedFromChannelListener';
 export * from './usePaginatedChannels';
 export * from './useUserPresenceChangedListener';
+export * from './useChannelMembershipState';

package/dist/components/ChannelList/hooks/index.js

@@ -11,3 +11,4 @@ export * from './useNotificationMessageNewListener';
 export * from './useNotificationRemovedFromChannelListener';
 export * from './usePaginatedChannels';
 export * from './useUserPresenceChangedListener';
+export * from './useChannelMembershipState';

package/dist/components/ChannelList/hooks/useChannelListShape.d.ts

@@ -0,0 +1,60 @@
+import { Dispatch, SetStateAction } from 'react';
+import { Channel, Event, ExtendableGenerics } from 'stream-chat';
+import { ChannelListProps } from '../ChannelList';
+type SetChannels<SCG extends ExtendableGenerics> = Dispatch<SetStateAction<Channel<SCG>[]>>;
+type BaseParameters<SCG extends ExtendableGenerics> = {
+    event: Event<SCG>;
+    setChannels: SetChannels<SCG>;
+};
+type RepeatedParameters<SCG extends ExtendableGenerics> = {
+    customHandler?: (setChannels: BaseParameters<SCG>['setChannels'], event: BaseParameters<SCG>['event']) => void;
+};
+type HandleMessageNewParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG> & {
+    allowNewMessagesFromUnfilteredChannels: boolean;
+    lockChannelOrder: boolean;
+} & Required<Pick<ChannelListProps<SCG>, 'filters' | 'sort'>>;
+type HandleNotificationMessageNewParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG> & {
+    allowNewMessagesFromUnfilteredChannels: boolean;
+    lockChannelOrder: boolean;
+} & Required<Pick<ChannelListProps<SCG>, 'filters' | 'sort'>>;
+type HandleNotificationRemovedFromChannelParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleNotificationAddedToChannelParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG> & {
+    allowNewMessagesFromUnfilteredChannels: boolean;
+    lockChannelOrder: boolean;
+} & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
+type HandleMemberUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & {
+    lockChannelOrder: boolean;
+} & Required<Pick<ChannelListProps<SCG>, 'sort'>>;
+type HandleChannelDeletedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleChannelHiddenParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleChannelVisibleParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleChannelTruncatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleChannelUpdatedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG> & RepeatedParameters<SCG>;
+type HandleUserPresenceChangedParameters<SCG extends ExtendableGenerics> = BaseParameters<SCG>;
+export declare const useChannelListShapeDefaults: <SCG extends ExtendableGenerics>() => {
+    handleChannelDeleted: (p: HandleChannelDeletedParameters<SCG>) => void;
+    handleChannelHidden: (p: HandleChannelHiddenParameters<SCG>) => void;
+    handleChannelTruncated: ({ customHandler, event, setChannels }: HandleChannelTruncatedParameters<SCG>) => void;
+    handleChannelUpdated: ({ customHandler, event, setChannels }: HandleChannelUpdatedParameters<SCG>) => void;
+    handleChannelVisible: ({ customHandler, event, setChannels }: HandleChannelVisibleParameters<SCG>) => Promise<void>;
+    handleMemberUpdated: ({ event, lockChannelOrder, setChannels, sort }: HandleMemberUpdatedParameters<SCG>) => void;
+    handleMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort, }: HandleMessageNewParameters<SCG>) => void;
+    handleNotificationAddedToChannel: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }: HandleNotificationAddedToChannelParameters<SCG>) => Promise<void>;
+    handleNotificationMessageNew: ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }: HandleNotificationMessageNewParameters<SCG>) => Promise<void>;
+    handleNotificationRemovedFromChannel: ({ customHandler, event, setChannels, }: HandleNotificationRemovedFromChannelParameters<SCG>) => void;
+    handleUserPresenceChanged: ({ event, setChannels }: HandleUserPresenceChangedParameters<SCG>) => void;
+};
+type UseDefaultHandleChannelListShapeParameters<SCG extends ExtendableGenerics> = Required<Pick<ChannelListProps<SCG>, 'allowNewMessagesFromUnfilteredChannels' | 'lockChannelOrder' | 'filters' | 'sort'>> & Pick<ChannelListProps<SCG>, 'onAddedToChannel' | 'onChannelDeleted' | 'onChannelHidden' | 'onChannelTruncated' | 'onChannelUpdated' | 'onChannelVisible' | 'onMessageNew' | 'onMessageNewHandler' | 'onRemovedFromChannel'> & {
+    setChannels: SetChannels<SCG>;
+    customHandleChannelListShape?: (data: {
+        defaults: ReturnType<typeof useChannelListShapeDefaults>;
+        event: Event<SCG>;
+        setChannels: SetChannels<SCG>;
+    }) => void;
+};
+export declare const usePrepareShapeHandlers: <SCG extends ExtendableGenerics>({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort, }: UseDefaultHandleChannelListShapeParameters<SCG>) => {
+    customHandler: ((e: Event<SCG>) => void) | null;
+    defaultHandler: (e: Event<SCG>) => void;
+};
+export declare const useChannelListShape: <SCG extends ExtendableGenerics>(handler: (e: Event<SCG>) => void) => void;
+export {};

package/dist/components/ChannelList/hooks/useChannelListShape.js

@@ -0,0 +1,344 @@
+// const defaults = useChannelListShapeDefaults();
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import uniqBy from 'lodash.uniqby';
+import { findLastPinnedChannelIndex, isChannelArchived, isChannelPinned, moveChannelUpwards, shouldConsiderArchivedChannels, shouldConsiderPinnedChannels, } from '../utils';
+import { useChatContext } from '../../../context';
+import { getChannel } from '../../../utils';
+const shared = ({ customHandler, event, setChannels, }) => {
+    if (typeof customHandler === 'function') {
+        return customHandler(setChannels, event);
+    }
+    setChannels((channels) => {
+        const channelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+        if (channelIndex < 0)
+            return channels;
+        channels.splice(channelIndex, 1);
+        return [...channels];
+    });
+};
+export const useChannelListShapeDefaults = () => {
+    const { client } = useChatContext();
+    const handleMessageNew = useCallback(({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, lockChannelOrder, setChannels, sort, }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        setChannels((channels) => {
+            const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid);
+            const targetChannelExistsWithinList = targetChannelIndex >= 0;
+            const targetChannel = channels[targetChannelIndex];
+            const isTargetChannelPinned = isChannelPinned(targetChannel);
+            const isTargetChannelArchived = isChannelArchived(targetChannel);
+            const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+            const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+            if (
+            // target channel is archived
+            (isTargetChannelArchived && considerArchivedChannels) ||
+                // target channel is pinned
+                (isTargetChannelPinned && considerPinnedChannels) ||
+                // list order is locked
+                lockChannelOrder ||
+                // target channel is not within the loaded list and loading from cache is disallowed
+                (!targetChannelExistsWithinList && !allowNewMessagesFromUnfilteredChannels)) {
+                return channels;
+            }
+            // we either have the channel to move or we pull it from the cache (or instantiate) if it's allowed
+            const channelToMove = channels[targetChannelIndex] ??
+                (allowNewMessagesFromUnfilteredChannels && event.channel_type
+                    ? client.channel(event.channel_type, event.channel_id)
+                    : null);
+            if (channelToMove) {
+                return moveChannelUpwards({
+                    channels,
+                    channelToMove,
+                    channelToMoveIndexWithinChannels: targetChannelIndex,
+                    sort,
+                });
+            }
+            return channels;
+        });
+    }, [client]);
+    const handleNotificationMessageNew = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, filters, setChannels, sort, }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        if (!event.channel) {
+            return;
+        }
+        const channel = await getChannel({
+            client,
+            id: event.channel.id,
+            type: event.channel.type,
+        });
+        const considerArchivedChannels = shouldConsiderArchivedChannels(filters);
+        if (isChannelArchived(channel) && considerArchivedChannels) {
+            return;
+        }
+        if (!allowNewMessagesFromUnfilteredChannels) {
+            return;
+        }
+        setChannels((channels) => moveChannelUpwards({
+            channels,
+            channelToMove: channel,
+            channelToMoveIndexWithinChannels: -1,
+            sort,
+        }));
+    }, [client]);
+    const handleNotificationAddedToChannel = useCallback(async ({ allowNewMessagesFromUnfilteredChannels, customHandler, event, setChannels, }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        if (allowNewMessagesFromUnfilteredChannels && event.channel?.type) {
+            const channel = await getChannel({
+                client,
+                id: event.channel.id,
+                members: event.channel.members?.reduce((acc, { user, user_id }) => {
+                    const userId = user_id || user?.id;
+                    if (userId) {
+                        acc.push(userId);
+                    }
+                    return acc;
+                }, []),
+                type: event.channel.type,
+            });
+            setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        }
+    }, [client]);
+    const handleNotificationRemovedFromChannel = useCallback(({ customHandler, event, setChannels, }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        setChannels((channels) => channels.filter((channel) => channel.cid !== event.channel?.cid));
+    }, []);
+    const handleMemberUpdated = useCallback(({ event, lockChannelOrder, setChannels, sort }) => {
+        if (!event.member?.user || event.member.user.id !== client.userID || !event.channel_type) {
+            return;
+        }
+        const member = event.member;
+        const channelType = event.channel_type;
+        const channelId = event.channel_id;
+        const considerPinnedChannels = shouldConsiderPinnedChannels(sort);
+        // TODO: extract this and consider single property sort object too
+        const pinnedAtSort = Array.isArray(sort) ? sort[0]?.pinned_at ?? null : null;
+        setChannels((currentChannels) => {
+            const targetChannel = client.channel(channelType, channelId);
+            // assumes that channel instances are not changing
+            const targetChannelIndex = currentChannels.indexOf(targetChannel);
+            const targetChannelExistsWithinList = targetChannelIndex >= 0;
+            // handle pinning
+            if (!considerPinnedChannels || lockChannelOrder)
+                return currentChannels;
+            const newChannels = [...currentChannels];
+            if (targetChannelExistsWithinList) {
+                newChannels.splice(targetChannelIndex, 1);
+            }
+            // handle archiving (remove channel)
+            if (typeof member.archived_at === 'string') {
+                return newChannels;
+            }
+            let lastPinnedChannelIndex = null;
+            // calculate last pinned channel index only if `pinned_at` sort is set to
+            // ascending order or if it's in descending order while the pin is being removed, otherwise
+            // we move to the top (index 0)
+            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;
+        });
+    }, [client]);
+    const handleChannelDeleted = useCallback((p) => shared(p), []);
+    const handleChannelHidden = useCallback((p) => shared(p), []);
+    const handleChannelVisible = useCallback(async ({ customHandler, event, setChannels }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        if (event.type && event.channel_type && event.channel_id) {
+            const channel = await getChannel({
+                client,
+                id: event.channel_id,
+                type: event.channel_type,
+            });
+            setChannels((channels) => uniqBy([channel, ...channels], 'cid'));
+        }
+    }, [client]);
+    const handleChannelTruncated = useCallback(({ customHandler, event, setChannels }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        // TODO: not sure whether this is needed
+        setChannels((channels) => [...channels]);
+        // if (forceUpdate) {
+        //   forceUpdate();
+        // }
+    }, []);
+    const handleChannelUpdated = useCallback(({ customHandler, event, setChannels }) => {
+        if (typeof customHandler === 'function') {
+            return customHandler(setChannels, event);
+        }
+        setChannels((channels) => {
+            const channelIndex = channels.findIndex((channel) => channel.cid === event.channel?.cid);
+            if (channelIndex > -1 && event.channel) {
+                const newChannels = channels;
+                newChannels[channelIndex].data = {
+                    ...event.channel,
+                    hidden: event.channel?.hidden ?? newChannels[channelIndex].data?.hidden,
+                    own_capabilities: event.channel?.own_capabilities ?? newChannels[channelIndex].data?.own_capabilities,
+                };
+                return [...newChannels];
+            }
+            return channels;
+        });
+        // if (forceUpdate) {
+        //   forceUpdate();
+        // }
+    }, []);
+    const handleUserPresenceChanged = useCallback(({ event, setChannels }) => {
+        setChannels((channels) => {
+            const newChannels = channels.map((channel) => {
+                if (!event.user?.id || !channel.state.members[event.user.id]) {
+                    return channel;
+                }
+                // FIXME: oh no...
+                const newChannel = channel;
+                newChannel.state.members[event.user.id].user = event.user;
+                return newChannel;
+            });
+            return newChannels;
+        });
+    }, []);
+    return useMemo(() => ({
+        handleChannelDeleted,
+        handleChannelHidden,
+        handleChannelTruncated,
+        handleChannelUpdated,
+        handleChannelVisible,
+        handleMemberUpdated,
+        handleMessageNew,
+        handleNotificationAddedToChannel,
+        handleNotificationMessageNew,
+        handleNotificationRemovedFromChannel,
+        handleUserPresenceChanged,
+    }), [
+        handleChannelDeleted,
+        handleChannelHidden,
+        handleChannelTruncated,
+        handleChannelUpdated,
+        handleChannelVisible,
+        handleMemberUpdated,
+        handleMessageNew,
+        handleNotificationAddedToChannel,
+        handleNotificationMessageNew,
+        handleNotificationRemovedFromChannel,
+        handleUserPresenceChanged,
+    ]);
+};
+export const usePrepareShapeHandlers = ({ allowNewMessagesFromUnfilteredChannels, customHandleChannelListShape, filters, lockChannelOrder, onAddedToChannel, onChannelDeleted, onChannelHidden, onChannelTruncated, onChannelUpdated, onChannelVisible, onMessageNew, onMessageNewHandler, onRemovedFromChannel, setChannels, sort, }) => {
+    const defaults = useChannelListShapeDefaults();
+    const defaultHandleChannelListShapeRef = useRef();
+    const customHandleChannelListShapeRef = useRef();
+    customHandleChannelListShapeRef.current = (event) => {
+        // @ts-expect-error can't use ReturnType<typeof useChannelListShapeDefaults<SCG>> until we upgrade prettier to at least v2.7.0
+        customHandleChannelListShape?.({ defaults, event, setChannels });
+    };
+    defaultHandleChannelListShapeRef.current = (event) => {
+        switch (event.type) {
+            case 'message.new':
+                defaults.handleMessageNew({
+                    allowNewMessagesFromUnfilteredChannels,
+                    customHandler: onMessageNewHandler,
+                    event,
+                    filters,
+                    lockChannelOrder,
+                    setChannels,
+                    sort,
+                });
+                break;
+            case 'notification.message_new':
+                defaults.handleNotificationMessageNew({
+                    allowNewMessagesFromUnfilteredChannels,
+                    customHandler: onMessageNew,
+                    event,
+                    filters,
+                    lockChannelOrder,
+                    setChannels,
+                    sort,
+                });
+                break;
+            case 'notification.added_to_channel':
+                defaults.handleNotificationAddedToChannel({
+                    allowNewMessagesFromUnfilteredChannels,
+                    customHandler: onAddedToChannel,
+                    event,
+                    lockChannelOrder,
+                    setChannels,
+                    sort,
+                });
+                break;
+            case 'notification.removed_from_channel':
+                defaults.handleNotificationRemovedFromChannel({
+                    customHandler: onRemovedFromChannel,
+                    event,
+                    setChannels,
+                });
+                break;
+            case 'channel.deleted':
+                defaults.handleChannelDeleted({
+                    customHandler: onChannelDeleted,
+                    event,
+                    setChannels,
+                });
+                break;
+            case 'channel.hidden':
+                defaults.handleChannelHidden({ customHandler: onChannelHidden, event, setChannels });
+                break;
+            case 'channel.visible':
+                defaults.handleChannelVisible({ customHandler: onChannelVisible, event, setChannels });
+                break;
+            case 'channel.truncated':
+                defaults.handleChannelTruncated({ customHandler: onChannelTruncated, event, setChannels });
+                break;
+            case 'channel.updated':
+                defaults.handleChannelUpdated({ customHandler: onChannelUpdated, event, setChannels });
+                break;
+            case 'user.presence.changed':
+                defaults.handleUserPresenceChanged({ event, setChannels });
+                break;
+            case 'member.updated':
+                defaults.handleMemberUpdated({
+                    event,
+                    lockChannelOrder,
+                    setChannels,
+                    sort,
+                });
+                break;
+            default:
+                break;
+        }
+    };
+    const defaultFn = useCallback((e) => {
+        defaultHandleChannelListShapeRef.current?.(e);
+    }, []);
+    const customFn = useMemo(() => {
+        if (!customHandleChannelListShape)
+            return null;
+        return (e) => {
+            customHandleChannelListShapeRef.current?.(e);
+        };
+    }, [customHandleChannelListShape]);
+    return {
+        customHandler: customFn,
+        defaultHandler: defaultFn,
+    };
+};
+export const useChannelListShape = (handler) => {
+    const { client } = useChatContext();
+    useEffect(() => {
+        const subscription = client.on('all', handler);
+        return subscription.unsubscribe;
+    }, [client, handler]);
+};

package/dist/components/ChannelList/hooks/useChannelMembershipState.d.ts

@@ -0,0 +1,2 @@
+import type { Channel, ExtendableGenerics } from 'stream-chat';
+export declare const useChannelMembershipState: <SCG extends ExtendableGenerics>(channel?: Channel<SCG>) => import("stream-chat").ChannelMemberResponse<SCG>;

package/dist/components/ChannelList/hooks/useChannelMembershipState.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import { useChatContext } from '../../../context';
+export const useChannelMembershipState = (channel) => {
+    const [membership, setMembership] = useState(channel?.state.membership || {});
+    const { client } = useChatContext();
+    useEffect(() => {
+        if (!channel)
+            return;
+        const subscriptions = ['member.updated'].map((v) => client.on(v, () => {
+            setMembership(channel.state.membership);
+        }));
+        return () => subscriptions.forEach((subscription) => subscription.unsubscribe());
+    }, [client, channel]);
+    return membership;
+};

package/dist/components/ChannelList/utils.d.ts

@@ -1,10 +1,46 @@
-import type { Channel } from 'stream-chat';
+import type { Channel, ChannelSort, ExtendableGenerics } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../types/types';
+import type { ChannelListProps } from './ChannelList';
 export declare const MAX_QUERY_CHANNELS_LIMIT = 30;
-type MoveChannelUpParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    channels: Array<Channel<StreamChatGenerics>>;
+type MoveChannelUpParams<SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    channels: Array<Channel<SCG>>;
     cid: string;
-    activeChannel?: Channel<StreamChatGenerics>;
+    activeChannel?: Channel<SCG>;
 };
-export declare const moveChannelUp: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ activeChannel, channels, cid, }: MoveChannelUpParams<StreamChatGenerics>) => Channel<StreamChatGenerics>[];
+/**
+ * @deprecated
+ */
+export declare const moveChannelUp: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ activeChannel, channels, cid, }: MoveChannelUpParams<SCG>) => Channel<SCG>[];
+/**
+ * Expects channel array sorted by `{ pinned_at: -1 }`.
+ *
+ * TODO: add support for the `{ pinned_at: 1 }`
+ */
+export declare function findLastPinnedChannelIndex<SCG extends ExtendableGenerics>({ channels, }: {
+    channels: Channel<SCG>[];
+}): number | null;
+type MoveChannelUpwardsParams<SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    channels: Array<Channel<SCG>>;
+    channelToMove: Channel<SCG>;
+    sort: ChannelSort<SCG>;
+    /**
+     * If the index of the channel within `channels` list which is being moved upwards
+     * (`channelToMove`) is known, you can supply it to skip extra calculation.
+     */
+    channelToMoveIndexWithinChannels?: number;
+};
+/**
+ * This function should not be used to move pinned already channels.
+ */
+export declare const moveChannelUpwards: <SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channels, channelToMove, channelToMoveIndexWithinChannels, sort, }: MoveChannelUpwardsParams<SCG>) => Channel<SCG>[];
+/**
+ * Returns true only if `{ pinned_at: -1 }` or `{ pinned_at: 1 }` option is first within the `sort` array.
+ */
+export declare const shouldConsiderPinnedChannels: <SCG extends ExtendableGenerics>(sort: ChannelListProps<SCG>['sort']) => boolean;
+/**
+ * Returns `true` only if `archived` property is set to `false` within `filters`.
+ */
+export declare const shouldConsiderArchivedChannels: <SCG extends ExtendableGenerics>(filters: ChannelListProps<SCG>['filters']) => boolean;
+export declare const isChannelPinned: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
+export declare const isChannelArchived: <SCG extends ExtendableGenerics>(channel: Channel<SCG>) => boolean;
 export {};