@sendbird/uikit-chat-hooks 1.0.2 → 1.1.0

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -80,58 +80,53 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     }
   };
 
-  useChannelHandler(
-    sdk,
-    HOOK_NAME,
-    {
-      // Messages
-      onMessageReceived(eventChannel, message) {
-        if (isDifferentChannel(activeChannel, eventChannel)) return;
-        channelMarkAs();
-        updateNextMessages([message], false, sdk.currentUser.userId);
-      },
-      onMessageUpdated(eventChannel, message) {
-        if (isDifferentChannel(activeChannel, eventChannel)) return;
-        updateMessages([message], false, sdk.currentUser.userId);
-      },
-      onMessageDeleted(eventChannel, messageId) {
-        if (isDifferentChannel(activeChannel, eventChannel)) return;
-        deleteMessages([messageId], []);
-        deleteNextMessages([messageId], []);
-      },
-      // Channels
-      onChannelChanged: channelUpdater,
-      onChannelFrozen: channelUpdater,
-      onChannelUnfrozen: channelUpdater,
-      onChannelHidden: channelUpdater,
-      onChannelMemberCountChanged(channels) {
-        const channel = channels.find((c) => !isDifferentChannel(c, activeChannel));
-        if (channel) channelUpdater(channel);
-      },
-      onChannelDeleted(channelUrl: string) {
-        if (activeChannel.url === channelUrl) options?.onChannelDeleted?.();
-      },
-      // Users
-      onOperatorUpdated: channelUpdater,
-      onUserLeft: channelUpdater,
-      onUserEntered: channelUpdater,
-      onUserExited: channelUpdater,
-      onUserJoined: channelUpdater,
-      onUserUnbanned: channelUpdater,
-      onUserMuted: channelUpdater,
-      onUserUnmuted: channelUpdater,
-      onUserBanned(eventChannel, bannedUser) {
-        if (isDifferentChannel(activeChannel, eventChannel)) return;
-
-        if (bannedUser.userId === sdk.currentUser.userId) {
-          options?.onChannelDeleted?.();
-        } else {
-          channelUpdater(eventChannel);
-        }
-      },
+  useChannelHandler(sdk, HOOK_NAME, {
+    // Messages
+    onMessageReceived(eventChannel, message) {
+      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      channelMarkAs();
+      updateNextMessages([message], false, sdk.currentUser.userId);
     },
-    [sdk],
-  );
+    onMessageUpdated(eventChannel, message) {
+      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      updateMessages([message], false, sdk.currentUser.userId);
+    },
+    onMessageDeleted(eventChannel, messageId) {
+      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      deleteMessages([messageId], []);
+      deleteNextMessages([messageId], []);
+    },
+    // Channels
+    onChannelChanged: channelUpdater,
+    onChannelFrozen: channelUpdater,
+    onChannelUnfrozen: channelUpdater,
+    onChannelHidden: channelUpdater,
+    onChannelMemberCountChanged(channels) {
+      const channel = channels.find((c) => !isDifferentChannel(c, activeChannel));
+      if (channel) channelUpdater(channel);
+    },
+    onChannelDeleted(channelUrl: string) {
+      if (activeChannel.url === channelUrl) options?.onChannelDeleted?.();
+    },
+    // Users
+    onOperatorUpdated: channelUpdater,
+    onUserLeft: channelUpdater,
+    onUserEntered: channelUpdater,
+    onUserExited: channelUpdater,
+    onUserJoined: channelUpdater,
+    onUserUnbanned: channelUpdater,
+    onUserMuted: channelUpdater,
+    onUserUnmuted: channelUpdater,
+    onUserBanned(eventChannel, bannedUser) {
+      if (isDifferentChannel(activeChannel, eventChannel)) return;
+
+      if (bannedUser.userId === sdk.currentUser.userId) {
+        options?.onChannelDeleted?.();
+      } else {
+        channelUpdater(eventChannel);
+      }
+    },
+  });
 
   useAsyncEffect(async () => {
     updateLoading(true);

package/src/common/useAppFeatures.ts

@@ -1,28 +1,11 @@
-import { useMemo } from 'react';
-
 import { ApplicationAttributes, PremiumFeatures, SendbirdChatSDK } from '@sendbird/uikit-utils';
 
 export const useAppFeatures = (sdk: SendbirdChatSDK) => {
-  const deliveryReceiptEnabled = useMemo(() => {
-    return Boolean(sdk.appInfo?.premiumFeatureList?.includes?.(PremiumFeatures.delivery_receipt));
-  }, [sdk.appInfo?.premiumFeatureList]);
-
-  const broadcastChannelEnabled = useMemo(() => {
-    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.allow_broadcast_channel));
-  }, [sdk.appInfo?.applicationAttributes]);
-
-  const superGroupChannelEnabled = useMemo(() => {
-    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.allow_super_group_channel));
-  }, [sdk.appInfo?.applicationAttributes]);
-
-  const reactionEnabled = useMemo(() => {
-    return Boolean(sdk.appInfo?.applicationAttributes?.includes?.(ApplicationAttributes.reactions));
-  }, [sdk.appInfo?.applicationAttributes]);
-
+  const { premiumFeatureList = [], applicationAttributes = [] } = sdk.appInfo ?? {};
   return {
-    deliveryReceiptEnabled,
-    broadcastChannelEnabled,
-    superGroupChannelEnabled,
-    reactionEnabled,
+    deliveryReceiptEnabled: Boolean(premiumFeatureList.includes(PremiumFeatures.delivery_receipt)),
+    broadcastChannelEnabled: Boolean(applicationAttributes.includes(ApplicationAttributes.allow_broadcast_channel)),
+    superGroupChannelEnabled: Boolean(applicationAttributes.includes(ApplicationAttributes.allow_super_group_channel)),
+    reactionEnabled: Boolean(applicationAttributes.includes(ApplicationAttributes.reactions)),
   };
 };

package/src/handler/useChannelHandler.ts

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect, useLayoutEffect, useRef } from 'react';
 import type Sendbird from 'sendbird';
 
 import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
@@ -7,19 +7,25 @@ export const useChannelHandler = (
   sdk: SendbirdChatSDK,
   handlerId: string,
   hookHandler: Partial<Sendbird.ChannelHandler>,
-  deps: React.DependencyList = [],
 ) => {
+  const handlerRef = useRef(hookHandler);
+  useLayoutEffect(() => {
+    handlerRef.current = hookHandler;
+  });
+
   useEffect(() => {
     Logger.debug('[useChannelHandler] hook called by', handlerId);
 
     const handler = new sdk.ChannelHandler();
     const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
     handlerKeys.forEach((key) => {
-      const hookHandlerFn = hookHandler[key];
-      if (hookHandlerFn) handler[key] = hookHandlerFn as () => unknown;
+      handler[key] = (...args: unknown[]) => {
+        // @ts-ignore
+        handlerRef.current[key]?.(...args);
+      };
     });
 
     sdk.addChannelHandler(handlerId, handler);
     return () => sdk.removeChannelHandler(handlerId);
-  }, [sdk, handlerId, ...deps]);
+  }, [sdk, handlerId]);
 };