fix: Close delete channel modal after successful deletion in DeleteOpenChannel

Author: OnestarLee

src/modules/OpenChannelApp/index.tsx

@@ -51,6 +51,10 @@ export default function OpenChannelApp({
               onCloseClick={() => {
                 setShowSettings(false);
               }}
+              onDeleteChannel={() => {
+                setShowSettings(false);
+                setChannelUrl(undefined);
+              }}
             />
           </div>
         )}

src/modules/OpenChannelList/context/OpenChannelListProvider.tsx

@@ -1,6 +1,8 @@
 import React, { useContext, useReducer, useEffect } from 'react';
+import { OpenChannelHandler } from '@sendbird/chat/openChannel';
 
 import pubSubTopics from '../../../lib/pubSub/topics';
+import uuidv4 from '../../../utils/uuid';
 
 import openChannelListReducer from './dux/reducer';
 import openChannelListInitialState, { OpenChannelListInitialInterface } from './dux/initialState';
@@ -77,6 +79,29 @@ export const OpenChannelListProvider: React.FC<OpenChannelListProviderProps> = (
     };
   }, [sdkInitialized, pubSub?.subscribe]);
 
+  // Channel event handler for deletion
+  useEffect(() => {
+    const channelHandlerId = uuidv4();
+    if (sdkInitialized && sdk?.openChannel?.addOpenChannelHandler) {
+      const channelHandler = new OpenChannelHandler({
+        onChannelDeleted: (channelUrl) => {
+          logger.info('OpenChannelList: onChannelDeleted', channelUrl);
+          openChannelListDispatcher({
+            type: OpenChannelListActionTypes.DELETE_OPEN_CHANNEL,
+            payload: channelUrl,
+          });
+        },
+      });
+      sdk.openChannel.addOpenChannelHandler(channelHandlerId, channelHandler);
+      logger.info('OpenChannelList: Added channel handler', channelHandlerId);
+    }
+    return () => {
+      if (sdk?.openChannel?.removeOpenChannelHandler) {
+        sdk.openChannel.removeOpenChannelHandler(channelHandlerId);
+      }
+    };
+  }, [sdkInitialized]);
+
   // Fetch next channels by scroll event
   const fetchNextChannels = useFetchNextCallback({
     sdkInitialized: sdkInitialized,

src/modules/OpenChannelList/context/dux/actionTypes.ts

@@ -11,6 +11,7 @@ enum OpenChannelListActionTypes {
   SET_CURRENT_OPEN_CHANNEL = 'SET_CURRENT_OPEN_CHANNEL',
   UPDATE_OPEN_CHANNEL_LIST_QUERY = 'UPDATE_OPEN_CHANNEL_LIST_QUERY',
   UPDATE_OPEN_CHANNEL = 'UPDATE_OPEN_CHANNEL',
+  DELETE_OPEN_CHANNEL = 'DELETE_OPEN_CHANNEL',
 }
 
 export default OpenChannelListActionTypes;

src/modules/OpenChannelList/context/dux/reducer.ts

@@ -79,6 +79,15 @@ export default function reducer(
           : action.payload,
       };
     }
+    case actionTypes.DELETE_OPEN_CHANNEL: {
+      const channelUrl = action.payload;
+      const updatedChannels = state.allChannels.filter((channel) => channel?.url !== channelUrl);
+      return {
+        ...state,
+        allChannels: updatedChannels,
+        currentChannel: state.currentChannel?.url === channelUrl ? null : state.currentChannel,
+      };
+    }
     default: {
       return state;
     }

src/modules/OpenChannelSettings/components/OperatorUI/DeleteOpenChannel.tsx

@@ -21,6 +21,7 @@ export default function DeleteChannel(): ReactElement {
   const deleteChannel = () => {
     channel?.delete().then((response) => {
       logger.info('OpenChannelSettings: Delete channel success', response);
+      setShowDeleteChannelModal(false);
       if (onDeleteChannel) {
         onDeleteChannel(channel);
       }
@@ -68,7 +69,7 @@ export default function DeleteChannel(): ReactElement {
         showDeleteChannelModal && (
           <Modal
             isFullScreenOnMobile
-            onCancel={() => {
+            onClose={() => {
               setShowDeleteChannelModal(false);
             }}
             onSubmit={() => {