fix: Stay in OpenChannel when it's properties change (#284)

* Do not exit the current channel in every time when the currentOpenChannel is changed
* Exit from the previous open channel when fetching a new open channel

Author: HoonBaek

src/smart-components/OpenChannel/context/OpenChannelProvider.tsx

@@ -154,7 +154,7 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
 
   // use hooks
   useSetChannel(
-    { channelUrl, sdkInit, fetchingParticipants, userId },
+    { channelUrl, sdkInit, fetchingParticipants, userId, currentOpenChannel },
     { sdk, logger, messagesDispatcher },
   );
 
@@ -270,16 +270,6 @@ const OpenChannelProvider: React.FC<OpenChannelProviderProps> = (props: OpenChan
     };
   }, [channelUrl, sdkInit]);
 
-  // Exit channel when unmount
-  useEffect(() => () => {
-    if (currentOpenChannel && currentOpenChannel.exit) {
-      currentOpenChannel.exit()
-        .then(() => {
-          logger.info('OpenChannel | useSetChannel: Succeeded to exit channel');
-        });
-    }
-  }, [currentOpenChannel]);
-
   return (
     <OpenChannelContext.Provider value={{
       // props

src/smart-components/OpenChannel/context/dux/actionTypes.ts

@@ -1,6 +1,7 @@
 export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL';
 export const SET_CHANNEL_INVALID = 'SET_CHANNEL_INVALID';
 export const RESET_MESSAGES = 'RESET_MESSAGES';
+export const EXIT_CURRENT_CHANNEL = 'EXIT_CURRENT_CHANNEL';
 export const GET_PREV_MESSAGES_START = 'GET_PREV_MESSAGES_START';
 export const GET_PREV_MESSAGES_SUCESS = 'GET_PREV_MESSAGES_SUCESS';
 export const GET_PREV_MESSAGES_FAIL = 'GET_PREV_MESSAGES_FAIL';

src/smart-components/OpenChannel/context/dux/reducers.ts

@@ -22,7 +22,15 @@ export default function reducer(
         allMessages: [],
       };
     }
-
+    case actionTypes.EXIT_CURRENT_CHANNEL: {
+      if (action.payload?.url === state.currentOpenChannel?.url) {
+        return {
+          ...state,
+          currentOpenChannel: null,
+        };
+      }
+      return state;
+    }
     case actionTypes.SET_CURRENT_CHANNEL: {
       const gottenChannel = action.payload;
       const operators = gottenChannel.operators;

src/smart-components/OpenChannel/context/hooks/useSetChannel.ts

@@ -1,4 +1,4 @@
-import type { SendbirdOpenChat } from '@sendbird/chat/openChannel';
+import type { OpenChannel, SendbirdOpenChat } from '@sendbird/chat/openChannel';
 import { useEffect } from 'react';
 import type { Logger } from '../../../../lib/SendbirdState';
 import * as messageActionTypes from '../dux/actionTypes';
@@ -9,22 +9,32 @@ interface DynamicParams {
   sdkInit: boolean;
   fetchingParticipants: boolean;
   userId: string;
+  currentOpenChannel: OpenChannel;
 }
 interface StaticParams {
   sdk: SendbirdOpenChat;
   logger: Logger;
-  messagesDispatcher: ({ type: string, payload: any }) => void;
+  messagesDispatcher: ({ type, payload }: { type: string, payload: any }) => void;
 }
 
 function useSetChannel(
-  { channelUrl, sdkInit, fetchingParticipants, userId }: DynamicParams,
+  { channelUrl, sdkInit, fetchingParticipants, userId, currentOpenChannel }: DynamicParams,
   { sdk, logger, messagesDispatcher }: StaticParams,
 ): void {
   useEffect(() => {
     if (channelUrl && sdkInit && sdk?.openChannel) {
-      logger.info('OpenChannel | useSetChannel fetching channel', channelUrl);
+      if (currentOpenChannel && currentOpenChannel?.exit) {
+        currentOpenChannel.exit?.().then(() => {
+          logger.info('OpenChannel | useSetChannel: Exit from the previous open channel', currentOpenChannel?.url);
+          messagesDispatcher({
+            type: messageActionTypes.EXIT_CURRENT_CHANNEL,
+            payload: currentOpenChannel,
+          });
+        });
+      }
+      logger.info('OpenChannel | useSetChannel: Fetching channel', channelUrl);
       sdk.openChannel.getChannel(channelUrl).then((openChannel) => {
-        logger.info('OpenChannel | useSetChannel fetched channel', openChannel);
+        logger.info('OpenChannel | useSetChannel: Succeeded to fetch channel', openChannel);
         messagesDispatcher({
           type: messageActionTypes.SET_CURRENT_CHANNEL,
           payload: openChannel,
@@ -93,14 +103,14 @@ function useSetChannel(
             );
           }
         }).catch((error) => {
-          logger.warning('OpenChannel | useSetChannel enter channel failed', { channelUrl, error });
+          logger.warning('OpenChannel | useSetChannel: Failed to enter channel', { channelUrl, error });
           messagesDispatcher({
             type: messageActionTypes.SET_CHANNEL_INVALID,
             payload: null,
           });
         });
       }).catch((error) => {
-        logger.warning('OpenChannel | useSetChannel fetching channel failed', { channelUrl, error });
+        logger.warning('OpenChannel | useSetChannel: Failed to fetch channel', { channelUrl, error });
         messagesDispatcher({
           type: messageActionTypes.SET_CHANNEL_INVALID,
           payload: null,

src/smart-components/OpenChannelSettings/context/OpenChannelSettingsProvider.tsx

@@ -45,6 +45,7 @@ const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (
   // fetch store from <SendbirdProvider />
   const globalStore = useSendbirdStateContext();
   const sdk = globalStore?.stores?.sdkStore?.sdk as SendbirdOpenChat;
+  const isSDKInitialized = globalStore?.stores?.sdkStore?.initialized;
 
   const logger = globalStore?.config?.logger;
   const currentUserId = sdk?.currentUser?.userId;
@@ -63,7 +64,7 @@ const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (
         channel.enter()
           .then(() => {
             setChannel(channel);
-            logger.info('OpenChannelSettings | Succeeded to enter channel');
+            logger.info('OpenChannelSettings | Succeeded to enter channel', channel?.url);
           })
           .catch((error) => {
             setChannel(null);
@@ -78,14 +79,14 @@ const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (
       if (currentChannel && currentChannel.exit) {
         currentChannel.exit()
           .then(() => {
-            logger.info('OpenChannelSettings | Succeeded to exit channel');
+            logger.info('OpenChannelSettings | Succeeded to exit channel', currentChannel?.url);
           })
           .catch((error) => {
             logger.warning('OpenChannelSettings | Failed to exit channel', error);
           });
       }
     }
-  }, [channelUrl, sdk]);
+  }, [channelUrl, isSDKInitialized]);
 
   useEffect(() => {
     const channelHandlerId = uuidv4();
@@ -135,7 +136,7 @@ const OpenChannelSettingsProvider: React.FC<OpenChannelSettingsContextProps> = (
         sdk.openChannel.removeOpenChannelHandler?.(channelHandlerId);
       }
     }
-  }, [currentChannel]);
+  }, [channelUrl]);
 
   return (
     <OpenChannelSettingsContext.Provider value={{