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

Author: isekovanic

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,24 @@ 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,
+                  channelToMoveIndexWithinChannels: -1,
+                  sort,
+                })
+              : channels,
+          );
         }
       }
     };