@sendbird/uikit-chat-hooks 2.3.0 → 2.4.0

package/src/channel/useOpenChannelMessages/reducer.ts

@@ -0,0 +1,125 @@
+import { useReducer } from 'react';
+
+import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import { arrayToMapWithGetter, getMessageUniqId, isMyMessage, isNewMessage, useIIFE } from '@sendbird/uikit-utils';
+
+import type { UseOpenChannelMessagesOptions } from '../../types';
+
+type Action =
+  | {
+      type: 'update_loading' | 'update_refreshing';
+      value: { status: boolean };
+    }
+  | {
+      type: 'update_messages' | 'update_next_messages';
+      value: { messages: SendbirdBaseMessage[]; clearPrev: boolean; currentUserId?: string };
+    }
+  | {
+      type: 'delete_messages' | 'delete_next_messages';
+      value: { messageIds: number[]; reqIds: string[] };
+    };
+
+type State = {
+  loading: boolean;
+  refreshing: boolean;
+  messageMap: Record<string, SendbirdBaseMessage>;
+  nextMessageMap: Record<string, SendbirdBaseMessage>;
+};
+
+const defaultReducer = ({ ...draft }: State, action: Action) => {
+  switch (action.type) {
+    case 'update_refreshing':
+    case 'update_loading': {
+      const key = action.type === 'update_loading' ? 'loading' : 'refreshing';
+      draft[key] = action.value.status;
+
+      return draft;
+    }
+    case 'update_messages':
+    case 'update_next_messages': {
+      const key = action.type === 'update_messages' ? 'messageMap' : 'nextMessageMap';
+      const receivedMessagesAsMap = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
+      if (action.value.clearPrev) {
+        draft[key] = receivedMessagesAsMap;
+      } else {
+        draft[key] = { ...draft[key], ...receivedMessagesAsMap };
+
+        // NOTE: Replace pending message to succeeded message
+        action.value.messages
+          .filter((m): m is SendbirdUserMessage | SendbirdFileMessage => {
+            return (
+              (m.isFileMessage() || m.isUserMessage()) &&
+              Boolean(draft[key][m.reqId]) &&
+              m.sendingStatus === 'succeeded' &&
+              isMyMessage(m, action.value.currentUserId)
+            );
+          })
+          .forEach((m) => delete draft[key][m.reqId]);
+      }
+
+      return draft;
+    }
+    case 'delete_messages':
+    case 'delete_next_messages': {
+      const key = action.type === 'delete_messages' ? 'messageMap' : 'nextMessageMap';
+      draft[key] = { ...draft[key] };
+      action.value.messageIds.forEach((msgId) => delete draft[key][msgId]);
+      action.value.reqIds.forEach((reqId) => delete draft[key][reqId]);
+
+      return draft;
+    }
+  }
+};
+
+export const useOpenChannelMessagesReducer = (
+  userId?: string,
+  sortComparator?: UseOpenChannelMessagesOptions['sortComparator'],
+) => {
+  const [{ loading, refreshing, messageMap, nextMessageMap }, dispatch] = useReducer(defaultReducer, {
+    loading: true,
+    refreshing: false,
+    messageMap: {},
+    nextMessageMap: {},
+  });
+
+  const updateMessages = (messages: SendbirdBaseMessage[], clearPrev: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_messages', value: { messages, clearPrev, currentUserId } });
+  };
+  const deleteMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_messages', value: { messageIds, reqIds } });
+  };
+  const updateNextMessages = (messages: SendbirdBaseMessage[], clearPrev: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_next_messages', value: { messages, clearPrev, currentUserId } });
+  };
+  const deleteNextMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_next_messages', value: { messageIds, reqIds } });
+  };
+  const updateLoading = (status: boolean) => {
+    dispatch({ type: 'update_loading', value: { status } });
+  };
+  const updateRefreshing = (status: boolean) => {
+    dispatch({ type: 'update_refreshing', value: { status } });
+  };
+
+  const messages = useIIFE(() => {
+    if (sortComparator) return Object.values(messageMap).sort(sortComparator);
+    return Object.values(messageMap);
+  });
+  const nextMessages = Object.values(nextMessageMap);
+  const newMessagesFromMembers = nextMessages.filter((msg) => isNewMessage(msg, userId));
+
+  return {
+    updateLoading,
+    updateRefreshing,
+    updateMessages,
+    updateNextMessages,
+    deleteMessages,
+    deleteNextMessages,
+
+    loading,
+    refreshing,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+  };
+};

package/src/channel/useOpenChannelMessages/useOpenChannelMessagesWithQuery.ts

@@ -0,0 +1,247 @@
+import { useRef } from 'react';
+
+import type { SendbirdBaseChannel, SendbirdOpenChannel, SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
+import {
+  NOOP,
+  isDifferentChannel,
+  useAsyncEffect,
+  useForceUpdate,
+  useFreshCallback,
+  useUniqHandlerId,
+} from '@sendbird/uikit-utils';
+
+import { useChannelHandler } from '../../handler/useChannelHandler';
+import type { UseOpenChannelMessages, UseOpenChannelMessagesOptions } from '../../types';
+import { useOpenChannelMessagesReducer } from './reducer';
+
+const createMessageQuery = (channel: SendbirdOpenChannel, creator?: UseOpenChannelMessagesOptions['queryCreator']) => {
+  if (creator) return creator();
+  return channel.createPreviousMessageListQuery({
+    limit: 100,
+    reverse: true,
+  });
+};
+
+export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, channel, userId, options) => {
+  const queryRef = useRef<SendbirdPreviousMessageListQuery>();
+  const forceUpdate = useForceUpdate();
+  const handlerId = useUniqHandlerId('useOpenChannelMessagesWithQuery');
+
+  const {
+    loading,
+    refreshing,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    updateMessages,
+    updateNextMessages,
+    deleteNextMessages,
+    deleteMessages,
+    updateLoading,
+    updateRefreshing,
+  } = useOpenChannelMessagesReducer(userId, options?.sortComparator);
+
+  const init = useFreshCallback(async (uid?: string) => {
+    if (uid) {
+      queryRef.current = createMessageQuery(channel, options?.queryCreator);
+      if (queryRef.current?.hasNext) {
+        const list = await queryRef.current?.load();
+
+        updateMessages(list, true, sdk.currentUser.userId);
+      }
+      updateNextMessages([], true, sdk.currentUser.userId);
+    }
+  });
+
+  const channelUpdater = (channel: SendbirdBaseChannel) => {
+    if (channel.isOpenChannel() && !isDifferentChannel(channel, channel)) {
+      forceUpdate();
+    }
+  };
+
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      // Messages
+      onMessageReceived(eventChannel, message) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        updateNextMessages([message], false, sdk.currentUser.userId);
+      },
+      onMessageUpdated(eventChannel, message) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        updateMessages([message], false, sdk.currentUser.userId);
+      },
+      onMessageDeleted(eventChannel, messageId) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        deleteMessages([messageId], []);
+        deleteNextMessages([messageId], []);
+      },
+      // Channels
+      onChannelChanged: channelUpdater,
+      onChannelFrozen: channelUpdater,
+      onChannelUnfrozen: channelUpdater,
+      onChannelParticipantCountChanged(eventChannel) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        channelUpdater(eventChannel);
+      },
+      onChannelDeleted(channelUrl, type) {
+        if (channel.url === channelUrl && type === 'open') {
+          options?.onChannelDeleted?.();
+        }
+      },
+      // Users
+      onOperatorUpdated: channelUpdater,
+      onUserUnbanned: channelUpdater,
+      onUserMuted: channelUpdater,
+      onUserUnmuted: channelUpdater,
+      onUserBanned(eventChannel, bannedUser) {
+        if (isDifferentChannel(channel, eventChannel)) return;
+
+        if (bannedUser.userId === sdk.currentUser.userId) {
+          options?.onChannelDeleted?.();
+        } else {
+          channelUpdater(eventChannel);
+        }
+      },
+    },
+    'open',
+  );
+
+  useAsyncEffect(async () => {
+    updateLoading(true);
+
+    try {
+      await channel.enter();
+      await init(userId);
+    } catch (error) {
+      options?.onError?.(error);
+      options?.onChannelDeleted?.();
+    } finally {
+      updateLoading(false);
+    }
+
+    return () => {
+      channel.exit().catch(NOOP);
+    };
+  }, [init, userId]);
+
+  const refresh: ReturnType<UseOpenChannelMessages>['refresh'] = useFreshCallback(async () => {
+    updateRefreshing(true);
+    await init(userId);
+    updateRefreshing(false);
+  });
+
+  const prev: ReturnType<UseOpenChannelMessages>['prev'] = useFreshCallback(async () => {
+    if (queryRef.current && queryRef.current?.hasNext) {
+      const list = await queryRef.current?.load();
+      updateMessages(list, false, sdk.currentUser.userId);
+    }
+  });
+
+  const next: ReturnType<UseOpenChannelMessages>['next'] = useFreshCallback(async () => {
+    if (nextMessages.length > 0) {
+      updateMessages(nextMessages, false, sdk.currentUser.userId);
+      updateNextMessages([], true, sdk.currentUser.userId);
+    }
+  });
+
+  const sendUserMessage: ReturnType<UseOpenChannelMessages>['sendUserMessage'] = useFreshCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        channel
+          .sendUserMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isUserMessage()) {
+              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              onPending?.(pendingMessage);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isUserMessage()) {
+              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage);
+            }
+          })
+          .onFailed((err, sentMessage) => {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            reject(err);
+          });
+      });
+    },
+  );
+
+  const sendFileMessage: ReturnType<UseOpenChannelMessages>['sendFileMessage'] = useFreshCallback(
+    (params, onPending) => {
+      return new Promise((resolve, reject) => {
+        channel
+          .sendFileMessage(params)
+          .onPending((pendingMessage) => {
+            if (pendingMessage.isFileMessage()) {
+              updateNextMessages([pendingMessage], false, sdk.currentUser.userId);
+              onPending?.(pendingMessage);
+            }
+          })
+          .onSucceeded((sentMessage) => {
+            if (sentMessage.isFileMessage()) {
+              updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+              resolve(sentMessage);
+            }
+          })
+          .onFailed((err, sentMessage) => {
+            updateNextMessages([sentMessage], false, sdk.currentUser.userId);
+            reject(err);
+          });
+      });
+    },
+  );
+
+  const updateUserMessage: ReturnType<UseOpenChannelMessages>['updateUserMessage'] = useFreshCallback(
+    async (messageId, params) => {
+      const updatedMessage = await channel.updateUserMessage(messageId, params);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+  );
+  const updateFileMessage: ReturnType<UseOpenChannelMessages>['updateFileMessage'] = useFreshCallback(
+    async (messageId, params) => {
+      const updatedMessage = await channel.updateFileMessage(messageId, params);
+      updateMessages([updatedMessage], false, sdk.currentUser.userId);
+      return updatedMessage;
+    },
+  );
+  const resendMessage: ReturnType<UseOpenChannelMessages>['resendMessage'] = useFreshCallback(async (failedMessage) => {
+    const message = await (() => {
+      if (failedMessage.isUserMessage()) return channel.resendUserMessage(failedMessage);
+      if (failedMessage.isFileMessage()) return channel.resendFileMessage(failedMessage);
+      return null;
+    })();
+
+    if (message) updateNextMessages([message], false, sdk.currentUser.userId);
+  });
+  const deleteMessage: ReturnType<UseOpenChannelMessages>['deleteMessage'] = useFreshCallback(async (message) => {
+    if (message.sendingStatus === 'succeeded') {
+      if (message.isUserMessage()) await channel.deleteMessage(message);
+      if (message.isFileMessage()) await channel.deleteMessage(message);
+    } else {
+      deleteMessages([message.messageId], [message.reqId]);
+    }
+  });
+
+  return {
+    loading,
+    refreshing,
+    refresh,
+    messages,
+    nextMessages,
+    newMessagesFromMembers,
+    next,
+    prev,
+    sendUserMessage,
+    sendFileMessage,
+    updateUserMessage,
+    updateFileMessage,
+    resendMessage,
+    deleteMessage,
+  };
+};

