@sendbird/uikit-chat-hooks 1.1.2 → 2.0.0-rc.0

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -1,14 +1,19 @@
 import { useCallback, useEffect, useRef } from 'react';
 
+import { MessageCollectionInitPolicy, MessageFilter } from '@sendbird/chat/groupChannel';
 import type {
   SendbirdChannel,
-  SendbirdChatSDK,
   SendbirdFileMessage,
   SendbirdGroupChannel,
   SendbirdMessageCollection,
-  SendbirdUserMessage,
 } from '@sendbird/uikit-utils';
-import { Logger, NOOP, isDifferentChannel, useForceUpdate, useIsMountedRef } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  confirmAndMarkAsDelivered,
+  confirmAndMarkAsRead,
+  isDifferentChannel,
+  useForceUpdate,
+} from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
@@ -17,25 +22,17 @@ import { useActiveGroupChannel } from '../useActiveGroupChannel';
 import { useGroupChannelMessagesReducer } from './reducer';
 
 const createMessageCollection = (
-  sdk: SendbirdChatSDK,
   channel: SendbirdGroupChannel,
   creator?: UseGroupChannelMessagesOptions['collectionCreator'],
 ) => {
   if (creator) return creator();
-  const collection = channel.createMessageCollection();
-  const filter = new sdk.MessageFilter();
-  return collection.setLimit(100).setFilter(filter).build();
+  const filter = new MessageFilter();
+  return channel.createMessageCollection({ filter, limit: 100 });
 };
 
 const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
 
-// FIXME: MessageCollection event handler bug, initialize(run async addObserver) -> dispose -> removeObserver -> addObserver called
 export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const isMounted = useIsMountedRef();
-  const disposeManuallyAfterUnmounted = () => {
-    if (!isMounted.current && collectionRef.current) collectionRef.current.dispose();
-  };
-
   const { deliveryReceiptEnabled } = useAppFeatures(sdk);
 
   const collectionRef = useRef<SendbirdMessageCollection>();
@@ -60,12 +57,12 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
+      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
     }
     try {
-      await sdk.markAsReadWithChannelUrls([activeChannel.url]);
+      await confirmAndMarkAsRead(sdk, [activeChannel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
@@ -82,12 +79,38 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
       if (collectionRef.current) collectionRef.current?.dispose();
 
       if (uid) {
-        collectionRef.current = createMessageCollection(sdk, activeChannel, options?.collectionCreator);
+        collectionRef.current = createMessageCollection(activeChannel, options?.collectionCreator);
         updateNextMessages([], true, sdk.currentUser.userId);
         channelMarkAs();
 
+        collectionRef.current?.setMessageCollectionHandler({
+          onMessagesAdded: (_, channel, messages) => {
+            channelMarkAs();
+            updateNextMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
+          },
+          onMessagesUpdated: (_, channel, messages) => {
+            updateMessages(messages, false, sdk.currentUser.userId);
+            updateChannel(channel);
+          },
+          onMessagesDeleted: (_, channel, messageIds) => {
+            deleteMessages(messageIds, []);
+            deleteNextMessages(messageIds, []);
+            updateChannel(channel);
+          },
+          onChannelDeleted: () => {
+            options?.onChannelDeleted?.();
+          },
+          onChannelUpdated: (_, channel) => {
+            updateChannel(channel);
+          },
+          onHugeGapDetected: () => {
+            init(uid);
+          },
+        });
+
         collectionRef.current
-          .initialize(sdk.MessageCollection.MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
+          .initialize(MessageCollectionInitPolicy.CACHE_AND_REPLACE_BY_API)
           .onCacheResult((err, messages) => {
             if (err) sdk.isCacheEnabled && Logger.error(`[${HOOK_NAME}/onCacheResult]`, err);
             else {
@@ -110,43 +133,6 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
             }
             callback?.();
           });
-
-        collectionRef.current.setMessageCollectionHandler({
-          onMessagesAdded(_, channel, messages) {
-            disposeManuallyAfterUnmounted();
-            channelMarkAs();
-            updateNextMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
-          },
-          onMessagesUpdated(_, channel, messages) {
-            disposeManuallyAfterUnmounted();
-            updateMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
-          },
-          onMessagesDeleted(_, channel, messages) {
-            disposeManuallyAfterUnmounted();
-            const msgIds = messages.map((m) => m.messageId);
-            const reqIds = messages
-              .filter((m): m is SendbirdUserMessage | SendbirdFileMessage => 'reqId' in m)
-              .map((m) => m.reqId);
-
-            deleteMessages(msgIds, reqIds);
-            deleteNextMessages(msgIds, reqIds);
-            updateChannel(channel);
-          },
-          onChannelDeleted() {
-            disposeManuallyAfterUnmounted();
-            options?.onChannelDeleted?.();
-          },
-          onChannelUpdated(_, channel) {
-            disposeManuallyAfterUnmounted();
-            updateChannel(channel);
-          },
-          onHugeGapDetected() {
-            disposeManuallyAfterUnmounted();
-            init(uid);
-          },
-        });
       }
     },
     [sdk, activeChannel.url, options?.collectionCreator],
@@ -154,7 +140,6 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
 
   useChannelHandler(sdk, HOOK_NAME, {
     onUserBanned(channel, bannedUser) {
-      disposeManuallyAfterUnmounted();
       if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
         if (bannedUser.userId === sdk.currentUser.userId) {
           options?.onChannelDeleted?.();
@@ -214,16 +199,23 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
   const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        const pendingMessage = activeChannel.sendUserMessage(params, (sentMessage, error) => {
-          if (error) reject(error);
-          else {
-            updateMessages([sentMessage], false, sdk.currentUser.userId);
-            resolve(sentMessage);
-          }
-        });
-
-        onPending?.(pendingMessage);
-        updateMessages([pendingMessage], false, sdk.currentUser.userId);
+        activeChannel
+          .sendUserMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isUserMessage()) {
+              onPending?.(pendingMessage);
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isUserMessage()) {
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage);
+            }
+          })
+          .onFailed((err) => {
+            reject(err);
+          });
       });
     },
     [activeChannel],
@@ -231,23 +223,30 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
   const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        const pendingMessage = activeChannel.sendFileMessage(params, (sentMessage, error) => {
-          if (error) reject(error);
-          else {
-            updateMessages([sentMessage], false, sdk.currentUser.userId);
-            resolve(sentMessage as SendbirdFileMessage);
-          }
-        });
-
-        updateMessages([pendingMessage], false, sdk.currentUser.userId);
-        onPending?.(pendingMessage);
+        activeChannel
+          .sendFileMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isFileMessage()) {
+              updateMessages([pendingMessage], false, sdk.currentUser.userId);
+              onPending?.(pendingMessage);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isFileMessage()) {
+              updateMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage as SendbirdFileMessage);
+            }
+          })
+          .onFailed((err) => {
+            reject(err);
+          });
       });
     },
     [activeChannel],
   );
   const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
     async (messageId, params) => {
-      const updatedMessage = await activeChannel.updateUserMessage(messageId, params, NOOP);
+      const updatedMessage = await activeChannel.updateUserMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
@@ -255,7 +254,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
   );
   const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
     async (messageId, params) => {
-      const updatedMessage = await activeChannel.updateFileMessage(messageId, params, NOOP);
+      const updatedMessage = await activeChannel.updateFileMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
@@ -265,6 +264,8 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     async (failedMessage) => {
       const message = await (() => {
         if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
+        // FIXME: v4 bugs
+        // @ts-ignore
         if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
         return null;
       })();
@@ -280,7 +281,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
         if (message.isFileMessage()) await activeChannel.deleteMessage(message);
       } else {
         try {
-          await collectionRef.current?.removeFailedMessages([message]);
+          await collectionRef.current?.removeFailedMessage(message.reqId);
         } finally {
           deleteMessages([message.messageId], [message.reqId]);
         }

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -1,8 +1,15 @@
 import { useCallback, useRef } from 'react';
-import type Sendbird from 'sendbird';
 
-import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdOpenChannel } from '@sendbird/uikit-utils';
-import { Logger, isDifferentChannel, useAsyncEffect, useForceUpdate } from '@sendbird/uikit-utils';
+import type { SendbirdBaseChannel, SendbirdGroupChannel } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  confirmAndMarkAsDelivered,
+  confirmAndMarkAsRead,
+  isDifferentChannel,
+  useAsyncEffect,
+  useForceUpdate,
+} from '@sendbird/uikit-utils';
+import type { SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
@@ -15,17 +22,17 @@ const createMessageQuery = (
   creator?: UseGroupChannelMessagesOptions['queryCreator'],
 ) => {
   if (creator) return creator();
-  const query = channel.createPreviousMessageListQuery();
-  query.limit = 100;
-  query.reverse = true;
-  return query;
+  return channel.createPreviousMessageListQuery({
+    limit: 100,
+    reverse: true,
+  });
 };
 
 const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
 export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
   const { deliveryReceiptEnabled } = useAppFeatures(sdk);
 
-  const queryRef = useRef<Sendbird.PreviousMessageListQuery>();
+  const queryRef = useRef<SendbirdPreviousMessageListQuery>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
   const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
@@ -47,12 +54,12 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) sdk.markAsDelivered(activeChannel.url);
+      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
     }
     try {
-      await sdk.markAsReadWithChannelUrls([activeChannel.url]);
+      await confirmAndMarkAsRead(sdk, [activeChannel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
@@ -62,8 +69,8 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     async (uid?: string) => {
       if (uid) {
         queryRef.current = createMessageQuery(activeChannel, options?.queryCreator);
-        channelMarkAs();
-        if (queryRef.current?.hasMore) {
+        channelMarkAs().catch();
+        if (queryRef.current?.hasNext) {
           const list = await queryRef.current?.load();
           updateMessages(list, true, sdk.currentUser.userId);
         }
@@ -73,7 +80,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     [sdk, activeChannel.url, options?.queryCreator],
   );
 
-  const channelUpdater = (channel: SendbirdGroupChannel | SendbirdOpenChannel) => {
+  const channelUpdater = (channel: SendbirdBaseChannel) => {
     if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
       setActiveChannel(channel);
       forceUpdate();
@@ -111,8 +118,8 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     // Users
     onOperatorUpdated: channelUpdater,
     onUserLeft: channelUpdater,
-    onUserEntered: channelUpdater,
-    onUserExited: channelUpdater,
+    // onUserEntered: channelUpdater,
+    // onUserExited: channelUpdater,
     onUserJoined: channelUpdater,
     onUserUnbanned: channelUpdater,
     onUserMuted: channelUpdater,
@@ -141,7 +148,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   }, [init, userId]);
 
   const prev: ReturnType<UseGroupChannelMessages>['prev'] = useCallback(async () => {
-    if (queryRef.current && queryRef.current?.hasMore) {
+    if (queryRef.current && queryRef.current?.hasNext) {
       const list = await queryRef.current?.load();
       updateMessages(list, false, sdk.currentUser.userId);
     }
@@ -157,15 +164,23 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        const pendingMessage = activeChannel.sendUserMessage(params, (sentMessage, error) => {
-          if (error) reject(error);
-          else {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
-            resolve(sentMessage);
-          }
-        });
-        updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
-        onPending?.(pendingMessage);
+        activeChannel
+          .sendUserMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isUserMessage()) {
+              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              onPending?.(pendingMessage);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isUserMessage()) {
+              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage);
+            }
+          })
+          .onFailed((err) => {
+            reject(err);
+          });
       });
     },
     [activeChannel],
@@ -173,15 +188,23 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        const pendingMessage = activeChannel.sendFileMessage(params, (sentMessage, error) => {
-          if (error) reject(error);
-          else {
-            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
-            resolve(sentMessage as SendbirdFileMessage);
-          }
-        });
-        updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
-        onPending?.(pendingMessage);
+        activeChannel
+          .sendFileMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isFileMessage()) {
+              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              onPending?.(pendingMessage);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isFileMessage()) {
+              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage);
+            }
+          })
+          .onFailed((err) => {
+            reject(err);
+          });
       });
     },
     [activeChannel],
@@ -206,6 +229,8 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     async (failedMessage) => {
       const message = await (() => {
         if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
+        // FIXME: v4 bugs
+        // @ts-ignore
         if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
         return null;
       })();

package/src/common/useMessageOutgoingStatus.ts

@@ -1,10 +1,4 @@
-import type {
-  SendbirdAdminMessage,
-  SendbirdChatSDK,
-  SendbirdFileMessage,
-  SendbirdGroupChannel,
-  SendbirdUserMessage,
-} from '@sendbird/uikit-utils';
+import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
 import { isDifferentChannel, isMyMessage, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../handler/useChannelHandler';
@@ -17,7 +11,7 @@ export type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' |
 export const useMessageOutgoingStatus = (
   sdk: SendbirdChatSDK,
   channel: SendbirdGroupChannel,
-  message?: SendbirdFileMessage | SendbirdUserMessage | SendbirdAdminMessage | null,
+  message?: SendbirdMessage | null,
 ): SBUOutgoingStatus => {
   const features = useAppFeatures(sdk);
   const forceUpdate = useForceUpdate();
@@ -25,13 +19,13 @@ export const useMessageOutgoingStatus = (
 
   const uniqId = useUniqId(HOOK_NAME);
   useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
-    onDeliveryReceiptUpdated(eventChannel) {
+    onUndeliveredMemberStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!isMyMessage(message, currentUser?.userId)) return;
 
       forceUpdate();
     },
-    onReadReceiptUpdated(eventChannel) {
+    onUnreadMemberStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!isMyMessage(message, currentUser?.userId)) return;
 
@@ -41,9 +35,10 @@ export const useMessageOutgoingStatus = (
 
   if (!message) return 'NONE';
 
-  if (message.sendingStatus === 'pending') return 'PENDING';
-
-  if (message.sendingStatus === 'failed') return 'FAILED';
+  if ('sendingStatus' in message) {
+    if (message.sendingStatus === 'pending') return 'PENDING';
+    if (message.sendingStatus === 'failed') return 'FAILED';
+  }
 
   if (channel.getUnreadMemberCount(message) === 0) return 'READ';
 

package/src/common/usePushTrigger.ts

@@ -1,17 +1,24 @@
 import { useCallback, useState } from 'react';
 
+import { PushTriggerOption } from '@sendbird/chat';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
 import { Logger, useAsyncEffect } from '@sendbird/uikit-utils';
 
-type PushTriggerOptionType = 'all' | 'mention_only' | 'off';
+const PushTriggerMap = {
+  'all': PushTriggerOption.ALL,
+  'mention_only': PushTriggerOption.MENTION_ONLY,
+  'off': PushTriggerOption.OFF,
+  'default': PushTriggerOption.DEFAULT,
+};
+
 export const usePushTrigger = (sdk: SendbirdChatSDK) => {
-  const [option, setOption] = useState<PushTriggerOptionType>('off');
+  const [option, setOption] = useState<PushTriggerOption>(PushTriggerOption.DEFAULT);
 
   const updateOption = useCallback(
-    async (value: PushTriggerOptionType) => {
+    async (value: keyof typeof PushTriggerMap) => {
       try {
-        await sdk.setPushTriggerOption(value);
-        setOption(value);
+        const _option = PushTriggerMap[value];
+        await sdk.setPushTriggerOption(_option).then(() => setOption(_option));
       } catch (e) {
         Logger.warn('[usePushTrigger]', 'Cannot update push trigger option', e);
       }
@@ -20,8 +27,7 @@ export const usePushTrigger = (sdk: SendbirdChatSDK) => {
   );
 
   useAsyncEffect(async () => {
-    const currentOption = await sdk.getPushTriggerOption();
-    setOption(currentOption as PushTriggerOptionType);
+    setOption(await sdk.getPushTriggerOption());
   }, [sdk, sdk.currentUser]);
 
   return {

package/src/common/useTotalUnreadChannelCount.ts

@@ -15,11 +15,13 @@ export const useTotalUnreadChannelCount = (sdk: SendbirdChatSDK, params?: Params
   const [unreadChannelCount, setUnreadChannelCount] = useState(0);
 
   useAsyncEffect(async () => {
-    setUnreadChannelCount(await sdk.getTotalUnreadChannelCount());
+    setUnreadChannelCount(await sdk.groupChannel.getTotalUnreadChannelCount());
   }, [sdk]);
 
   useUserEventHandler(sdk, HOOK_NAME + id, {
-    onTotalUnreadMessageCountUpdated: async () => setUnreadChannelCount(await sdk.getTotalUnreadChannelCount()),
+    onTotalUnreadMessageCountUpdated: async () => {
+      setUnreadChannelCount(await sdk.groupChannel.getTotalUnreadChannelCount());
+    },
   });
 
   return truncatedBadgeCount(unreadChannelCount, params?.maxCount);

package/src/common/useTotalUnreadMessageCount.ts

@@ -1,43 +1,32 @@
 import { useState } from 'react';
-import type Sendbird from 'sendbird';
 
+import { SuperChannelFilter, TotalUnreadMessageCountParams } from '@sendbird/chat/groupChannel';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedBadgeCount, useAsyncEffect } from '@sendbird/uikit-utils';
-import { useUniqId } from '@sendbird/uikit-utils';
+import { truncatedBadgeCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
 
-type Params = {
-  paramCreator?: () => Sendbird.GroupChannelTotalUnreadMessageCountParams;
+type Options = {
+  params?: TotalUnreadMessageCountParams;
   maxCount?: number;
 };
 
 const HOOK_NAME = 'useTotalUnreadMessageCount';
-export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, params?: Params) => {
+export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, options?: Options) => {
   const id = useUniqId(HOOK_NAME);
   const [unreadMessageCount, setUnreadMessageCount] = useState(0);
 
   useAsyncEffect(async () => {
-    let param;
-    if (params?.paramCreator) {
-      param = params.paramCreator();
-    } else {
-      const params = new sdk.GroupChannelTotalUnreadMessageCountParams();
-      params.superChannelFilter = 'all';
-      param = params;
-    }
-    const unreadCount = await sdk.getTotalUnreadMessageCount(param);
+    const unreadCount = await sdk.groupChannel.getTotalUnreadMessageCount({
+      superChannelFilter: SuperChannelFilter.ALL,
+      ...options?.params,
+    });
     setUnreadMessageCount(unreadCount);
-  }, [sdk, params?.paramCreator]);
+  }, [sdk, options?.params?.superChannelFilter, options?.params?.channelCustomTypesFilter]);
 
-  useUserEventHandler(
-    sdk,
-    `${HOOK_NAME}_${id}`,
-    {
-      onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
-    },
-    [sdk],
-  );
+  useUserEventHandler(sdk, `${HOOK_NAME}_${id}`, {
+    onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
+  });
 
-  return truncatedBadgeCount(unreadMessageCount, params?.maxCount);
+  return truncatedBadgeCount(unreadMessageCount, options?.maxCount);
 };

package/src/handler/useChannelHandler.ts

@@ -1,12 +1,12 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
-import type Sendbird from 'sendbird';
 
+import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
 import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
 
 export const useChannelHandler = (
   sdk: SendbirdChatSDK,
   handlerId: string,
-  hookHandler: Partial<Sendbird.ChannelHandler>,
+  hookHandler: Partial<GroupChannelHandler>,
 ) => {
   const handlerRef = useRef(hookHandler);
   useLayoutEffect(() => {
@@ -16,7 +16,7 @@ export const useChannelHandler = (
   useEffect(() => {
     Logger.debug('[useChannelHandler] hook called by', handlerId);
 
-    const handler = new sdk.ChannelHandler();
+    const handler = new GroupChannelHandler();
     const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
     handlerKeys.forEach((key) => {
       handler[key] = (...args: unknown[]) => {
@@ -25,7 +25,7 @@ export const useChannelHandler = (
       };
     });
 
-    sdk.addChannelHandler(handlerId, handler);
-    return () => sdk.removeChannelHandler(handlerId);
+    sdk.groupChannel.addGroupChannelHandler(handlerId, handler);
+    return () => sdk.groupChannel.removeGroupChannelHandler(handlerId);
   }, [sdk, handlerId]);
 };

package/src/handler/useConnectionHandler.ts

@@ -1,22 +1,22 @@
 import React, { useEffect } from 'react';
-import type Sendbird from 'sendbird';
 
+import { ConnectionHandler } from '@sendbird/chat';
 import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
 
 export const useConnectionHandler = (
   sdk: SendbirdChatSDK,
   handlerId: string,
-  hookHandler: Partial<Sendbird.ConnectionHandler>,
+  hookHandler: Partial<ConnectionHandler>,
   deps: React.DependencyList = [],
 ) => {
   useEffect(() => {
     Logger.info('[useConnectionHandler]', handlerId);
 
-    const handler = new sdk.ConnectionHandler();
+    const handler = new ConnectionHandler();
     const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
     handlerKeys.forEach((key) => {
-      const hookHandlerFn = hookHandler[key];
-      if (hookHandlerFn) handler[key] = hookHandlerFn;
+      // @ts-ignore
+      if (hookHandler[key]) handler[key] = hookHandler[key];
     });
 
     sdk.addConnectionHandler(handlerId, handler);