@sendbird/uikit-chat-hooks 2.3.0 → 2.4.0

package/lib/typescript/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { SendbirdChatSDK, SendbirdError, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdGroupChannel, SendbirdGroupChannelCollection, SendbirdGroupChannelListQuery, SendbirdMessage, SendbirdMessageCollection, SendbirdPreviousMessageListQuery, SendbirdUserMessage, SendbirdUserMessageCreateParams, UserStruct } from '@sendbird/uikit-utils';
+import type { SendbirdChatSDK, SendbirdError, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdFileMessageUpdateParams, SendbirdGroupChannel, SendbirdGroupChannelCollection, SendbirdGroupChannelListQuery, SendbirdMessage, SendbirdMessageCollection, SendbirdOpenChannel, SendbirdOpenChannelListQuery, SendbirdPreviousMessageListQuery, SendbirdUserMessage, SendbirdUserMessageCreateParams, SendbirdUserMessageUpdateParams, UserStruct } from '@sendbird/uikit-utils';
 export interface CustomQueryInterface<Data> {
     isLoading: boolean;
     next: () => Promise<Data[]>;
@@ -119,14 +119,14 @@ export interface UseGroupChannelMessages {
          * @param params file message params
          * @return updated message
          * */
-        updateFileMessage: (messageId: number, params: SendbirdFileMessageCreateParams) => Promise<SendbirdFileMessage>;
+        updateFileMessage: (messageId: number, params: SendbirdFileMessageUpdateParams) => Promise<SendbirdFileMessage>;
         /**
          * Update user message
          * @param messageId
          * @param params user message params
          * @return updated message
          * */
-        updateUserMessage: (messageId: number, params: SendbirdUserMessageCreateParams) => Promise<SendbirdUserMessage>;
+        updateUserMessage: (messageId: number, params: SendbirdUserMessageUpdateParams) => Promise<SendbirdUserMessage>;
         /**
          * Resend failed message
          * @param failedMessage failed message to resend
@@ -148,6 +148,144 @@ export type UseGroupChannelMessagesOptions = {
     enableCollectionWithoutLocalCache?: boolean;
     onChannelDeleted?: () => void;
 };
+/**
+ * @interface UseOpenChannelList
+ * @description interface for open channel list hook
+ * */
+export interface UseOpenChannelList {
+    (sdk: SendbirdChatSDK, userId?: string, options?: UseOpenChannelListOptions): {
+        /**
+         * Loading state, only available on first render
+         * */
+        loading: boolean;
+        /**
+         * Refreshing state, status is changes when the refresh is called.
+         * */
+        refreshing: boolean;
+        /**
+         * Refresh, clear and reload messages from latest
+         * @return {Promise<void>}
+         * */
+        refresh: () => Promise<void>;
+        /**
+         * Error state
+         * */
+        error: unknown | null;
+        /**
+         * Get open channels state
+         * */
+        openChannels: SendbirdOpenChannel[];
+        /**
+         * Fetch next channels to state
+         * @return {Promise<void>}
+         * */
+        next: () => Promise<void>;
+    };
+}
+export type UseOpenChannelListOptions = {
+    queryCreator?: () => SendbirdOpenChannelListQuery;
+};
+/**
+ * @interface UseOpenChannelMessages
+ * @description interface for open channel messages hook
+ * - Receive new messages from other users -> append to state(nextMessages)
+ * - onTopReached -> prev() -> fetch prev messages and append to state(messages)
+ * - onBottomReached -> next() -> nextMessages append to state(messages)
+ * */
+export interface UseOpenChannelMessages {
+    (sdk: SendbirdChatSDK, channel: SendbirdOpenChannel, userId?: string, options?: UseOpenChannelMessagesOptions): {
+        /**
+         * Loading state, only available on first render
+         * */
+        loading: boolean;
+        /**
+         * Refreshing state, status is changes when the refresh is called.
+         * */
+        refreshing: boolean;
+        /**
+         * Refresh, clear and reload messages from latest
+         * @return {Promise<void>}
+         * */
+        refresh: () => Promise<void>;
+        /**
+         * Get messages, this state is for render
+         * For example, if a user receives a new messages while searching for an old message
+         * for this case, new messages will be included here.
+         * @return {SendbirdMessage[]}
+         * */
+        messages: SendbirdMessage[];
+        /**
+         * Fetch prev messages to state
+         * @return {Promise<void>}
+         * */
+        prev: () => Promise<void>;
+        /**
+         * Get messages, this state is for temporary data before render
+         * For example, if a user receives a new messages while searching for an old message
+         * for this case, new messages will be included here.
+         * */
+        nextMessages: SendbirdMessage[];
+        /**
+         * Get new messages from nextMessages
+         * A new message means a message that meets the below conditions
+         * - Not admin message
+         * - Not updated message
+         * - Not current user's message
+         * */
+        newMessagesFromMembers: SendbirdMessage[];
+        /**
+         * Fetch next messages to state
+         * @return {Promise<void>}
+         * */
+        next: () => Promise<void>;
+        /**
+         * Send file message
+         * @param params file message params
+         * @param callback sent message callback
+         * @return pending message
+         * */
+        sendFileMessage: (params: SendbirdFileMessageCreateParams, onPending?: (message: SendbirdFileMessage, error?: SendbirdError) => void) => Promise<SendbirdFileMessage>;
+        /**
+         * Send user message
+         * @param params user message params
+         * @param callback sent message callback
+         * @return pending message
+         * */
+        sendUserMessage: (params: SendbirdUserMessageCreateParams, onPending?: (message: SendbirdUserMessage, error?: SendbirdError) => void) => Promise<SendbirdUserMessage>;
+        /**
+         * Update file message
+         * @param messageId
+         * @param params file message params
+         * @return updated message
+         * */
+        updateFileMessage: (messageId: number, params: SendbirdFileMessageUpdateParams) => Promise<SendbirdFileMessage>;
+        /**
+         * Update user message
+         * @param messageId
+         * @param params user message params
+         * @return updated message
+         * */
+        updateUserMessage: (messageId: number, params: SendbirdUserMessageUpdateParams) => Promise<SendbirdUserMessage>;
+        /**
+         * Resend failed message
+         * @param failedMessage failed message to resend
+         * @return {Promise<void>}
+         * */
+        resendMessage: (failedMessage: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+        /**
+         * Delete message
+         * @param message sent or failed message
+         * @return {Promise<void>}
+         * */
+        deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+    };
+}
+export type UseOpenChannelMessagesOptions = {
+    sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;
+    queryCreator?: () => SendbirdPreviousMessageListQuery;
+    onChannelDeleted?: () => void;
+    onError?: (error?: unknown) => void;
+};
 /**
  * @interface UseUserListReturn
  * @description interface for user list hook return value

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-chat-hooks",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React hooks that built with SendbirdChat SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,7 +38,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.3.0"
+    "@sendbird/uikit-utils": "2.4.0"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -47,7 +47,7 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.0.13",
+    "@sendbird/chat": "^4.3.0",
     "react": ">=16.13.1"
   },
   "react-native-builder-bob": {
@@ -69,5 +69,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-chat-hooks"
   },
-  "gitHead": "a9bf41fd7919436db99f6cc3bacd0f8d791b7729"
+  "gitHead": "05ec076e3a2433089586870c9a7e7bf7639b06be"
 }

package/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts

@@ -2,15 +2,13 @@ import { useEffect, useRef } from 'react';
 
 import { GroupChannelEventSource, GroupChannelFilter, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
 import type { SendbirdBaseChannel, SendbirdChatSDK, SendbirdGroupChannelCollection } from '@sendbird/uikit-utils';
-import { confirmAndMarkAsDelivered, useAsyncEffect, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useAsyncEffect, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelList, UseGroupChannelListOptions } from '../../types';
 import { useGroupChannelListReducer } from './reducer';
 
-const HOOK_NAME = 'useGroupChannelListWithCollection';
-
 const createGroupChannelListCollection = (
   sdk: SendbirdChatSDK,
   collectionCreator: UseGroupChannelListOptions['collectionCreator'],
@@ -29,7 +27,7 @@ const createGroupChannelListCollection = (
 };
 
 export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, userId, options) => {
-  const id = useUniqId(HOOK_NAME);
+  const handlerId = useUniqHandlerId('useGroupChannelListWithCollection');
   const { deliveryReceiptEnabled } = useAppFeatures(sdk);
 
   const collectionRef = useRef<SendbirdGroupChannelCollection>();
@@ -94,7 +92,7 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
     updateLoading(false);
   }, [init, userId]);
 
-  useChannelHandler(sdk, `${HOOK_NAME}_${id}`, {
+  useChannelHandler(sdk, handlerId, {
     onUserBanned: (channel, user) => {
       const isMe = user.userId === userId;
       if (isMe) deleteChannels([channel.url]);

package/src/channel/useGroupChannelList/useGroupChannelListWithQuery.ts

@@ -2,15 +2,13 @@ import { useRef } from 'react';
 
 import { GroupChannelListOrder } from '@sendbird/chat/groupChannel';
 import type { SendbirdChannel, SendbirdChatSDK, SendbirdGroupChannelListQuery } from '@sendbird/uikit-utils';
-import { confirmAndMarkAsDelivered, useAsyncEffect, useFreshCallback } from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useAsyncEffect, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelList, UseGroupChannelListOptions } from '../../types';
 import { useGroupChannelListReducer } from './reducer';
 
-const HOOK_NAME = 'useGroupChannelListWithQuery';
-
 const createGroupChannelListQuery = (
   sdk: SendbirdChatSDK,
   queryCreator: UseGroupChannelListOptions['queryCreator'],
@@ -28,6 +26,7 @@ const createGroupChannelListQuery = (
 export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, options) => {
   const { deliveryReceiptEnabled } = useAppFeatures(sdk);
   const queryRef = useRef<SendbirdGroupChannelListQuery>();
+  const handlerId = useUniqHandlerId('useGroupChannelListWithQuery');
 
   const {
     loading,
@@ -66,7 +65,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
     updateLoading(false);
   }, [init, userId]);
 
-  useChannelHandler(sdk, HOOK_NAME, {
+  useChannelHandler(sdk, handlerId, {
     onChannelChanged: (channel) => updateChannels([channel]),
     onChannelFrozen: (channel) => updateChannels([channel]),
     onChannelUnfrozen: (channel) => updateChannels([channel]),

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -13,6 +13,7 @@ import {
   isDifferentChannel,
   useForceUpdate,
   useFreshCallback,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
@@ -28,11 +29,10 @@ const createMessageCollection = (
   return channel.createMessageCollection({ filter, limit: 100 });
 };
 
-const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
-
 export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
   const forceUpdate = useForceUpdate();
   const collectionRef = useRef<SendbirdMessageCollection>();
+  const handlerId = useUniqHandlerId('useGroupChannelMessagesWithCollection');
 
   const {
     loading,
@@ -59,7 +59,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
           break;
       }
     } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAsRead]`, e);
+      Logger.warn('[useGroupChannelMessagesWithCollection/channelMarkAsRead]', e);
     }
   };
 
@@ -115,9 +115,9 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
         collectionRef.current
           .initialize(MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
           .onCacheResult((err, messages) => {
-            if (err) sdk.isCacheEnabled && Logger.error(`[${HOOK_NAME}/onCacheResult]`, err);
+            if (err) sdk.isCacheEnabled && Logger.error('[useGroupChannelMessagesWithCollection/onCacheResult]', err);
             else {
-              Logger.debug(`[${HOOK_NAME}/onCacheResult]`, 'message length:', messages.length);
+              Logger.debug('[useGroupChannelMessagesWithCollection/onCacheResult]', 'message length:', messages.length);
 
               updateMessages(messages, true, sdk.currentUser.userId);
               updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
@@ -126,9 +126,9 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
             callback?.();
           })
           .onApiResult((err, messages) => {
-            if (err) Logger.warn(`[${HOOK_NAME}/onApiResult]`, err);
+            if (err) Logger.warn('[useGroupChannelMessagesWithCollection/onApiResult]', err);
             else {
-              Logger.debug(`[${HOOK_NAME}/onApiResult]`, 'message length:', messages.length);
+              Logger.debug('[useGroupChannelMessagesWithCollection/onApiResult]', 'message length:', messages.length);
 
               updateMessages(messages, true, sdk.currentUser.userId);
               if (sdk.isCacheEnabled) {
@@ -143,7 +143,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     [sdk, channel.url, options?.collectionCreator],
   );
 
-  useChannelHandler(sdk, HOOK_NAME, {
+  useChannelHandler(sdk, handlerId, {
     onUserBanned(channel, bannedUser) {
       if (channel.isGroupChannel() && !isDifferentChannel(channel, channel)) {
         if (bannedUser.userId === sdk.currentUser.userId) {

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -11,6 +11,7 @@ import {
   isDifferentChannel,
   useAsyncEffect,
   useForceUpdate,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
@@ -28,9 +29,9 @@ const createMessageQuery = (
   });
 };
 
-const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
 export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
   const queryRef = useRef<SendbirdPreviousMessageListQuery>();
+  const handlerId = useUniqHandlerId('useGroupChannelMessagesWithQuery');
 
   const forceUpdate = useForceUpdate();
 
@@ -52,7 +53,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     try {
       await confirmAndMarkAsRead([channel]);
     } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAsRead]`, e);
+      Logger.warn('[useGroupChannelMessagesWithQuery/channelMarkAsRead]', e);
     }
   };
 
@@ -60,7 +61,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     async (uid?: string) => {
       if (uid) {
         queryRef.current = createMessageQuery(channel, options?.queryCreator);
-        channelMarkAsRead().catch();
+        channelMarkAsRead();
         if (queryRef.current?.hasNext) {
           const list = await queryRef.current?.load();
           updateMessages(list, true, sdk.currentUser.userId);
@@ -77,7 +78,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     }
   };
 
-  useChannelHandler(sdk, HOOK_NAME, {
+  useChannelHandler(sdk, handlerId, {
     // Messages
     onMessageReceived(eventChannel, message) {
       if (isDifferentChannel(channel, eventChannel)) return;
@@ -168,7 +169,8 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
               resolve(sentMessage);
             }
           })
-          .onFailed((err) => {
+          .onFailed((err, sentMessage) => {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
@@ -192,7 +194,8 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
               resolve(sentMessage);
             }
           })
-          .onFailed((err) => {
+          .onFailed((err, sentMessage) => {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });

package/src/channel/useOpenChannel.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { SendbirdChatSDK, SendbirdOpenChannel, useAsyncEffect } from '@sendbird/uikit-utils';
+
+export const useOpenChannel = (sdk: SendbirdChatSDK, channelUrl: string) => {
+  const [channel, setChannel] = useState<SendbirdOpenChannel>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<unknown>();
+
+  useAsyncEffect(async () => {
+    try {
+      setChannel(await sdk.openChannel.getChannel(channelUrl));
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { channel, loading, error };
+};

package/src/channel/useOpenChannelList/index.ts

@@ -0,0 +1,6 @@
+import type { UseOpenChannelList } from '../../types';
+import { useOpenChannelListWithQuery } from './useOpenChannelListWithQuery';
+
+export const useOpenChannelList: UseOpenChannelList = (sdk, userId, options) => {
+  return useOpenChannelListWithQuery(sdk, userId, options);
+};

package/src/channel/useOpenChannelList/reducer.ts

@@ -0,0 +1,115 @@
+import { useReducer } from 'react';
+
+import type { SendbirdChannel, SendbirdOpenChannel } from '@sendbird/uikit-utils';
+import { getOpenChannels } from '@sendbird/uikit-utils';
+
+type Action =
+  | {
+      type: 'update_error';
+      value: { error: unknown | null };
+    }
+  | {
+      type: 'update_loading' | 'update_refreshing';
+      value: { status: boolean };
+    }
+  | {
+      type: 'update_channels';
+      value: { channels: SendbirdChannel[] };
+    }
+  | {
+      type: 'delete_channels';
+      value: { channelUrls: string[] };
+    }
+  | {
+      type: 'append_channels';
+      value: { channels: SendbirdChannel[]; clearBeforeAction: boolean };
+    };
+
+type State = {
+  error: unknown | null;
+  loading: boolean;
+  refreshing: boolean;
+  openChannels: SendbirdOpenChannel[];
+};
+
+const defaultReducer = ({ ...draft }: State, action: Action) => {
+  switch (action.type) {
+    case 'update_error': {
+      draft.error = action.value.error;
+      break;
+    }
+    case 'update_refreshing':
+    case 'update_loading': {
+      const key = action.type === 'update_loading' ? 'loading' : 'refreshing';
+      draft[key] = action.value.status;
+      break;
+    }
+    case 'update_channels': {
+      getOpenChannels(action.value.channels).forEach((freshChannel) => {
+        const idx = draft.openChannels.findIndex((staleChannel) => staleChannel.url === freshChannel.url);
+        if (idx > -1) draft.openChannels[idx] = freshChannel;
+      });
+      break;
+    }
+    case 'delete_channels': {
+      action.value.channelUrls.forEach((url) => {
+        const idx = draft.openChannels.findIndex((c) => c.url === url);
+        if (idx > -1) draft.openChannels.splice(idx, 1);
+      });
+      break;
+    }
+    case 'append_channels': {
+      const openChannels = getOpenChannels(action.value.channels);
+      if (action.value.clearBeforeAction) {
+        draft.openChannels = openChannels;
+      } else {
+        draft.openChannels = [...draft.openChannels, ...openChannels];
+      }
+      break;
+    }
+  }
+  return draft;
+};
+
+export const useOpenChannelListReducer = () => {
+  const [{ error, loading, refreshing, openChannels }, dispatch] = useReducer(defaultReducer, {
+    loading: true,
+    refreshing: false,
+    openChannels: [],
+    error: null,
+  });
+
+  const updateChannels = (channels: SendbirdChannel[]) => {
+    dispatch({ type: 'update_channels', value: { channels } });
+  };
+  const deleteChannels = (channelUrls: string[]) => {
+    dispatch({ type: 'delete_channels', value: { channelUrls } });
+  };
+  const appendChannels = (channels: SendbirdChannel[], clearBeforeAction: boolean) => {
+    dispatch({ type: 'append_channels', value: { channels, clearBeforeAction } });
+  };
+  const updateLoading = (status: boolean) => {
+    dispatch({ type: 'update_loading', value: { status } });
+  };
+  const updateRefreshing = (status: boolean) => {
+    dispatch({ type: 'update_refreshing', value: { status } });
+  };
+
+  const updateError = (error: unknown | null) => {
+    dispatch({ type: 'update_error', value: { error } });
+  };
+
+  return {
+    updateError,
+    updateLoading,
+    updateRefreshing,
+    updateChannels,
+    deleteChannels,
+    appendChannels,
+
+    error,
+    loading,
+    refreshing,
+    openChannels,
+  };
+};

package/src/channel/useOpenChannelList/useOpenChannelListWithQuery.ts

@@ -0,0 +1,112 @@
+import { useRef } from 'react';
+
+import type { SendbirdBaseChannel, SendbirdChatSDK, SendbirdOpenChannelListQuery } from '@sendbird/uikit-utils';
+import { useAsyncEffect, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import { useChannelHandler } from '../../handler/useChannelHandler';
+import type { UseOpenChannelList, UseOpenChannelListOptions } from '../../types';
+import { useOpenChannelListReducer } from './reducer';
+
+const createOpenChannelListQuery = (sdk: SendbirdChatSDK, queryCreator: UseOpenChannelListOptions['queryCreator']) => {
+  const passedQuery = queryCreator?.();
+  if (passedQuery) return passedQuery;
+  return sdk.openChannel.createOpenChannelListQuery({});
+};
+
+export const useOpenChannelListWithQuery: UseOpenChannelList = (sdk, userId, options) => {
+  const queryRef = useRef<SendbirdOpenChannelListQuery>();
+  const handlerId = useUniqHandlerId('useOpenChannelListWithQuery');
+
+  const {
+    error,
+    loading,
+    openChannels,
+    refreshing,
+    updateChannels,
+    appendChannels,
+    deleteChannels,
+    updateRefreshing,
+    updateLoading,
+    updateError,
+  } = useOpenChannelListReducer();
+
+  const init = useFreshCallback(async (uid?: string) => {
+    if (uid) {
+      queryRef.current = createOpenChannelListQuery(sdk, options?.queryCreator);
+
+      if (queryRef.current?.hasNext) {
+        const channels = await queryRef.current.next();
+        appendChannels(channels, true);
+      }
+    }
+  });
+
+  const updateChannel = (channel: SendbirdBaseChannel) => {
+    if (channel.isOpenChannel()) updateChannels([channel]);
+  };
+
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      onChannelChanged: updateChannel,
+      onChannelFrozen: updateChannel,
+      onChannelUnfrozen: updateChannel,
+      onChannelDeleted: (url) => deleteChannels([url]),
+      onUserBanned(channel, user) {
+        const isMe = user.userId === userId;
+        if (isMe && channel.isOpenChannel()) deleteChannels([channel.url]);
+      },
+      onUserEntered: (channel, user) => {
+        const isMe = user.userId === userId;
+        if (isMe && channel.isOpenChannel() && !openChannels.find((it) => it.url === channel.url)) {
+          appendChannels([], true);
+          refresh();
+        }
+      },
+    },
+    'open',
+  );
+
+  useAsyncEffect(async () => {
+    updateLoading(true);
+    updateError(null);
+    try {
+      await init(userId);
+    } catch (e) {
+      updateError(e);
+      appendChannels([], true);
+    } finally {
+      updateLoading(false);
+    }
+  }, [init, userId]);
+
+  const refresh = useFreshCallback(async () => {
+    updateRefreshing(true);
+    updateError(null);
+    try {
+      await init(userId);
+    } catch (e) {
+      updateError(e);
+      appendChannels([], true);
+    } finally {
+      updateRefreshing(false);
+    }
+  });
+
+  const next = useFreshCallback(async () => {
+    if (queryRef.current?.hasNext) {
+      const channels = await queryRef.current.next();
+      appendChannels(channels, false);
+    }
+  });
+
+  return {
+    error,
+    loading,
+    openChannels,
+    refresh,
+    refreshing,
+    next,
+  };
+};

package/src/channel/useOpenChannelMessages/index.ts

@@ -0,0 +1,6 @@
+import type { UseOpenChannelMessages } from '../../types';
+import { useOpenChannelMessagesWithQuery } from './useOpenChannelMessagesWithQuery';
+
+export const useOpenChannelMessages: UseOpenChannelMessages = (sdk, channel, userId, options) => {
+  return useOpenChannelMessagesWithQuery(sdk, channel, userId, options);
+};