diff --git a/src/components/ChannelList/hooks/useMemberUpdatedListener.ts b/src/components/ChannelList/hooks/useMemberUpdatedListener.ts deleted file mode 100644 index bac41d30b..000000000 --- a/src/components/ChannelList/hooks/useMemberUpdatedListener.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { useEffect } from 'react'; -import type { Dispatch, SetStateAction } from 'react'; -import type { Channel, ExtendableGenerics } from 'stream-chat'; - -import { useChatContext } from '../../../context'; -import { findLastPinnedChannelIndex } from '../utils'; - -export const useMemberUpdatedListener = ({ - considerPinnedChannels = false, - lockChannelOrder = false, - setChannels, -}: { - setChannels: Dispatch[]>>; - considerPinnedChannels?: boolean; - lockChannelOrder?: boolean; -}) => { - const { client } = useChatContext(); - - useEffect(() => { - // do nothing if channel order is locked or pinned channels aren't being considered - if (lockChannelOrder || !considerPinnedChannels) return; - - const subscription = client.on('member.updated', (e) => { - if (!e.member || !e.channel_type) return; - // const member = e.member; - const channelType = e.channel_type; - const channelId = e.channel_id; - - setChannels((currentChannels) => { - const targetChannel = client.channel(channelType, channelId); - // assumes that channel instances are not changing - const targetChannelIndex = currentChannels.indexOf(targetChannel); - const targetChannelExistsWithinList = targetChannelIndex >= 0; - - const newChannels = [...currentChannels]; - - if (targetChannelExistsWithinList) { - newChannels.splice(targetChannelIndex, 1); - } - - const 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; - }); - }); - - return subscription.unsubscribe; - }, [client, considerPinnedChannels, lockChannelOrder, setChannels]); -}; diff --git a/src/components/ChannelList/hooks/useMessageNewListener.ts b/src/components/ChannelList/hooks/useMessageNewListener.ts index 5d5d65c68..548d5f22d 100644 --- a/src/components/ChannelList/hooks/useMessageNewListener.ts +++ b/src/components/ChannelList/hooks/useMessageNewListener.ts @@ -1,76 +1,41 @@ import { useEffect } from 'react'; -import type { Dispatch, SetStateAction } from 'react'; -import type { Channel, Event, ExtendableGenerics } from 'stream-chat'; +import uniqBy from 'lodash.uniqby'; -import { moveChannelUpwards } from '../utils'; -import { useChatContext } from '../../../context/ChatContext'; -import type { DefaultStreamChatGenerics } from '../../../types/types'; +import { moveChannelUp } from '../utils'; -export const isChannelPinned = ({ - channel, -}: { - channel?: Channel; -}) => { - if (!channel) return false; +import { useChatContext } from '../../../context/ChatContext'; - const member = channel.state.membership; +import type { Channel, Event } from 'stream-chat'; - return !!member?.pinned_at; -}; +import type { DefaultStreamChatGenerics } from '../../../types/types'; export const useMessageNewListener = < - SCG extends DefaultStreamChatGenerics = DefaultStreamChatGenerics + StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics >( - setChannels: Dispatch>>>, + setChannels: React.Dispatch>>>, customHandler?: ( - setChannels: Dispatch>>>, - event: Event, + setChannels: React.Dispatch>>>, + event: Event, ) => void, lockChannelOrder = false, allowNewMessagesFromUnfilteredChannels = true, - considerPinnedChannels = false, // automatically set to true by checking sorting options (must include {pinned_at: -1/1}) ) => { - const { client } = useChatContext('useMessageNewListener'); + const { client } = useChatContext('useMessageNewListener'); useEffect(() => { - const handleEvent = (event: Event) => { + const handleEvent = (event: Event) => { if (customHandler && typeof customHandler === 'function') { customHandler(setChannels, event); } else { setChannels((channels) => { - const targetChannelIndex = channels.findIndex((channel) => channel.cid === event.cid); - const targetChannelExistsWithinList = targetChannelIndex >= 0; - - const isTargetChannelPinned = isChannelPinned({ - channel: channels[targetChannelIndex], - }); + const channelInList = channels.filter((channel) => channel.cid === event.cid).length > 0; - if ( - // 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; + if (!channelInList && allowNewMessagesFromUnfilteredChannels && event.channel_type) { + const channel = client.channel(event.channel_type, event.channel_id); + return uniqBy([channel, ...channels], 'cid'); } - // we either have the channel to move or we pull it from the cache (or instantiate) if it's allowed - const channelToMove: Channel | null = - channels[targetChannelIndex] ?? - (allowNewMessagesFromUnfilteredChannels && event.channel_type - ? client.channel(event.channel_type, event.channel_id) - : null); - - if (channelToMove) { - return moveChannelUpwards({ - channels, - channelToMove, - channelToMoveIndexWithinChannels: targetChannelIndex, - considerPinnedChannels, - }); - } + if (!lockChannelOrder) return moveChannelUp({ channels, cid: event.cid || '' }); return channels; }); @@ -85,7 +50,6 @@ export const useMessageNewListener = < }, [ allowNewMessagesFromUnfilteredChannels, client, - considerPinnedChannels, customHandler, lockChannelOrder, setChannels, diff --git a/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts b/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts index b3b90bcf3..6fd242b7d 100644 --- a/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts +++ b/src/components/ChannelList/hooks/useNotificationMessageNewListener.ts @@ -9,7 +9,6 @@ import type { Channel, Event } from 'stream-chat'; import type { DefaultStreamChatGenerics } from '../../../types/types'; -// TODO: re-visit this and adjust (apply pinned channels) export const useNotificationMessageNewListener = < StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics >(