@sendbird/uikit-chat-hooks 2.0.3 → 2.2.0

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -1,6 +1,10 @@
 import { useCallback, useRef } from 'react';
 
-import type { SendbirdBaseChannel, SendbirdGroupChannel } from '@sendbird/uikit-utils';
+import type {
+  SendbirdBaseChannel,
+  SendbirdGroupChannel,
+  SendbirdPreviousMessageListQuery,
+} from '@sendbird/uikit-utils';
 import {
   Logger,
   confirmAndMarkAsRead,
@@ -8,11 +12,9 @@ import {
   useAsyncEffect,
   useForceUpdate,
 } from '@sendbird/uikit-utils';
-import type { SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
-import { useActiveGroupChannel } from '../useActiveGroupChannel';
 import { useGroupChannelMessagesReducer } from './reducer';
 
 const createMessageQuery = (
@@ -30,8 +32,6 @@ const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
 export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
   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);
   const forceUpdate = useForceUpdate();
 
   const {
@@ -48,19 +48,19 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     updateRefreshing,
   } = useGroupChannelMessagesReducer(userId, options?.sortComparator);
 
-  const channelMarkAs = async () => {
+  const channelMarkAsRead = async () => {
     try {
       await confirmAndMarkAsRead([channel]);
     } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
+      Logger.warn(`[${HOOK_NAME}/channelMarkAsRead]`, e);
     }
   };
 
   const init = useCallback(
     async (uid?: string) => {
       if (uid) {
-        queryRef.current = createMessageQuery(activeChannel, options?.queryCreator);
-        channelMarkAs().catch();
+        queryRef.current = createMessageQuery(channel, options?.queryCreator);
+        channelMarkAsRead().catch();
         if (queryRef.current?.hasNext) {
           const list = await queryRef.current?.load();
           updateMessages(list, true, sdk.currentUser.userId);
@@ -68,12 +68,11 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
         updateNextMessages([], true, sdk.currentUser.userId);
       }
     },
-    [sdk, activeChannel.url, options?.queryCreator],
+    [sdk, channel.url, options?.queryCreator],
   );
 
   const channelUpdater = (channel: SendbirdBaseChannel) => {
-    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
-      setActiveChannel(channel);
+    if (channel.isGroupChannel() && !isDifferentChannel(channel, channel)) {
       forceUpdate();
     }
   };
@@ -81,16 +80,16 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   useChannelHandler(sdk, HOOK_NAME, {
     // Messages
     onMessageReceived(eventChannel, message) {
-      if (isDifferentChannel(activeChannel, eventChannel)) return;
-      channelMarkAs();
+      if (isDifferentChannel(channel, eventChannel)) return;
+      channelMarkAsRead();
       updateNextMessages([message], false, sdk.currentUser.userId);
     },
     onMessageUpdated(eventChannel, message) {
-      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      if (isDifferentChannel(channel, eventChannel)) return;
       updateMessages([message], false, sdk.currentUser.userId);
     },
     onMessageDeleted(eventChannel, messageId) {
-      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      if (isDifferentChannel(channel, eventChannel)) return;
       deleteMessages([messageId], []);
       deleteNextMessages([messageId], []);
     },
@@ -100,11 +99,11 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     onChannelUnfrozen: channelUpdater,
     onChannelHidden: channelUpdater,
     onChannelMemberCountChanged(channels) {
-      const channel = channels.find((c) => !isDifferentChannel(c, activeChannel));
-      if (channel) channelUpdater(channel);
+      const foundChannel = channels.find((c) => !isDifferentChannel(c, channel));
+      if (foundChannel) channelUpdater(foundChannel);
     },
     onChannelDeleted(channelUrl: string) {
-      if (activeChannel.url === channelUrl) options?.onChannelDeleted?.();
+      if (channel.url === channelUrl) options?.onChannelDeleted?.();
     },
     // Users
     onOperatorUpdated: channelUpdater,
@@ -116,7 +115,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     onUserMuted: channelUpdater,
     onUserUnmuted: channelUpdater,
     onUserBanned(eventChannel, bannedUser) {
-      if (isDifferentChannel(activeChannel, eventChannel)) return;
+      if (isDifferentChannel(channel, eventChannel)) return;
 
       if (bannedUser.userId === sdk.currentUser.userId) {
         options?.onChannelDeleted?.();
@@ -155,7 +154,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        activeChannel
+        channel
           .sendUserMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isUserMessage()) {
@@ -174,12 +173,12 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
           });
       });
     },
-    [activeChannel],
+    [channel],
   );
   const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        activeChannel
+        channel
           .sendFileMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isFileMessage()) {
@@ -198,48 +197,46 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
           });
       });
     },
-    [activeChannel],
+    [channel],
   );
   const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
     async (messageId, params) => {
-      const updatedMessage = await activeChannel.updateUserMessage(messageId, params);
+      const updatedMessage = await channel.updateUserMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
-    [activeChannel],
+    [channel],
   );
   const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
     async (messageId, params) => {
-      const updatedMessage = await activeChannel.updateFileMessage(messageId, params);
+      const updatedMessage = await channel.updateFileMessage(messageId, params);
       updateMessages([updatedMessage], false, sdk.currentUser.userId);
       return updatedMessage;
     },
-    [activeChannel],
+    [channel],
   );
   const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useCallback(
     async (failedMessage) => {
       const message = await (() => {
-        if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
-        // FIXME: v4 bugs
-        // @ts-ignore
-        if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
+        if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
+        if (failedMessage.isFileMessage()) return channel.resendFileMessage(failedMessage);
         return null;
       })();
 
       if (message) updateNextMessages([message], false, sdk.currentUser.userId);
     },
-    [activeChannel],
+    [channel],
   );
   const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useCallback(
     async (message) => {
       if (message.sendingStatus === 'succeeded') {
-        if (message.isUserMessage()) await activeChannel.deleteMessage(message);
-        if (message.isFileMessage()) await activeChannel.deleteMessage(message);
+        if (message.isUserMessage()) await channel.deleteMessage(message);
+        if (message.isFileMessage()) await channel.deleteMessage(message);
       } else {
         deleteMessages([message.messageId], [message.reqId]);
       }
     },
-    [activeChannel],
+    [channel],
   );
 
   return {
@@ -257,6 +254,5 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
     updateFileMessage,
     resendMessage,
     deleteMessage,
-    activeChannel,
   };
 };

package/src/common/useAppFeatures.ts

@@ -3,9 +3,9 @@ import { ApplicationAttributes, PremiumFeatures, SendbirdChatSDK } from '@sendbi
 export const useAppFeatures = (sdk: SendbirdChatSDK) => {
   const { premiumFeatureList = [], applicationAttributes = [] } = sdk.appInfo ?? {};
   return {
-    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)),
+    deliveryReceiptEnabled: premiumFeatureList.includes(PremiumFeatures.delivery_receipt),
+    broadcastChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_broadcast_channel),
+    superGroupChannelEnabled: applicationAttributes.includes(ApplicationAttributes.allow_super_group_channel),
+    reactionEnabled: applicationAttributes.includes(ApplicationAttributes.reactions),
   };
 };

package/src/common/useMessageOutgoingStatus.ts

@@ -40,6 +40,8 @@ export const useMessageOutgoingStatus = (
     if (message.sendingStatus === 'failed') return 'FAILED';
   }
 
+  if (channel.isBroadcast || channel.isSuper) return 'NONE';
+
   if (channel.getUnreadMemberCount(message) === 0) return 'READ';
 
   if (features.deliveryReceiptEnabled) {

package/src/common/useTotalUnreadChannelCount.ts

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedBadgeCount, useAsyncEffect } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect } from '@sendbird/uikit-utils';
 import { useUniqId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
@@ -24,5 +24,5 @@ export const useTotalUnreadChannelCount = (sdk: SendbirdChatSDK, params?: Params
     },
   });
 
-  return truncatedBadgeCount(unreadChannelCount, params?.maxCount);
+  return truncatedCount(unreadChannelCount, params?.maxCount);
 };

package/src/common/useTotalUnreadMessageCount.ts

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { SuperChannelFilter, TotalUnreadMessageCountParams } from '@sendbird/chat/groupChannel';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedBadgeCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
 
@@ -28,5 +28,5 @@ export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, options?: Optio
     onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
   });
 
-  return truncatedBadgeCount(unreadMessageCount, options?.maxCount);
+  return truncatedCount(unreadMessageCount, options?.maxCount);
 };

package/src/common/useUserList.ts

@@ -1,11 +1,14 @@
-import { useCallback, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
-import type { Optional, SendbirdChatSDK, SendbirdUser } from '@sendbird/uikit-utils';
-import { Logger, SBErrorCode, SBErrorMessage, useAsyncEffect } from '@sendbird/uikit-utils';
+import type { Optional, SendbirdChatSDK, SendbirdUser, UserStruct } from '@sendbird/uikit-utils';
+import { Logger, SBErrorCode, SBErrorMessage, useAsyncEffect, useFreshCallback } from '@sendbird/uikit-utils';
 
 import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
 
-const createUserQuery = <User>(sdk: SendbirdChatSDK, queryCreator?: UseUserListOptions<User>['queryCreator']) => {
+const createUserQuery = <User extends UserStruct>(
+  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>;
@@ -34,7 +37,11 @@ const createUserQuery = <User>(sdk: SendbirdChatSDK, queryCreator?: UseUserListO
  * */
 export const useUserList = <
   Options extends UseUserListOptions<QueriedUser>,
-  QueriedUser = Options['queryCreator'] extends Optional<() => CustomQueryInterface<infer User>> ? User : SendbirdUser,
+  QueriedUser extends UserStruct = Options['queryCreator'] extends Optional<
+    () => CustomQueryInterface<infer User extends UserStruct>
+  >
+    ? User
+    : SendbirdUser,
 >(
   sdk: SendbirdChatSDK,
   options?: Options,
@@ -51,22 +58,39 @@ export const useUserList = <
     return users;
   }, [users, options?.sortComparator]);
 
+  const upsertUser = useFreshCallback((user: QueriedUser) => {
+    setUsers(([...draft]) => {
+      const userIdx = draft.findIndex((it) => it.userId === user.userId);
+      if (userIdx > -1) draft[userIdx] = user;
+      else draft.push(user);
+      return draft;
+    });
+  });
+
+  const deleteUser = useFreshCallback((userId: QueriedUser['userId']) => {
+    setUsers(([...draft]) => {
+      const userIdx = draft.findIndex((it) => it.userId === userId);
+      if (userIdx > -1) draft.splice(userIdx, 1);
+      return draft;
+    });
+  });
+
   const updateUsers = (users: QueriedUser[], clearPrev: boolean) => {
     if (clearPrev) setUsers(users);
     else setUsers((prev) => prev.concat(users));
   };
 
-  const init = useCallback(async () => {
+  const init = useFreshCallback(async () => {
     query.current = createUserQuery<QueriedUser>(sdk, options?.queryCreator);
     if (query.current?.hasNext) {
-      const users = await query.current?.next().catch((err) => {
-        Logger.error(error);
-        if (err.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
-        throw error;
+      const users = await query.current?.next().catch((e) => {
+        Logger.error(e);
+        if (e.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        throw e;
       });
       updateUsers(users, true);
     }
-  }, [sdk, options?.queryCreator]);
+  });
 
   useAsyncEffect(async () => {
     setLoading(true);
@@ -78,9 +102,9 @@ export const useUserList = <
     } finally {
       setLoading(false);
     }
-  }, [init]);
+  }, []);
 
-  const refresh = useCallback(async () => {
+  const refresh = useFreshCallback(async () => {
     setRefreshing(true);
     setError(null);
     try {
@@ -90,23 +114,25 @@ export const useUserList = <
     } finally {
       setRefreshing(false);
     }
-  }, [init]);
+  });
 
-  const next = useCallback(async () => {
+  const next = useFreshCallback(async () => {
     if (query.current && query.current?.hasNext) {
-      const nextUsers = await query.current.next().catch((err) => {
-        Logger.error(error);
-        if (err.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
-        throw error;
+      const nextUsers = await query.current.next().catch((e) => {
+        Logger.error(e);
+        if (e.code === SBErrorCode.NON_AUTHORIZED) Logger.warn(SBErrorMessage.ACL);
+        throw e;
       });
       updateUsers(nextUsers, false);
     }
-  }, []);
+  });
 
   return {
     loading,
     error,
     users: sortedUsers,
+    upsertUser,
+    deleteUser,
     next,
     refreshing,
     refresh,

package/src/index.ts

@@ -1,6 +1,7 @@
 export { useGroupChannelList } from './channel/useGroupChannelList';
 export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
 export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
+export { useGroupChannel } from './channel/useGroupChannel';
 
 export { useAppFeatures } from './common/useAppFeatures';
 export { useMessageOutgoingStatus } from './common/useMessageOutgoingStatus';
@@ -19,8 +20,8 @@ export type {
   UseGroupChannelList,
   UseGroupChannelListOptions,
   UseGroupChannelMessages,
-  UseUserListOptions,
   UseGroupChannelMessagesOptions,
+  UseUserListOptions,
   UseUserListReturn,
   CustomQueryInterface,
   CustomBidirectionalQueryInterface,

package/src/types.ts

@@ -11,6 +11,7 @@ import type {
   SendbirdPreviousMessageListQuery,
   SendbirdUserMessage,
   SendbirdUserMessageCreateParams,
+  UserStruct,
 } from '@sendbird/uikit-utils';
 
 export interface CustomQueryInterface<Data> {
@@ -178,11 +179,6 @@ export interface UseGroupChannelMessages {
      * @return {Promise<void>}
      * */
     deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
-
-    /**
-     * Activated channel
-     * */
-    activeChannel: SendbirdGroupChannel;
   };
 }
 
@@ -198,7 +194,7 @@ export type UseGroupChannelMessagesOptions = {
  * @interface UseUserListReturn
  * @description interface for user list hook return value
  * */
-export interface UseUserListReturn<User> {
+export interface UseUserListReturn<User extends UserStruct> {
   /**
    * Loading state, only available on first render
    * */
@@ -225,6 +221,16 @@ export interface UseUserListReturn<User> {
    * */
   users: User[];
 
+  /**
+   * Update or Insert user to list
+   * */
+  upsertUser: (user: User) => void;
+
+  /**
+   * Delete user from list
+   * */
+  deleteUser: (userId: User['userId']) => void;
+
   /**
    * Fetch next users to state
    * @return {Promise<void>}
@@ -232,7 +238,7 @@ export interface UseUserListReturn<User> {
   next: () => Promise<void>;
 }
 
-export type UseUserListOptions<User> = {
+export type UseUserListOptions<User extends UserStruct> = {
   sortComparator?: (a: User, b: User) => number;
   queryCreator?: () => CustomQueryInterface<User>;
 };