fix: channel.visible not taking sort and pinned channels into account (#2925)

* fix: channel.visible not taking sort and pinned channels into account

* fix: notification.message_new not respecting pinning as well

* fix: broken test

* chore: remove console.log

* fix: duplicate channels on many notification events

Author: isekovanic

package/src/__tests__/offline-support/offline-feature.js

@@ -381,9 +381,8 @@ export const Generic = () => {
       channels.push(newChannel);
       useMockedApis(chatClient, [getOrCreateChannelApi(newChannel)]);
 
+      await act(() => dispatchNotificationMessageNewEvent(chatClient, newChannel.channel));
       await waitFor(() => {
-        act(() => dispatchNotificationMessageNewEvent(chatClient, newChannel.channel));
-
         const channelIdsOnUI = screen
           .queryAllByLabelText('list-item')
           .map((node) => node._fiber.pendingProps.testID);

package/src/components/ChannelList/ChannelList.tsx

@@ -349,6 +349,7 @@ export const ChannelList = <
 
   useChannelVisible({
     onChannelVisible,
+    options: { sort },
     setChannels,
   });
 

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

@@ -1,27 +1,31 @@
 import { useEffect } from 'react';
 
-import uniqBy from 'lodash/uniqBy';
-
 import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 
-import type { DefaultStreamChatGenerics } from '../../../../types/types';
-import { getChannel } from '../../utils';
+import type {
+  ChannelListEventListenerOptions,
+  DefaultStreamChatGenerics,
+} from '../../../../types/types';
+import { getChannel, moveChannelUp } from '../../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
     onChannelVisible?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
+      options?: ChannelListEventListenerOptions<StreamChatGenerics>,
     ) => void;
+    options?: ChannelListEventListenerOptions<StreamChatGenerics>;
   };
 
 export const useChannelVisible = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
   onChannelVisible,
+  options,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
@@ -31,13 +35,23 @@ export const useChannelVisible = <
       if (typeof onChannelVisible === 'function') {
         onChannelVisible(setChannels, event);
       } 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));
+          setChannels((channels) =>
+            channels
+              ? moveChannelUp({
+                  channels,
+                  channelToMove: channel,
+                  sort,
+                })
+              : channels,
+          );
         }
       }
     };

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

@@ -1,7 +1,5 @@
 import { useEffect } from 'react';
 
-import uniqBy from 'lodash/uniqBy';
-
 import type { Channel, Event } from 'stream-chat';
 
 import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
@@ -10,7 +8,7 @@ import type {
   ChannelListEventListenerOptions,
   DefaultStreamChatGenerics,
 } from '../../../../types/types';
-import { getChannel } from '../../utils';
+import { getChannel, moveChannelUp } from '../../utils';
 import { isChannelArchived } from '../utils';
 
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
@@ -39,7 +37,7 @@ export const useNewMessageNotification = <
         onNewMessageNotification(setChannels, event, options);
       } else {
         if (!options) return;
-        const { filters } = options;
+        const { filters, sort } = options;
         if (event.channel?.id && event.channel?.type) {
           const channel = await getChannel({
             client,
@@ -53,7 +51,15 @@ export const useNewMessageNotification = <
             return;
           }
 
-          setChannels((channels) => (channels ? uniqBy([channel, ...channels], 'cid') : channels));
+          setChannels((channels) =>
+            channels
+              ? moveChannelUp({
+                  channels,
+                  channelToMove: channel,
+                  sort,
+                })
+              : channels,
+          );
         }
       }
     };