diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx index 3319fc7ea..6baceb791 100644 --- a/package/src/components/ChannelList/ChannelList.tsx +++ b/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[] | null>>, event: Event, + filters?: ChannelFilters, + sort?: ChannelSort, ) => 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({ diff --git a/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts b/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts index 465bd1adb..a9ecb0280 100644 --- a/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts +++ b/package/src/components/ChannelList/hooks/listeners/useAddedToChannelNotification.ts @@ -2,12 +2,13 @@ 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 = { @@ -15,7 +16,11 @@ type Parameters[] | null>>, event: Event, + filters?: ChannelFilters, + sort?: ChannelSort, ) => void; + filters?: ChannelFilters; + sort?: ChannelSort; }; export const useAddedToChannelNotification = < @@ -23,13 +28,15 @@ export const useAddedToChannelNotification = < >({ onAddedToChannel, setChannels, + filters, + sort, }: Parameters) => { const { client } = useChatContext(); useEffect(() => { const handleEvent = async (event: Event) => { if (typeof onAddedToChannel === 'function') { - onAddedToChannel(setChannels, event); + onAddedToChannel(setChannels, event, filters, sort); } else { if (event.channel?.id && event.channel?.type) { const channel = await getChannel({ @@ -37,7 +44,28 @@ export const useAddedToChannelNotification = < 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'); + }); } } };