feat: add prop activeChannelUrl to ChannelList (#407)

Add prop: activeChannelUrl 

activeChannelUrl gives customer an option to pragmatically set a channel from a parent component/ router

If channel is present in client side, it is used
If not present in client side, channel is fetched from backend and added to end of the list and set as selected
If not present, no errors will be thrown

If user clicks other channel, the item set from outside is removed and clicked channel will be selected 

If activeChannelUrl is present, ChannelList behaves similar to "disableAutoSelect" is true

example
```
const MyChat = () => {
  const {my_active_channel} = useRouter();
  return (
    <ChannelList activeChannelUrl={my_active_channel} />
  );
```
fixes: https://sendbird.atlassian.net/browse/UIKIT-3180

Author: Sravan S

scripts/index_d_ts

@@ -332,6 +332,7 @@ declare module "SendbirdUIKitGlobal" {
     renderUserProfile?: (props: RenderUserProfileProps) => React.ReactNode | React.ReactElement;
     disableUserProfile?: boolean;
     disableAutoSelect?: boolean;
+    activeChannelUrl?: string;
     isTypingIndicatorEnabled?: boolean;
     isMessageReceiptStatusEnabled?: boolean;
   }

src/smart-components/ChannelList/context/ChannelListProvider.tsx

@@ -33,6 +33,7 @@ import { CustomUseReducerDispatcher } from '../../../lib/SendbirdState';
 import channelListReducers from '../dux/reducers';
 import channelListInitialState from '../dux/initialState';
 import { CHANNEL_TYPE } from '../../CreateChannel/types';
+import useActiveChannelUrl from './hooks/useActiveChannelUrl';
 
 interface ApplicationUserListQuery {
   limit?: number;
@@ -88,6 +89,7 @@ export interface ChannelListProviderProps {
   renderUserProfile?: (props: RenderUserProfileProps) => React.ReactElement;
   disableUserProfile?: boolean;
   disableAutoSelect?: boolean;
+  activeChannelUrl?: string;
   typingChannels?: Array<GroupChannel>;
   isTypingIndicatorEnabled?: boolean;
   isMessageReceiptStatusEnabled?: boolean;
@@ -150,10 +152,13 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     onBeforeCreateChannel,
     sortChannelList,
     overrideInviteUser,
-    disableAutoSelect,
+    activeChannelUrl,
     isTypingIndicatorEnabled = null,
     isMessageReceiptStatusEnabled = null,
   } = props;
+  // disable autoselect, if activeChannelUrl is provided
+  // useActiveChannelUrl should be executed when activeChannelUrl is present
+  const disableAutoSelect = props?.disableAutoSelect || !!activeChannelUrl;
   const onChannelSelect = props?.onChannelSelect || noop;
   // fetch store from <SendbirdProvider />
   const globalStore = useSendbirdStateContext();
@@ -350,6 +355,16 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     });
   }, [currentChannel?.url]);
 
+  // Set active channel (by url)
+  useActiveChannelUrl({
+    activeChannelUrl,
+    channels: sortedChannels,
+    sdk,
+  } , {
+    logger,
+    channelListDispatcher,
+  });
+
   return (
     <ChannelListContext.Provider value={{
       className,

src/smart-components/ChannelList/context/hooks/useActiveChannelUrl.ts

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import * as messageActionTypes from '../../dux/actionTypes';
+import { GroupChannel, SendbirdGroupChat } from '@sendbird/chat/groupChannel';
+import { Logger } from '../../../../lib/SendbirdState';
+
+export type DynamicProps = {
+  activeChannelUrl?: string;
+  channels?: GroupChannel[];
+  sdk?: SendbirdGroupChat;
+};
+
+export type StaticProps = {
+  logger: Logger;
+  channelListDispatcher: React.Dispatch<any>;
+};
+
+function useActiveChannelUrl({
+  activeChannelUrl,
+  channels,
+  sdk
+}: DynamicProps, {
+  logger,
+  channelListDispatcher
+}: StaticProps): void {
+  return useEffect(() => {
+    if (activeChannelUrl) {
+      logger.info('ChannelListProvider: looking for active channel', { activeChannelUrl });
+      const activeChannel = channels.find(channel => channel.url === activeChannelUrl);
+      if (activeChannel) {
+        channelListDispatcher({
+          type: messageActionTypes.SET_CURRENT_CHANNEL,
+          payload: activeChannel,
+        });
+      } else {
+        logger.info('ChannelListProvider: searching backend for active channel', { activeChannelUrl });
+        sdk?.groupChannel?.getChannel(activeChannelUrl)
+          .then((channel) => {
+            channelListDispatcher({
+              type: messageActionTypes.FETCH_CHANNELS_SUCCESS,
+              payload: [channel],
+            });
+            channelListDispatcher({
+              type: messageActionTypes.SET_CURRENT_CHANNEL,
+              payload: channel,
+            });
+          })
+          .catch(() => {
+            logger.warning('ChannelListProvider: Active channel not found');
+          });
+      }
+    }
+  }, [activeChannelUrl, channels, sdk]);
+}
+
+export default useActiveChannelUrl;

src/smart-components/ChannelList/index.tsx

@@ -22,6 +22,7 @@ const ChannelList: React.FC<ChannelListProps> = (props: ChannelListProps) => {
       sortChannelList={props?.sortChannelList}
       queries={props?.queries}
       disableAutoSelect={props?.disableAutoSelect}
+      activeChannelUrl={props?.activeChannelUrl}
       isTypingIndicatorEnabled={props?.isTypingIndicatorEnabled}
       isMessageReceiptStatusEnabled={props?.isMessageReceiptStatusEnabled}
     >

src/smart-components/ChannelList/stories/index.stories.js

@@ -204,3 +204,47 @@ export const QueryParamsForChannelList = () => {
     </Sendbird>
   );
 };
+
+export const preSelectedChannel = () => {
+  const defaultChannel = 'sendbird_group_channel_199019523_b6febec0ad887b774dbe374e7a907841a9d2a61b';
+  const defaultQuery = {
+    channelListQuery: {
+      limit: 20,
+    },
+  };
+  const [activeChannelUrl, setActiveChannelUrl] = useState(defaultChannel);
+  const [queries, setQueries] = useState(defaultQuery);
+  return (
+    <Sendbird
+      appId={appId}
+      userId={userId}
+    >
+      <div>
+        <button
+          onClick={() => {
+            setQueries(defaultQuery)
+            setActiveChannelUrl('random_url');
+          }}
+        >Set invalid URL </button>
+        <button
+          onClick={() => {
+            setQueries({
+              channelListQuery: {
+                limit: 2,
+              }
+            });
+            setActiveChannelUrl(defaultChannel);
+          }}
+        >Set channel outside list </button>
+      </div>
+      <div style={{ height: '520px' }}>
+        <ChannelList
+          queries={queries}
+          onChannelSelect={(c) => { console.warn(c); }}
+          activeChannelUrl={activeChannelUrl}
+        />
+      </div>
+
+    </Sendbird>
+  );
+};