Merge pull request #1078 from GetStream/customActiveChannel-fix

Custom active channel fix

Author: DanC5

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Feature
 
 - Add the ability to open/close list of available commands on click [#1072](https://github.com/GetStream/stream-chat-react/pull/1072)
+- Add the ability to set custom active channel on mount even if it's not returned in the initial `queryChannels` response [#1078](https://github.com/GetStream/stream-chat-react/pull/1078)
 
 ### Chore
 

src/components/ChannelList/ChannelList.tsx

@@ -207,32 +207,38 @@ const UnMemoizedChannelList = <
    * Set a channel with id {customActiveChannel} as active and move it to the top of the list.
    * If customActiveChannel prop is absent, then set the first channel in list as active channel.
    */
-  const activeChannelHandler = (
+  const activeChannelHandler = async (
     channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>,
     setChannels: React.Dispatch<React.SetStateAction<Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>>>,
   ) => {
-    if (
-      !channels ||
-      channels.length === 0 ||
-      channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)
-    ) {
+    if (channels.length === 0 || channels.length > (options?.limit || MAX_QUERY_CHANNELS_LIMIT)) {
       return;
     }
 
     if (customActiveChannel) {
-      const customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
+      let customActiveChannelObject = channels.find((chan) => chan.id === customActiveChannel);
+
+      if (!customActiveChannelObject) {
+        //@ts-expect-error
+        [customActiveChannelObject] = await client.queryChannels({ id: customActiveChannel });
+      }
+
       if (customActiveChannelObject) {
-        if (setActiveChannel) {
-          setActiveChannel(customActiveChannelObject, watchers);
-        }
-        const newChannels = moveChannelUp(customActiveChannelObject.cid, channels);
+        setActiveChannel(customActiveChannelObject, watchers);
+
+        const newChannels = moveChannelUp({
+          activeChannel: customActiveChannelObject,
+          channels,
+          cid: customActiveChannelObject.cid,
+        });
+
         setChannels(newChannels);
       }
 
       return;
     }
 
-    if (setActiveChannelOnMount && setActiveChannel) {
+    if (setActiveChannelOnMount) {
       setActiveChannel(channels[0], watchers);
     }
   };

src/components/ChannelList/hooks/useMessageNewListener.ts

@@ -42,7 +42,7 @@ export const useMessageNewListener = <
           return uniqBy([channel, ...channels], 'cid');
         }
 
-        if (!lockChannelOrder) return moveChannelUp(event.cid || '', channels);
+        if (!lockChannelOrder) return moveChannelUp({ channels, cid: event.cid || '' });
 
         return channels;
       });

src/components/ChannelList/utils.ts

@@ -1,4 +1,5 @@
 import type { Channel, StreamChat } from 'stream-chat';
+import uniqBy from 'lodash.uniqby';
 
 import type {
   DefaultAttachmentType,
@@ -30,6 +31,20 @@ export const getChannel = async <
 
 export const MAX_QUERY_CHANNELS_LIMIT = 30;
 
+type MoveChannelUpParams<
+  At extends DefaultAttachmentType = DefaultAttachmentType,
+  Ch extends DefaultChannelType = DefaultChannelType,
+  Co extends DefaultCommandType = DefaultCommandType,
+  Ev extends DefaultEventType = DefaultEventType,
+  Me extends DefaultMessageType = DefaultMessageType,
+  Re extends DefaultReactionType = DefaultReactionType,
+  Us extends DefaultUserType<Us> = DefaultUserType
+> = {
+  channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>;
+  cid: string;
+  activeChannel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
+};
+
 export const moveChannelUp = <
   At extends DefaultAttachmentType = DefaultAttachmentType,
   Ch extends DefaultChannelType = DefaultChannelType,
@@ -38,22 +53,18 @@ export const moveChannelUp = <
   Me extends DefaultMessageType = DefaultMessageType,
   Re extends DefaultReactionType = DefaultReactionType,
   Us extends DefaultUserType<Us> = DefaultUserType
->(
-  cid: string,
-  channels: Array<Channel<At, Ch, Co, Ev, Me, Re, Us>>,
-) => {
-  // get channel index
+>({
+  activeChannel,
+  channels,
+  cid,
+}: MoveChannelUpParams<At, Ch, Co, Ev, Me, Re, Us>) => {
+  // get index of channel to move up
   const channelIndex = channels.findIndex((channel) => channel.cid === cid);
 
-  if (channelIndex <= 0) return channels;
-
-  // get channel from channels
-  const channel = channels[channelIndex];
+  if (!activeChannel && channelIndex <= 0) return channels;
 
-  // remove channel from current position
-  channels.splice(channelIndex, 1);
-  // add channel at the start
-  channels.unshift(channel);
+  // get channel to move up
+  const channel = activeChannel || channels[channelIndex];
 
-  return [...channels];
+  return uniqBy([channel, ...channels], 'cid');
 };