@sendbird/uikit-chat-hooks 2.0.2 → 2.1.0

package/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts

@@ -2,16 +2,21 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { MessageCollectionInitPolicy, MessageEventSource, MessageFilter } from '@sendbird/chat/groupChannel';
 import type {
-  SendbirdChannel,
+  SendbirdBaseMessage,
   SendbirdFileMessage,
   SendbirdGroupChannel,
   SendbirdMessageCollection,
 } from '@sendbird/uikit-utils';
-import { Logger, confirmAndMarkAsRead, isDifferentChannel, useForceUpdate } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  confirmAndMarkAsRead,
+  isDifferentChannel,
+  useForceUpdate,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
-import { useActiveGroupChannel } from '../useActiveGroupChannel';
 import { useGroupChannelMessagesReducer } from './reducer';
 
 const createMessageCollection = (
@@ -26,11 +31,8 @@ const createMessageCollection = (
 const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
 
 export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const collectionRef = useRef<SendbirdMessageCollection>();
-
-  // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update af
-  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
   const forceUpdate = useForceUpdate();
+  const collectionRef = useRef<SendbirdMessageCollection>();
 
   const {
     loading,
@@ -48,24 +50,18 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
 
   const channelMarkAs = async () => {
     try {
-      await confirmAndMarkAsRead([activeChannel]);
+      await confirmAndMarkAsRead([channel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
   };
 
-  const updateChannel = (channel: SendbirdChannel) => {
-    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
-      forceUpdate();
-    }
-  };
-
   const init = useCallback(
     async (uid?: string, callback?: () => void) => {
       if (collectionRef.current) collectionRef.current?.dispose();
 
       if (uid) {
-        collectionRef.current = createMessageCollection(activeChannel, options?.collectionCreator);
+        collectionRef.current = createMessageCollection(channel, options?.collectionCreator);
         updateNextMessages([], true, sdk.currentUser.userId);
         channelMarkAs();
 
@@ -79,22 +75,25 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
                 break;
             }
             updateNextMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
           },
-          onMessagesUpdated: (_, channel, messages) => {
-            updateMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
+          onMessagesUpdated: (_, __, messages) => {
+            // NOTE: v4 MESSAGE_RECEIVED is called twice from onMessagesAdded and onMessagesUpdated when receiving new message.
+            //  This is not intended behavior but not bugs.
+            if (_.source !== MessageEventSource.EVENT_MESSAGE_RECEIVED) {
+              updateMessages(messages, false, sdk.currentUser.userId);
+            }
           },
-          onMessagesDeleted: (_, channel, messageIds) => {
+          onMessagesDeleted: (_, __, messageIds) => {
             deleteMessages(messageIds, []);
             deleteNextMessages(messageIds, []);
-            updateChannel(channel);
           },
           onChannelDeleted: () => {
             options?.onChannelDeleted?.();
           },
-          onChannelUpdated: (_, channel) => {
-            updateChannel(channel);
+          onChannelUpdated: (_, eventChannel) => {
+            if (eventChannel.isGroupChannel() && !isDifferentChannel(eventChannel, channel)) {
+              forceUpdate();
+            }
           },
           onHugeGapDetected: () => {
             init(uid);
@@ -107,16 +106,18 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
             if (err) sdk.isCacheEnabled && Logger.error(`[${HOOK_NAME}/onCacheResult]`, err);
             else {
               Logger.debug(`[${HOOK_NAME}/onCacheResult]`, 'message length:', messages.length);
+
               updateMessages(messages, true, sdk.currentUser.userId);
               updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
               updateMessages(collectionRef.current?.failedMessages ?? [], false, sdk.currentUser.userId);
-              if (messages?.length) callback?.();
             }
+            callback?.();
           })
           .onApiResult((err, messages) => {
             if (err) Logger.warn(`[${HOOK_NAME}/onApiResult]`, err);
             else {
               Logger.debug(`[${HOOK_NAME}/onApiResult]`, 'message length:', messages.length);
+
               updateMessages(messages, true, sdk.currentUser.userId);
               if (sdk.isCacheEnabled) {
                 updateMessages(collectionRef.current?.pendingMessages ?? [], false, sdk.currentUser.userId);
@@ -127,16 +128,15 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
           });
       }
     },
-    [sdk, activeChannel.url, options?.collectionCreator],
+    [sdk, channel.url, options?.collectionCreator],
   );
 
   useChannelHandler(sdk, HOOK_NAME, {
     onUserBanned(channel, bannedUser) {
-      if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
+      if (channel.isGroupChannel() && !isDifferentChannel(channel, channel)) {
         if (bannedUser.userId === sdk.currentUser.userId) {
           options?.onChannelDeleted?.();
         } else {
-          setActiveChannel(channel);
           forceUpdate();
         }
       }
@@ -144,7 +144,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
   });
 
   useEffect(() => {
-    // NOTE: Cache read is heavy synchronous task, and it prevents smooth ui transition
+    // NOTE: Cache read is heavy task, and it prevents smooth ui transition
     setTimeout(async () => {
       updateLoading(true);
       init(userId, () => updateLoading(false));
@@ -157,41 +157,44 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     };
   }, []);
 
-  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useCallback(async () => {
+  const refresh: ReturnType<UseGroupChannelMessages>['refresh'] = useFreshCallback(async () => {
     updateRefreshing(true);
     init(userId, () => updateRefreshing(false));
-  }, [init, userId]);
+  });
 
-  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useCallback(async () => {
+  const prev: ReturnType<UseGroupChannelMessages>['prev'] = useFreshCallback(async () => {
     if (collectionRef.current && collectionRef.current?.hasPrevious) {
       try {
         const list = await collectionRef.current?.loadPrevious();
         updateMessages(list, false, sdk.currentUser.userId);
       } catch {}
     }
-  }, []);
+  });
+
+  const next: ReturnType<UseGroupChannelMessages>['next'] = useFreshCallback(async () => {
+    const messageCandidates: SendbirdBaseMessage[] = [];
 
-  const next: ReturnType<UseGroupChannelMessages>['next'] = useCallback(async () => {
-    const list = [];
     if (collectionRef.current && collectionRef.current?.hasNext) {
       try {
         const fetchedList = await collectionRef.current?.loadNext();
-        list.push(...fetchedList);
+        messageCandidates.push(...fetchedList);
       } catch {}
     }
+
     if (nextMessages.length > 0) {
-      list.push(...nextMessages);
+      messageCandidates.push(...nextMessages);
     }
-    if (list.length > 0) {
-      updateMessages(list, false, sdk.currentUser.userId);
+
+    if (messageCandidates.length > 0) {
+      updateMessages(messageCandidates, false, sdk.currentUser.userId);
       updateNextMessages([], true, sdk.currentUser.userId);
     }
-  }, [nextMessages.length]);
+  });
 
-  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useCallback(
+  const sendUserMessage: ReturnType<UseGroupChannelMessages>['sendUserMessage'] = useFreshCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        activeChannel
+        channel
           .sendUserMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isUserMessage()) {
@@ -205,17 +208,17 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
               resolve(sentMessage);
             }
           })
-          .onFailed((err) => {
+          .onFailed((err, _failedMessage) => {
+            // updateMessages([failedMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
     },
-    [activeChannel],
   );
-  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useCallback(
+  const sendFileMessage: ReturnType<UseGroupChannelMessages>['sendFileMessage'] = useFreshCallback(
     (params, onPending) => {
       return new Promise((resolve, reject) => {
-        activeChannel
+        channel
           .sendFileMessage(params)
           .onPending((pendingMessage) => {
             if (pendingMessage.isFileMessage()) {
@@ -229,58 +232,50 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
               resolve(sentMessage as SendbirdFileMessage);
             }
           })
-          .onFailed((err) => {
+          .onFailed((err, _failedMessage) => {
+            // updateMessages([failedMessage], false, sdk.currentUser.userId);
             reject(err);
           });
       });
     },
-    [activeChannel],
   );
-  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useCallback(
+  const updateUserMessage: ReturnType<UseGroupChannelMessages>['updateUserMessage'] = useFreshCallback(
     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],
   );
-  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useCallback(
+  const updateFileMessage: ReturnType<UseGroupChannelMessages>['updateFileMessage'] = useFreshCallback(
     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],
   );
-  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useCallback(
+  const resendMessage: ReturnType<UseGroupChannelMessages>['resendMessage'] = useFreshCallback(
     async (failedMessage) => {
-      const message = await (() => {
-        if (failedMessage.isUserMessage()) return activeChannel.resendUserMessage(failedMessage);
-        // FIXME: v4 bugs
-        // @ts-ignore
-        if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(failedMessage);
+      const resentMessage = await (() => {
+        if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
+        if (failedMessage.isFileMessage()) return channel.resendFileMessage(failedMessage);
         return null;
       })();
 
-      if (message) updateMessages([message], false, sdk.currentUser.userId);
+      if (resentMessage) updateMessages([resentMessage], false, sdk.currentUser.userId);
     },
-    [activeChannel],
   );
-  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);
-      } else {
-        try {
-          await collectionRef.current?.removeFailedMessage(message.reqId);
-        } finally {
-          deleteMessages([message.messageId], [message.reqId]);
-        }
+  const deleteMessage: ReturnType<UseGroupChannelMessages>['deleteMessage'] = useFreshCallback(async (message) => {
+    if (message.sendingStatus === 'succeeded') {
+      if (message.isUserMessage()) await channel.deleteMessage(message);
+      if (message.isFileMessage()) await channel.deleteMessage(message);
+    } else {
+      try {
+        await collectionRef.current?.removeFailedMessage(message.reqId);
+      } finally {
+        deleteMessages([message.messageId], [message.reqId]);
       }
-    },
-    [activeChannel],
-  );
+    }
+  });
 
   return {
     loading,
@@ -297,6 +292,5 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     updateFileMessage,
     resendMessage,
     deleteMessage,
-    activeChannel,
   };
 };

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 {
@@ -59,7 +59,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
   const init = useCallback(
     async (uid?: string) => {
       if (uid) {
-        queryRef.current = createMessageQuery(activeChannel, options?.queryCreator);
+        queryRef.current = createMessageQuery(channel, options?.queryCreator);
         channelMarkAs().catch();
         if (queryRef.current?.hasNext) {
           const list = await queryRef.current?.load();
@@ -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;
+      if (isDifferentChannel(channel, eventChannel)) return;
       channelMarkAs();
       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,48 @@ 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);
+        if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
         // FIXME: v4 bugs
         // @ts-ignore
-        if (failedMessage.isFileMessage()) return activeChannel.resendFileMessage(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 +256,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

@@ -33,7 +33,6 @@ export const useMessageOutgoingStatus = (
     },
   });
 
-  if (channel.isBroadcast || channel.isSuper) return 'NONE';
   if (!message) return 'NONE';
 
   if ('sendingStatus' in message) {
@@ -41,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/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 { Logger, SBErrorCode, SBErrorMessage, useAsyncEffect, useFreshCallback } from '@sendbird/uikit-utils';
 
-import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
+import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn, UserStruct } 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,12 +58,29 @@ 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) => {
@@ -66,7 +90,7 @@ export const useUserList = <
       });
       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,9 +114,9 @@ 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);
@@ -101,12 +125,14 @@ export const useUserList = <
       });
       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,9 @@ export type {
   UseGroupChannelList,
   UseGroupChannelListOptions,
   UseGroupChannelMessages,
-  UseUserListOptions,
   UseGroupChannelMessagesOptions,
+  UserStruct,
+  UseUserListOptions,
   UseUserListReturn,
   CustomQueryInterface,
   CustomBidirectionalQueryInterface,