chore: replace deprecated useChannelHandler for group channel to useGroupChannelHandler

Author: bang9

packages/uikit-react-native/src/containers/GroupChannelPreviewContainer.tsx

@@ -1,14 +1,15 @@
 import React, { useState } from 'react';
 import { Pressable } from 'react-native';
 
-import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import {
   GroupChannelPreview,
   Icon,
   LoadingSpinner,
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   SendbirdGroupChannel,
   SendbirdUser,
@@ -19,7 +20,6 @@ import {
   isMyMessage,
   isVoiceMessage,
   useIIFE,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ChannelCover from '../components/ChannelCover';
@@ -38,8 +38,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
 
-  const handlerId = useUniqHandlerId('GroupChannelPreviewContainer_TypingIndicator');
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onTypingStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!sbOptions.uikit.groupChannel.channelList.enableTypingIndicator) return;

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -1,9 +1,14 @@
 import React, { useContext, useEffect } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, SendbirdSendableMessage, useIsFirstMount } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import {
+  SendbirdMessage,
+  SendbirdSendableMessage,
+  isDifferentChannel,
+  useFreshCallback,
+  useIsFirstMount,
+} from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
@@ -22,7 +27,6 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     GroupChannelContexts.MessageList,
   );
 
-  const id = useUniqHandlerId('GroupChannelMessageList');
   const isFirstMount = useIsFirstMount();
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
@@ -62,7 +66,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     }
   });
 
-  useChannelHandler(sdk, id, {
+  useGroupChannelHandler(sdk, {
     onReactionUpdated(channel, event) {
       if (isDifferentChannel(channel, props.channel)) return;
       const recentMessage = props.messages[0];

packages/uikit-react-native/src/domain/groupChannel/module/moduleContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback, useRef, useState } from 'react';
 import type { FlatList } from 'react-native';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   ContextValue,
   Logger,
@@ -14,7 +14,6 @@ import {
   getGroupChannelChatAvailableState,
   isDifferentChannel,
   useFreshCallback,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -62,7 +61,6 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
-  const handlerId = useUniqHandlerId('GroupChannelContextsProvider');
   const { STRINGS } = useLocalization();
   const { currentUser, sdk, sbOptions } = useSendbirdChat();
 
@@ -99,7 +97,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
     }
   };
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onMessageDeleted(_, messageId) {
       if (messageToReply?.messageId === messageId) {
         setMessageToReply(undefined);

packages/uikit-react-native/src/domain/groupChannelSettings/module/moduleContext.tsx

@@ -1,15 +1,14 @@
 import React, { createContext, useCallback } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   NOOP,
   SendbirdBaseChannel,
   SendbirdGroupChannel,
   SendbirdGroupChannelUpdateParams,
   isDifferentChannel,
   useForceUpdate,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -28,7 +27,6 @@ export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
 };
 
 export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['Provider'] = ({ children, channel }) => {
-  const handlerId = useUniqHandlerId('GroupChannelSettingsContextsProvider');
   const forceUpdate = useForceUpdate();
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
@@ -40,7 +38,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     forceUpdate();
   };
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onChannelChanged: onChannelChanged,
     onChannelFrozen: onChannelChanged,
     onChannelUnfrozen: onChannelChanged,

packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadMessageList.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import ChannelThreadMessageList from '../../../components/ChannelThreadMessageList';
 import { useSendbirdChat } from '../../../hooks/useContext';
@@ -14,7 +14,6 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
   const { subscribe } = useContext(GroupChannelThreadContexts.PubSub);
   const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelThreadContexts.MessageList);
 
-  const id = useUniqHandlerId('GroupChannelThreadMessageList');
   const ignorePropReached = useRef(false);
 
   const _onTopReached = () => {
@@ -56,7 +55,7 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
     }
   }, [props.startingPoint]);
 
-  useChannelHandler(sdk, id, {
+  useGroupChannelHandler(sdk, {
     onReactionUpdated(channel, event) {
       if (isDifferentChannel(channel, props.channel)) return;
       const recentMessage = props.messages[0];

packages/uikit-react-native/src/fragments/createGroupChannelMembersFragment.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 
-import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import { Icon, useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdMember } from '@sendbird/uikit-utils';
-import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -28,8 +29,6 @@ const createGroupChannelMembersFragment = (
     sortComparator,
     queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
-
     const refreshSchedule = useRef<NodeJS.Timeout>();
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
@@ -41,7 +40,7 @@ const createGroupChannelMembersFragment = (
       sortComparator,
     });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

packages/uikit-react-native/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { NOOP, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -24,15 +25,13 @@ const createGroupChannelMutedMembersFragment = (
     renderUser,
     queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
-
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
     const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserMuted(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         upsertUser(user);

packages/uikit-react-native/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { ifOperator, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { ifOperator, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -22,16 +23,14 @@ const createGroupChannelOperatorsFragment = (
     renderUser,
     queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
-
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
     const { show } = useUserProfile();
 
     const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

packages/uikit-react-native/src/hooks/useMentionSuggestion.ts

@@ -1,8 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useAsyncEffect, useDebounceEffect, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useAsyncEffect, useDebounceEffect } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 import type { Range } from '../types';
@@ -22,9 +22,7 @@ const useMentionSuggestion = (params: {
     setFreshChannel(await channel.refresh());
   }, [channel.url]);
 
-  const id = useUniqHandlerId('useMentionSuggestion');
-
-  useChannelHandler(params.sdk, id, {
+  useGroupChannelHandler(params.sdk, {
     onUserJoined(eventChannel) {
       if (isDifferentChannel(eventChannel, channel)) return;
       setFreshChannel(eventChannel);