fix: Active channel url causes flicker of current channel on the channel list (#517)

### Description Of Changes

Issue 
* The activated channel flickers between the previous current channel
and a new channel after creating the new group channel
* Infinite loop
  * (1) `Creating a channel` causes the change of the channel list
  * (2) `useActiveChannelUrl` is triggered by the channel list change
* (3) `useActiveChannelUrl` set the current channel to the previous
channel

Fix
* Remove the channel list dependency from the `useEffect` of
useActiveChannelUrl to fix the current channel flickers on the channel
list

Author: HoonBaek

src/modules/App/MobileLayout.tsx

@@ -107,7 +107,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
           <div className='sb_mobile__panelwrap'>
             <Channel
               replyType={replyType}
-              channelUrl={currentChannel?.url}
+              channelUrl={currentChannel?.url || ''}
               onSearchClick={() => {
                 setPanel(PANELS.MESSAGE_SEARCH);
               }}
@@ -130,7 +130,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
         panel === PANELS?.CHANNEL_SETTINGS && (
           <div className='sb_mobile__panelwrap'>
             <ChannelSettings
-              channelUrl={currentChannel?.url}
+              channelUrl={currentChannel?.url || ''}
               onCloseClick={() => {
                 setPanel(PANELS.CHANNEL);
               }}
@@ -145,7 +145,7 @@ export const MobileLayout: React.FC<MobileLayoutProps> = (
         panel === PANELS?.MESSAGE_SEARCH && (
           <div className='sb_mobile__panelwrap'>
             <MessageSearch
-              channelUrl={currentChannel?.url}
+              channelUrl={currentChannel?.url || ''}
               onCloseClick={() => {
                 setPanel(PANELS.CHANNEL);
               }}

src/modules/App/index.jsx

@@ -79,15 +79,15 @@ export default function App(props) {
       replyType={replyType}
     >
       <AppLayout
-        currentChannel={currentChannel}
-        setCurrentChannel={setCurrentChannel}
         isReactionEnabled={isReactionEnabled}
         replyType={replyType}
         isMessageGroupingEnabled={isMessageGroupingEnabled}
         allowProfileEdit={allowProfileEdit}
         showSearchIcon={showSearchIcon}
         onProfileEditSuccess={onProfileEditSuccess}
         disableAutoSelect={disableAutoSelect}
+        currentChannel={currentChannel}
+        setCurrentChannel={setCurrentChannel}
       />
     </Sendbird>
   );

src/modules/App/types.ts

@@ -1,5 +1,5 @@
 import type { User } from '@sendbird/chat';
-import type { GroupChannel } from '@sendbird/chat/groupChannel';
+import { GroupChannel } from '@sendbird/chat/groupChannel';
 import type { FileMessage, UserMessage } from '@sendbird/chat/message';
 
 import type { Locale } from 'date-fns';
@@ -20,7 +20,7 @@ export interface AppLayoutProps {
   onProfileEditSuccess?(user: User): void;
   disableAutoSelect?: boolean;
   currentChannel?: GroupChannel;
-  setCurrentChannel?: React.Dispatch<GroupChannel>;
+  setCurrentChannel: React.Dispatch<GroupChannel>;
 }
 
 export interface MobileLayoutProps extends AppLayoutProps {

src/modules/ChannelList/context/ChannelListProvider.tsx

@@ -81,7 +81,7 @@ export interface ChannelListProviderProps {
   overrideInviteUser?(params: OverrideInviteUserType): void;
   onThemeChange?(theme: string): void;
   onProfileEditSuccess?(user: User): void;
-  onChannelSelect?(channel: GroupChannel): void;
+  onChannelSelect?(channel: GroupChannel | null): void;
   sortChannelList?: (channels: GroupChannel[]) => GroupChannel[];
   queries?: ChannelListQueries;
   children?: React.ReactElement;
@@ -104,7 +104,7 @@ export interface ChannelListProviderInterface extends ChannelListProviderProps {
   channelListQuery: GroupChannelListQuery;
   currentUserId: string;
   channelListDispatcher: CustomUseReducerDispatcher;
-  channelSource: GroupChannelListQuerySb;
+  channelSource: GroupChannelListQuerySb | null;
 }
 
 interface ChannelListStoreInterface {
@@ -188,12 +188,12 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
     channelListReducers,
     channelListInitialState,
   ) as [ChannelListStoreInterface, CustomUseReducerDispatcher];
-  const { loading, currentChannel } = channelListStore;
+  const { currentChannel } = channelListStore;
 
-  const [channelSource, setChannelSource] = useState<GroupChannelListQuerySb>();
+  const [channelSource, setChannelSource] = useState<GroupChannelListQuerySb | null>(null);
   const [typingChannels, setTypingChannels] = useState<Array<GroupChannel>>([]);
 
-  const [channelsTomarkAsRead, setChannelsToMarkAsRead] = useState([]);
+  const [channelsTomarkAsRead, setChannelsToMarkAsRead] = useState<Array<GroupChannel>>([]);
   useEffect(() => {
     // https://stackoverflow.com/a/60907638
     let isMounted = true;
@@ -378,7 +378,6 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
       overrideInviteUser,
       onChannelSelect,
       sortChannelList,
-      loading,
       allowProfileEdit: enableEditProfile,
       channelListDispatcher,
       channelSource,

src/modules/ChannelList/context/hooks/useActiveChannelUrl.ts

@@ -25,7 +25,7 @@ function useActiveChannelUrl({
   return useEffect(() => {
     if (activeChannelUrl) {
       logger.info('ChannelListProvider: looking for active channel', { activeChannelUrl });
-      const activeChannel = channels.find(channel => channel.url === activeChannelUrl);
+      const activeChannel = channels?.find(channel => channel.url === activeChannelUrl);
       if (activeChannel) {
         channelListDispatcher({
           type: messageActionTypes.SET_CURRENT_CHANNEL,
@@ -49,7 +49,7 @@ function useActiveChannelUrl({
           });
       }
     }
-  }, [activeChannelUrl, channels, sdk]);
+  }, [activeChannelUrl]);
 }
 
 export default useActiveChannelUrl;