@sendbird/uikit-chat-hooks 2.0.0 → 2.0.2

package/lib/typescript/src/common/useUserList.d.ts

@@ -1,4 +1,4 @@
-import { Optional, SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type { Optional, SendbirdChatSDK } from '@sendbird/uikit-utils';
 import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
 /**
  * Get user list from query.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-chat-hooks",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "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.0.0"
+    "@sendbird/uikit-utils": "2.0.2"
   },
   "devDependencies": {
     "@types/react": "*",
@@ -69,5 +69,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-chat-hooks"
   },
-  "gitHead": "955f7adf0891976d8553d9c3b4c171225c775bc9"
+  "gitHead": "95323825da753f20b931b4a8b7e187cd8dc6284e"
 }

package/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-import { GroupChannelFilter, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
-import type { SendbirdChatSDK, SendbirdGroupChannelCollection } from '@sendbird/uikit-utils';
+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 { useAppFeatures } from '../../common/useAppFeatures';
@@ -37,11 +37,23 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
   const { loading, groupChannels, refreshing, setChannels, deleteChannels, updateRefreshing, updateLoading } =
     useGroupChannelListReducer();
 
-  const updateChannelsAndMarkAsDelivered = (markAsDelivered: boolean) => {
+  const updateChannelsAndMarkAsDelivered = (
+    markAsDelivered: boolean,
+    source?: GroupChannelEventSource,
+    updatedChannels?: SendbirdBaseChannel[],
+  ) => {
     const channels = collectionRef.current?.channels ?? [];
     setChannels(channels, true);
     if (markAsDelivered && deliveryReceiptEnabled) {
-      channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+      switch (source) {
+        case GroupChannelEventSource.EVENT_MESSAGE_RECEIVED:
+        case GroupChannelEventSource.EVENT_MESSAGE_SENT:
+        case GroupChannelEventSource.SYNC_CHANNEL_BACKGROUND:
+        case GroupChannelEventSource.SYNC_CHANNEL_CHANGELOGS:
+        case undefined:
+          confirmAndMarkAsDelivered(updatedChannels ?? channels);
+          break;
+      }
     }
   };
 
@@ -52,11 +64,11 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
       collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);
 
       collectionRef.current?.setGroupChannelCollectionHandler({
-        onChannelsAdded: () => {
-          updateChannelsAndMarkAsDelivered(true);
+        onChannelsAdded: (context, channels) => {
+          updateChannelsAndMarkAsDelivered(true, context.source, channels);
         },
-        onChannelsUpdated: () => {
-          updateChannelsAndMarkAsDelivered(true);
+        onChannelsUpdated: (context, channels) => {
+          updateChannelsAndMarkAsDelivered(true, context.source, channels);
         },
         onChannelsDeleted: () => {
           updateChannelsAndMarkAsDelivered(false);

package/src/channel/useGroupChannelList/useGroupChannelListWithQuery.ts

@@ -43,7 +43,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
 
   const updateChannelsAndMarkAsDelivered = (channels: SendbirdChannel[]) => {
     updateChannels(channels);
-    if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+    if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
   };
 
   const init = useFreshCallback(async (uid?: string) => {
@@ -55,7 +55,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
         const channels = await queryRef.current.next();
 
         setChannels(channels, true);
-        if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+        if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
       }
     }
   });
@@ -67,21 +67,24 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
   }, [init, userId]);
 
   useChannelHandler(sdk, HOOK_NAME, {
-    onChannelChanged: (channel) => updateChannelsAndMarkAsDelivered([channel]),
+    onChannelChanged: (channel) => updateChannels([channel]),
     onChannelFrozen: (channel) => updateChannels([channel]),
     onChannelUnfrozen: (channel) => updateChannels([channel]),
     onChannelMemberCountChanged: (channels) => updateChannels(channels),
     onChannelDeleted: (url) => deleteChannels([url]),
-    onUserJoined: (channel) => updateChannelsAndMarkAsDelivered([channel]),
+    onUserJoined: (channel) => updateChannels([channel]),
     onUserLeft: (channel, user) => {
       const isMe = user.userId === userId;
       if (isMe) deleteChannels([channel.url]);
-      else updateChannelsAndMarkAsDelivered([channel]);
+      else updateChannels([channel]);
     },
     onUserBanned(channel, user) {
       const isMe = user.userId === userId;
       if (isMe) deleteChannels([channel.url]);
-      else updateChannelsAndMarkAsDelivered([channel]);
+      else updateChannels([channel]);
+    },
+    onMessageReceived(channel) {
+      updateChannelsAndMarkAsDelivered([channel]);
     },
   });
 
@@ -95,7 +98,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
     if (queryRef.current?.hasNext) {
       const channels = await queryRef.current.next();
       setChannels(channels, false);
-      if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+      if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
     }
   });
 

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -1,21 +1,14 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { MessageCollectionInitPolicy, MessageFilter } from '@sendbird/chat/groupChannel';
+import { MessageCollectionInitPolicy, MessageEventSource, MessageFilter } from '@sendbird/chat/groupChannel';
 import type {
   SendbirdChannel,
   SendbirdFileMessage,
   SendbirdGroupChannel,
   SendbirdMessageCollection,
 } from '@sendbird/uikit-utils';
-import {
-  Logger,
-  confirmAndMarkAsDelivered,
-  confirmAndMarkAsRead,
-  isDifferentChannel,
-  useForceUpdate,
-} from '@sendbird/uikit-utils';
+import { Logger, confirmAndMarkAsRead, isDifferentChannel, useForceUpdate } from '@sendbird/uikit-utils';
 
-import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
 import { useActiveGroupChannel } from '../useActiveGroupChannel';
@@ -33,8 +26,6 @@ const createMessageCollection = (
 const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
 
 export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
-
   const collectionRef = useRef<SendbirdMessageCollection>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update af
@@ -57,12 +48,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
-    } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
-    }
-    try {
-      await confirmAndMarkAsRead(sdk, [activeChannel]);
+      await confirmAndMarkAsRead([activeChannel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
@@ -84,8 +70,14 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
         channelMarkAs();
 
         collectionRef.current?.setMessageCollectionHandler({
-          onMessagesAdded: (_, channel, messages) => {
-            channelMarkAs();
+          onMessagesAdded: (_, __, messages) => {
+            switch (_.source) {
+              case MessageEventSource.EVENT_MESSAGE_RECEIVED:
+              case MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
+              case MessageEventSource.SYNC_MESSAGE_FILL:
+                channelMarkAs();
+                break;
+            }
             updateNextMessages(messages, false, sdk.currentUser.userId);
             updateChannel(channel);
           },

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -3,7 +3,6 @@ import { useCallback, useRef } from 'react';
 import type { SendbirdBaseChannel, SendbirdGroupChannel } from '@sendbird/uikit-utils';
 import {
   Logger,
-  confirmAndMarkAsDelivered,
   confirmAndMarkAsRead,
   isDifferentChannel,
   useAsyncEffect,
@@ -11,7 +10,6 @@ import {
 } from '@sendbird/uikit-utils';
 import type { SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
 
-import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
 import { useActiveGroupChannel } from '../useActiveGroupChannel';
@@ -30,8 +28,6 @@ const createMessageQuery = (
 
 const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
 export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
-
   const queryRef = useRef<SendbirdPreviousMessageListQuery>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
@@ -54,12 +50,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
-    } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
-    }
-    try {
-      await confirmAndMarkAsRead(sdk, [activeChannel]);
+      await confirmAndMarkAsRead([channel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }

package/src/common/useMessageOutgoingStatus.ts

@@ -33,6 +33,7 @@ export const useMessageOutgoingStatus = (
     },
   });
 
+  if (channel.isBroadcast || channel.isSuper) return 'NONE';
   if (!message) return 'NONE';
 
   if ('sendingStatus' in message) {

package/src/common/useUserList.ts

@@ -1,11 +1,13 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 
-import { Optional, SendbirdChatSDK, SendbirdUser, useAsyncEffect } from '@sendbird/uikit-utils';
+import type { Optional, SendbirdChatSDK, SendbirdUser } from '@sendbird/uikit-utils';
+import { Logger, SBErrorCode, SBErrorMessage, useAsyncEffect } from '@sendbird/uikit-utils';
 
 import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
 
 const createUserQuery = <User>(sdk: SendbirdChatSDK, queryCreator?: UseUserListOptions<User>['queryCreator']) => {
   if (queryCreator) return queryCreator();
+  // In order to use the API, the option must be turned on in the dashboard.
   return sdk.createApplicationUserListQuery() as unknown as CustomQueryInterface<User>;
 };
 
@@ -57,7 +59,11 @@ export const useUserList = <
   const init = useCallback(async () => {
     query.current = createUserQuery<QueriedUser>(sdk, options?.queryCreator);
     if (query.current?.hasNext) {
-      const users = await query.current?.next();
+      const users = await query.current?.next().catch((err) => {
+        Logger.error(error);
+        if (err.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        throw error;
+      });
       updateUsers(users, true);
     }
   }, [sdk, options?.queryCreator]);
@@ -88,7 +94,12 @@ export const useUserList = <
 
   const next = useCallback(async () => {
     if (query.current && query.current?.hasNext) {
-      updateUsers(await query.current?.next(), false);
+      const nextUsers = await query.current.next().catch((err) => {
+        Logger.error(error);
+        if (err.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        throw error;
+      });
+      updateUsers(nextUsers, false);
     }
   }, []);