package/src/common/useMessageOutgoingStatus.ts

@@ -1,11 +1,9 @@
 import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, isMyMessage, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, isMyMessage, useForceUpdate, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useChannelHandler } from '../handler/useChannelHandler';
 import { useAppFeatures } from './useAppFeatures';
 
-const HOOK_NAME = 'useMessageOutgoingStatus';
-
 export type SBUOutgoingStatus = 'NONE' | 'PENDING' | 'FAILED' | 'UNDELIVERED' | 'DELIVERED' | 'UNREAD' | 'READ';
 
 export const useMessageOutgoingStatus = (
@@ -16,9 +14,9 @@ export const useMessageOutgoingStatus = (
   const features = useAppFeatures(sdk);
   const forceUpdate = useForceUpdate();
   const currentUser = sdk.currentUser;
+  const handlerId = useUniqHandlerId('useMessageOutgoingStatus');
 
-  const uniqId = useUniqId(HOOK_NAME);
-  useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+  useChannelHandler(sdk, handlerId, {
     onUndeliveredMemberStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!isMyMessage(message, currentUser?.userId)) return;

package/src/common/useTotalUnreadChannelCount.ts

@@ -1,24 +1,22 @@
 import { useState } from 'react';
 
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-import { truncatedCount, useAsyncEffect } from '@sendbird/uikit-utils';
-import { useUniqId } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
 
 type Params = {
   maxCount?: number;
 };
-const HOOK_NAME = 'useTotalUnreadChannelCount';
 export const useTotalUnreadChannelCount = (sdk: SendbirdChatSDK, params?: Params) => {
-  const id = useUniqId(HOOK_NAME);
+  const handlerId = useUniqHandlerId('useTotalUnreadChannelCount');
   const [unreadChannelCount, setUnreadChannelCount] = useState(0);
 
   useAsyncEffect(async () => {
     setUnreadChannelCount(await sdk.groupChannel.getTotalUnreadChannelCount());
   }, [sdk]);
 
-  useUserEventHandler(sdk, HOOK_NAME + id, {
+  useUserEventHandler(sdk, handlerId, {
     onTotalUnreadMessageCountUpdated: async () => {
       setUnreadChannelCount(await sdk.groupChannel.getTotalUnreadChannelCount());
     },

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 { truncatedCount, useAsyncEffect, useUniqId } from '@sendbird/uikit-utils';
+import { truncatedCount, useAsyncEffect, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { useUserEventHandler } from '../handler/useUserEventHandler';
 
@@ -11,9 +11,8 @@ type Options = {
   maxCount?: number;
 };
 
-const HOOK_NAME = 'useTotalUnreadMessageCount';
 export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, options?: Options) => {
-  const id = useUniqId(HOOK_NAME);
+  const handlerId = useUniqHandlerId('useTotalUnreadMessageCount');
   const [unreadMessageCount, setUnreadMessageCount] = useState(0);
 
   useAsyncEffect(async () => {
@@ -24,7 +23,7 @@ export const useTotalUnreadMessageCount = (sdk: SendbirdChatSDK, options?: Optio
     setUnreadMessageCount(unreadCount);
   }, [sdk, options?.params?.superChannelFilter, options?.params?.channelCustomTypesFilter]);
 
-  useUserEventHandler(sdk, `${HOOK_NAME}_${id}`, {
+  useUserEventHandler(sdk, handlerId, {
     onTotalUnreadMessageCountUpdated: (totalCount: number) => setUnreadMessageCount(totalCount),
   });
 

package/src/common/useUserList.ts

@@ -99,6 +99,7 @@ export const useUserList = <
       await init();
     } catch (e) {
       setError(e);
+      setUsers([]);
     } finally {
       setLoading(false);
     }
@@ -111,6 +112,7 @@ export const useUserList = <
       await init();
     } catch (e) {
       setError(e);
+      setUsers([]);
     } finally {
       setRefreshing(false);
     }

package/src/handler/useChannelHandler.ts

@@ -1,12 +1,27 @@
 import { useEffect, useLayoutEffect, useRef } from 'react';
 
 import { GroupChannelHandler } from '@sendbird/chat/groupChannel';
+import { OpenChannelHandler } from '@sendbird/chat/openChannel';
 import { Logger, SendbirdChatSDK } from '@sendbird/uikit-utils';
 
-export const useChannelHandler = (
+type ChannelType = 'open' | 'group';
+
+function getChannelHandler(type: ChannelType) {
+  switch (type) {
+    case 'open': {
+      return new OpenChannelHandler();
+    }
+    case 'group':
+    default: {
+      return new GroupChannelHandler();
+    }
+  }
+}
+export const useChannelHandler = <T extends ChannelType = 'group'>(
   sdk: SendbirdChatSDK,
   handlerId: string,
-  hookHandler: Partial<GroupChannelHandler>,
+  hookHandler: Partial<T extends 'group' ? GroupChannelHandler : OpenChannelHandler>,
+  type = 'group' as T,
 ) => {
   const handlerRef = useRef(hookHandler);
   useLayoutEffect(() => {
@@ -16,7 +31,7 @@ export const useChannelHandler = (
   useEffect(() => {
     Logger.debug('[useChannelHandler] hook called by', handlerId);
 
-    const handler = new GroupChannelHandler();
+    const handler = getChannelHandler(type);
     const handlerKeys = Object.keys(handler) as (keyof typeof handler)[];
     handlerKeys.forEach((key) => {
       handler[key] = (...args: unknown[]) => {
@@ -25,7 +40,18 @@ export const useChannelHandler = (
       };
     });
 
-    sdk.groupChannel.addGroupChannelHandler(handlerId, handler);
-    return () => sdk.groupChannel.removeGroupChannelHandler(handlerId);
+    if (type === 'group') {
+      sdk.groupChannel.addGroupChannelHandler(handlerId, handler);
+    } else if (type === 'open') {
+      sdk.openChannel.addOpenChannelHandler(handlerId, handler);
+    }
+
+    return () => {
+      if (type === 'group') {
+        sdk.groupChannel.removeGroupChannelHandler(handlerId);
+      } else if (type === 'open') {
+        sdk.openChannel.removeOpenChannelHandler(handlerId);
+      }
+    };
   }, [sdk, handlerId]);
 };

package/src/index.ts

@@ -1,8 +1,11 @@
 export { useGroupChannelList } from './channel/useGroupChannelList';
 export { useGroupChannelMessages } from './channel/useGroupChannelMessages';
-export { useActiveGroupChannel } from './channel/useActiveGroupChannel';
 export { useGroupChannel } from './channel/useGroupChannel';
 
+export { useOpenChannelList } from './channel/useOpenChannelList';
+export { useOpenChannelMessages } from './channel/useOpenChannelMessages';
+export { useOpenChannel } from './channel/useOpenChannel';
+
 export { useAppFeatures } from './common/useAppFeatures';
 export { useMessageOutgoingStatus } from './common/useMessageOutgoingStatus';
 export { usePushTrigger } from './common/usePushTrigger';
@@ -25,4 +28,8 @@ export type {
   UseUserListReturn,
   CustomQueryInterface,
   CustomBidirectionalQueryInterface,
+  UseOpenChannelMessagesOptions,
+  UseOpenChannelListOptions,
+  UseOpenChannelList,
+  UseOpenChannelMessages,
 } from './types';