@sendbird/uikit-chat-hooks 2.0.3 → 2.2.0

package/lib/typescript/src/channel/useGroupChannel.d.ts

@@ -0,0 +1,6 @@
+import { SendbirdChatSDK } from '@sendbird/uikit-utils';
+export declare const useGroupChannel: (sdk: SendbirdChatSDK, channelUrl: string) => {
+    channel: import("@sendbird/chat/groupChannel").GroupChannel | undefined;
+    loading: boolean;
+    error: unknown;
+};

package/lib/typescript/src/channel/useGroupChannelList/reducer.d.ts

@@ -1,5 +1,5 @@
 import type { SendbirdChannel } from '@sendbird/uikit-utils';
-declare type Order = 'latest_last_message' | 'chronological' | 'channel_name_alphabetical' | 'metadata_value_alphabetical';
+type Order = 'latest_last_message' | 'chronological' | 'channel_name_alphabetical' | 'metadata_value_alphabetical';
 export declare const useGroupChannelListReducer: (order?: Order) => {
     updateLoading: (status: boolean) => void;
     updateRefreshing: (status: boolean) => void;

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

@@ -1,3 +1,3 @@
 import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
-export declare type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' | 'DELIVERED' | 'UNREAD' | 'READ';
+export type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' | 'DELIVERED' | 'UNREAD' | 'READ';
 export declare const useMessageOutgoingStatus: (sdk: SendbirdChatSDK, channel: SendbirdGroupChannel, message?: SendbirdMessage | null) => SBUOutgoingStatus;

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

@@ -1,5 +1,5 @@
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-declare type Params = {
+type Params = {
     maxCount?: number;
 };
 export declare const useTotalUnreadChannelCount: (sdk: SendbirdChatSDK, params?: Params) => string;

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

@@ -1,6 +1,6 @@
 import { TotalUnreadMessageCountParams } from '@sendbird/chat/groupChannel';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-declare type Options = {
+type Options = {
     params?: TotalUnreadMessageCountParams;
     maxCount?: number;
 };

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

@@ -1,4 +1,4 @@
-import type { Optional, SendbirdChatSDK } from '@sendbird/uikit-utils';
+import type { Optional, SendbirdChatSDK, UserStruct } from '@sendbird/uikit-utils';
 import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from '../types';
 /**
  * Get user list from query.
@@ -21,4 +21,4 @@ import type { CustomQueryInterface, UseUserListOptions, UseUserListReturn } from
  *  })
  * ```
  * */
-export declare const useUserList: <Options extends UseUserListOptions<QueriedUser>, QueriedUser = Options["queryCreator"] extends Optional<() => CustomQueryInterface<infer User>> ? User : import("@sendbird/chat").User>(sdk: SendbirdChatSDK, options?: Options | undefined) => UseUserListReturn<QueriedUser>;
+export declare const useUserList: <Options extends UseUserListOptions<QueriedUser>, QueriedUser extends UserStruct = Options["queryCreator"] extends Optional<() => CustomQueryInterface<infer User extends UserStruct>> ? User : import("@sendbird/chat").User>(sdk: SendbirdChatSDK, options?: Options | undefined) => UseUserListReturn<QueriedUser>;

package/lib/typescript/src/index.d.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';
 export { usePushTrigger } from './common/usePushTrigger';
@@ -11,4 +12,4 @@ export { useChannelHandler } from './handler/useChannelHandler';
 export { useConnectionHandler } from './handler/useConnectionHandler';
 export { useUserEventHandler } from './handler/useUserEventHandler';
 export { CustomQuery } from './model/CustomQuery';
-export type { UseGroupChannelList, UseGroupChannelListOptions, UseGroupChannelMessages, UseUserListOptions, UseGroupChannelMessagesOptions, UseUserListReturn, CustomQueryInterface, CustomBidirectionalQueryInterface, } from './types';
+export type { UseGroupChannelList, UseGroupChannelListOptions, UseGroupChannelMessages, UseGroupChannelMessagesOptions, UseUserListOptions, UseUserListReturn, CustomQueryInterface, CustomBidirectionalQueryInterface, } from './types';

package/lib/typescript/src/model/CustomQuery.d.ts

@@ -1,5 +1,5 @@
 import type { CustomQueryInterface } from '../types';
-declare type ConstructorParams<T> = {
+type ConstructorParams<T> = {
     next: () => Promise<T[]>;
     isLoading: () => boolean;
     hasNext: () => boolean;

package/lib/typescript/src/types.d.ts

@@ -1,4 +1,4 @@
-import type { SendbirdChatSDK, SendbirdError, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdGroupChannel, SendbirdGroupChannelCollection, SendbirdGroupChannelListQuery, SendbirdMessage, SendbirdMessageCollection, SendbirdPreviousMessageListQuery, SendbirdUserMessage, SendbirdUserMessageCreateParams } from '@sendbird/uikit-utils';
+import type { SendbirdChatSDK, SendbirdError, SendbirdFileMessage, SendbirdFileMessageCreateParams, SendbirdGroupChannel, SendbirdGroupChannelCollection, SendbirdGroupChannelListQuery, SendbirdMessage, SendbirdMessageCollection, SendbirdPreviousMessageListQuery, SendbirdUserMessage, SendbirdUserMessageCreateParams, UserStruct } from '@sendbird/uikit-utils';
 export interface CustomQueryInterface<Data> {
     isLoading: boolean;
     next: () => Promise<Data[]>;
@@ -41,7 +41,7 @@ export interface UseGroupChannelList {
         next: () => Promise<void>;
     };
 }
-export declare type UseGroupChannelListOptions = {
+export type UseGroupChannelListOptions = {
     queryCreator?: () => SendbirdGroupChannelListQuery;
     collectionCreator?: () => SendbirdGroupChannelCollection;
     enableCollectionWithoutLocalCache?: boolean;
@@ -139,13 +139,9 @@ export interface UseGroupChannelMessages {
          * @return {Promise<void>}
          * */
         deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
-        /**
-         * Activated channel
-         * */
-        activeChannel: SendbirdGroupChannel;
     };
 }
-export declare type UseGroupChannelMessagesOptions = {
+export type UseGroupChannelMessagesOptions = {
     sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;
     queryCreator?: () => SendbirdPreviousMessageListQuery;
     collectionCreator?: () => SendbirdMessageCollection;
@@ -156,7 +152,7 @@ export declare 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
      * */
@@ -178,13 +174,21 @@ export interface UseUserListReturn<User> {
      * Get users state
      * */
     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>}
      * */
     next: () => Promise<void>;
 }
-export declare type UseUserListOptions<User> = {
+export type UseUserListOptions<User extends UserStruct> = {
     sortComparator?: (a: User, b: User) => number;
     queryCreator?: () => CustomQueryInterface<User>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-chat-hooks",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "React hooks that built with SendbirdChat SDK",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -38,13 +38,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.0.3"
+    "@sendbird/uikit-utils": "2.2.0"
   },
   "devDependencies": {
     "@types/react": "*",
     "react": "^16.13.1",
     "react-native-builder-bob": "^0.18.0",
-    "typescript": "^4.1.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
     "@sendbird/chat": "^4.0.13",
@@ -69,5 +69,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-chat-hooks"
   },
-  "gitHead": "e3a34ae962741ffd2b647a466cf97e38f5006379"
+  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
 }

package/src/channel/useGroupChannel.ts

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+import { SendbirdChatSDK, SendbirdGroupChannel, useAsyncEffect } from '@sendbird/uikit-utils';
+
+export const useGroupChannel = (sdk: SendbirdChatSDK, channelUrl: string) => {
+  const [channel, setChannel] = useState<SendbirdGroupChannel>();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<unknown>();
+
+  useAsyncEffect(async () => {
+    try {
+      setChannel(await sdk.groupChannel.getChannel(channelUrl));
+    } catch (e) {
+      setError(e);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  return { channel, loading, error };
+};

package/src/channel/useGroupChannelMessages/reducer.ts

@@ -37,12 +37,12 @@ const defaultReducer = ({ ...draft }: State, action: Action) => {
     }
     case 'update_messages':
     case 'update_next_messages': {
-      const key = action.type === 'update_messages' ? 'messageMap' : ('nextMessageMap' as const);
-      const messageMap = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
+      const key = action.type === 'update_messages' ? 'messageMap' : 'nextMessageMap';
+      const receivedMessagesAsMap = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
       if (action.value.clearPrev) {
-        draft[key] = messageMap;
+        draft[key] = receivedMessagesAsMap;
       } else {
-        draft[key] = { ...draft[key], ...messageMap };
+        draft[key] = { ...draft[key], ...receivedMessagesAsMap };
 
         // NOTE: Replace pending message to succeeded message
         action.value.messages

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,
@@ -46,17 +48,18 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     updateRefreshing,
   } = useGroupChannelMessagesReducer(userId, options?.sortComparator);
 
-  const channelMarkAs = async () => {
+  const channelMarkAsRead = async (source?: MessageEventSource) => {
     try {
-      await confirmAndMarkAsRead([activeChannel]);
+      switch (source) {
+        case MessageEventSource.EVENT_MESSAGE_RECEIVED:
+        case MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
+        case MessageEventSource.SYNC_MESSAGE_FILL:
+        case undefined:
+          await confirmAndMarkAsRead([channel]);
+          break;
+      }
     } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
-    }
-  };
-
-  const updateChannel = (channel: SendbirdChannel) => {
-    if (channel.isGroupChannel() && !isDifferentChannel(channel, activeChannel)) {
-      forceUpdate();
+      Logger.warn(`[${HOOK_NAME}/channelMarkAsRead]`, e);
     }
   };
 
@@ -65,36 +68,44 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
       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();
+        channelMarkAsRead();
 
         collectionRef.current?.setMessageCollectionHandler({
           onMessagesAdded: (_, __, messages) => {
-            switch (_.source) {
-              case MessageEventSource.EVENT_MESSAGE_RECEIVED:
-              case MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
-              case MessageEventSource.SYNC_MESSAGE_FILL:
-                channelMarkAs();
-                break;
-            }
+            channelMarkAsRead(_.source);
             updateNextMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
           },
-          onMessagesUpdated: (_, channel, messages) => {
-            updateMessages(messages, false, sdk.currentUser.userId);
-            updateChannel(channel);
+          onMessagesUpdated: (_, __, messages) => {
+            channelMarkAsRead(_.source);
+
+            // NOTE: admin message is not added via onMessagesAdded handler, not checked yet is this a bug.
+            if (_.source === MessageEventSource.EVENT_MESSAGE_RECEIVED) {
+              const nextMessageIds = nextMessages.map((it) => it.messageId);
+              const nonAddedMessagesFromReceivedEvent = messages.filter(
+                (it) => nextMessageIds.indexOf(it.messageId) === -1,
+              );
+              updateNextMessages(nonAddedMessagesFromReceivedEvent, false, sdk.currentUser.userId);
+            }
+
+            // 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 +118,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 +140,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 +156,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 +169,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 +220,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 +244,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 +304,5 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
     updateFileMessage,
     resendMessage,
     deleteMessage,
-    activeChannel,
   };
 };