@sendbird/uikit-chat-hooks 2.4.2 → 2.5.0-rc.0

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

@@ -49,9 +49,9 @@ export type UseGroupChannelListOptions = {
 /**
  * @interface UseGroupChannelMessages
  * @description interface for group channel messages hook
- * - Receive new messages from other users -> append to state(nextMessages)
+ * - Receive new messages from other users & should count new messages -> append to state(newMessages)
  * - onTopReached -> prev() -> fetch prev messages and append to state(messages)
- * - onBottomReached -> next() -> nextMessages append to state(messages)
+ * - onBottomReached -> next() -> fetch next messages and append to state(messages)
  * */
 export interface UseGroupChannelMessages {
     (sdk: SendbirdChatSDK, channel: SendbirdGroupChannel, userId?: string, options?: UseGroupChannelMessagesOptions): {
@@ -81,24 +81,35 @@ export interface UseGroupChannelMessages {
          * */
         prev: () => Promise<void>;
         /**
-         * Get messages, this state is for temporary data before render
-         * For example, if a user receives a new messages while searching for an old message
-         * for this case, new messages will be included here.
+         * Check if there are more prev messages to fetch
+         * @return {boolean}
          * */
-        nextMessages: SendbirdMessage[];
+        hasPrev: () => boolean;
+        /**
+         * Fetch next messages to state
+         * @return {Promise<void>}
+         * */
+        next: () => Promise<void>;
+        /**
+         * Check if there are more next messages to fetch
+         * @return {boolean}
+         * */
+        hasNext: () => boolean;
         /**
-         * Get new messages from nextMessages
          * A new message means a message that meets the below conditions
          * - Not admin message
          * - Not updated message
          * - Not current user's message
          * */
-        newMessagesFromMembers: SendbirdMessage[];
+        newMessages: SendbirdMessage[];
         /**
-         * Fetch next messages to state
-         * @return {Promise<void>}
+         * reset message list with starting point
          * */
-        next: () => Promise<void>;
+        resetWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+        /**
+         * Reset new messages
+         * */
+        resetNewMessages: () => void;
         /**
          * Send file message
          * @param params file message params
@@ -139,14 +150,21 @@ export interface UseGroupChannelMessages {
          * @return {Promise<void>}
          * */
         deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+        /** @deprecated Please use `newMessages` instead **/
+        newMessagesFromMembers: SendbirdMessage[];
+        /** @deprecated Please use `newMessages` instead **/
+        nextMessages: SendbirdMessage[];
     };
 }
 export type UseGroupChannelMessagesOptions = {
     sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;
     queryCreator?: () => SendbirdPreviousMessageListQuery;
-    collectionCreator?: () => SendbirdMessageCollection;
+    collectionCreator?: (options?: Pick<UseGroupChannelMessagesOptions, 'startingPoint'>) => SendbirdMessageCollection;
     enableCollectionWithoutLocalCache?: boolean;
     onChannelDeleted?: () => void;
+    shouldCountNewMessages?: () => boolean;
+    startingPoint?: number;
+    onMessagesReceived?: (messages: SendbirdMessage[]) => void;
 };
 /**
  * @interface UseOpenChannelList
@@ -188,9 +206,9 @@ export type UseOpenChannelListOptions = {
 /**
  * @interface UseOpenChannelMessages
  * @description interface for open channel messages hook
- * - Receive new messages from other users -> append to state(nextMessages)
+ * - Receive new messages from other users & should count new messages -> append to state(newMessages)
  * - onTopReached -> prev() -> fetch prev messages and append to state(messages)
- * - onBottomReached -> next() -> nextMessages append to state(messages)
+ * - onBottomReached -> noop
  * */
 export interface UseOpenChannelMessages {
     (sdk: SendbirdChatSDK, channel: SendbirdOpenChannel, userId?: string, options?: UseOpenChannelMessagesOptions): {
@@ -220,24 +238,31 @@ export interface UseOpenChannelMessages {
          * */
         prev: () => Promise<void>;
         /**
-         * Get messages, this state is for temporary data before render
-         * For example, if a user receives a new messages while searching for an old message
-         * for this case, new messages will be included here.
+         * Check if there are more prev messages to fetch
+         * @return {boolean}
          * */
-        nextMessages: SendbirdMessage[];
+        hasPrev: () => boolean;
         /**
-         * Get new messages from nextMessages
          * A new message means a message that meets the below conditions
          * - Not admin message
          * - Not updated message
          * - Not current user's message
          * */
-        newMessagesFromMembers: SendbirdMessage[];
+        newMessages: SendbirdMessage[];
+        /**
+         * Reset new messages
+         * */
+        resetNewMessages: () => void;
         /**
          * Fetch next messages to state
          * @return {Promise<void>}
          * */
         next: () => Promise<void>;
+        /**
+         * Check if there are more next messages to fetch
+         * @return {boolean}
+         * */
+        hasNext: () => boolean;
         /**
          * Send file message
          * @param params file message params
@@ -278,6 +303,10 @@ export interface UseOpenChannelMessages {
          * @return {Promise<void>}
          * */
         deleteMessage: (message: SendbirdFileMessage | SendbirdUserMessage) => Promise<void>;
+        /** @deprecated Please use `newMessages` instead **/
+        newMessagesFromMembers: SendbirdMessage[];
+        /** @deprecated Please use `newMessages` instead **/
+        nextMessages: SendbirdMessage[];
     };
 }
 export type UseOpenChannelMessagesOptions = {
@@ -285,6 +314,8 @@ export type UseOpenChannelMessagesOptions = {
     queryCreator?: () => SendbirdPreviousMessageListQuery;
     onChannelDeleted?: () => void;
     onError?: (error?: unknown) => void;
+    shouldCountNewMessages?: () => boolean;
+    onMessagesReceived?: (messages: SendbirdMessage[]) => void;
 };
 /**
  * @interface UseUserListReturn

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-chat-hooks",
-  "version": "2.4.2",
+  "version": "2.5.0-rc.0",
   "description": "A set of React hooks for integrating Sendbird chat functionality into your React app.",
   "keywords": [
     "sendbird",
@@ -43,10 +43,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-utils": "2.4.2"
+    "@sendbird/uikit-utils": "2.5.0-rc.0"
   },
   "devDependencies": {
-    "@sendbird/uikit-testing-tools": "2.4.2",
+    "@sendbird/uikit-testing-tools": "2.5.0-rc.0",
     "@types/react": "*",
     "react": "17.0.2",
     "react-native-builder-bob": "^0.18.0",
@@ -74,6 +74,5 @@
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-chat-hooks"
-  },
-  "gitHead": "ae9e60edc60cdd4f6e9b0e4019e84584e807bc2c"
+  }
 }

package/src/channel/useChannelMessagesReducer.ts

@@ -0,0 +1,143 @@
+import { useReducer } from 'react';
+
+import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import {
+  SendbirdMessage,
+  arrayToMapWithGetter,
+  getMessageUniqId,
+  isNewMessage,
+  isSendableMessage,
+  useIIFE,
+} from '@sendbird/uikit-utils';
+
+type Options = {
+  sortComparator?: (a: SendbirdMessage, b: SendbirdMessage) => number;
+};
+
+type Action =
+  | {
+      type: 'update_loading' | 'update_refreshing';
+      value: { status: boolean };
+    }
+  | {
+      type: 'update_messages' | 'update_new_messages';
+      value: { messages: SendbirdBaseMessage[]; clearBeforeAction: boolean; currentUserId?: string };
+    }
+  | {
+      type: 'delete_messages' | 'delete_new_messages';
+      value: { messageIds: number[]; reqIds: string[] };
+    };
+
+type State = {
+  loading: boolean;
+  refreshing: boolean;
+  messageMap: Record<string, SendbirdBaseMessage>;
+  newMessageMap: Record<string, SendbirdBaseMessage>;
+};
+
+const defaultReducer = ({ ...draft }: State, action: Action) => {
+  switch (action.type) {
+    case 'update_refreshing': {
+      draft['refreshing'] = action.value.status;
+      return draft;
+    }
+    case 'update_loading': {
+      draft['loading'] = action.value.status;
+      return draft;
+    }
+    case 'update_messages': {
+      if (action.value.clearBeforeAction) {
+        draft['messageMap'] = arrayToMapWithGetter(action.value.messages, getMessageUniqId);
+      } else {
+        // Remove existing messages before update for prevent duplicate display
+        const messageKeys = action.value.messages
+          .map((it) => (isSendableMessage(it) ? [it.messageId, it.reqId] : [it.messageId]))
+          .flat();
+        messageKeys.forEach((key) => delete draft['messageMap'][key]);
+
+        draft['messageMap'] = {
+          ...draft['messageMap'],
+          ...arrayToMapWithGetter(action.value.messages, getMessageUniqId),
+        };
+      }
+
+      return draft;
+    }
+    case 'update_new_messages': {
+      const newMessages = action.value.messages.filter((it) => isNewMessage(it, action.value.currentUserId));
+
+      if (action.value.clearBeforeAction) {
+        draft['newMessageMap'] = arrayToMapWithGetter(newMessages, getMessageUniqId);
+      } else {
+        // Remove existing messages before update for prevent duplicate display
+        const messageKeys = newMessages.map((it) => it.messageId);
+        messageKeys.forEach((key) => delete draft['newMessageMap'][key]);
+
+        draft['newMessageMap'] = {
+          ...draft['newMessageMap'],
+          ...arrayToMapWithGetter(newMessages, getMessageUniqId),
+        };
+      }
+
+      return draft;
+    }
+    case 'delete_messages':
+    case 'delete_new_messages': {
+      const key = action.type === 'delete_messages' ? 'messageMap' : 'newMessageMap';
+      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 useChannelMessagesReducer = (sortComparator?: Options['sortComparator']) => {
+  const [{ loading, refreshing, messageMap, newMessageMap }, dispatch] = useReducer(defaultReducer, {
+    loading: true,
+    refreshing: false,
+    messageMap: {},
+    newMessageMap: {},
+  });
+
+  const updateMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_messages', value: { messages, clearBeforeAction, currentUserId } });
+  };
+  const deleteMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_messages', value: { messageIds, reqIds } });
+  };
+  const updateNewMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {
+    dispatch({ type: 'update_new_messages', value: { messages, clearBeforeAction, currentUserId } });
+  };
+  const deleteNewMessages = (messageIds: number[], reqIds: string[]) => {
+    dispatch({ type: 'delete_new_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 newMessages = Object.values(newMessageMap);
+
+  return {
+    updateLoading,
+    updateRefreshing,
+    updateMessages,
+    deleteMessages,
+
+    loading,
+    refreshing,
+    messages,
+
+    newMessages,
+    updateNewMessages,
+    deleteNewMessages,
+  };
+};