enhancement: optimize markAs APIs

bang9 · bang9 · commit b0fb3aa86636 · 2022-12-01T12:28:43.000+09:00
diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithCollection.ts
@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-import { GroupChannelFilter, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
-import type { SendbirdChatSDK, SendbirdGroupChannelCollection } from '@sendbird/uikit-utils';
+import { GroupChannelEventSource, GroupChannelFilter, GroupChannelListOrder } from '@sendbird/chat/groupChannel';
+import type { SendbirdBaseChannel, SendbirdChatSDK, SendbirdGroupChannelCollection } from '@sendbird/uikit-utils';
 import { confirmAndMarkAsDelivered, useAsyncEffect, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
 
 import { useAppFeatures } from '../../common/useAppFeatures';
@@ -37,11 +37,23 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
   const { loading, groupChannels, refreshing, setChannels, deleteChannels, updateRefreshing, updateLoading } =
     useGroupChannelListReducer();
 
-  const updateChannelsAndMarkAsDelivered = (markAsDelivered: boolean) => {
+  const updateChannelsAndMarkAsDelivered = (
+    markAsDelivered: boolean,
+    source?: GroupChannelEventSource,
+    updatedChannels?: SendbirdBaseChannel[],
+  ) => {
     const channels = collectionRef.current?.channels ?? [];
     setChannels(channels, true);
     if (markAsDelivered && deliveryReceiptEnabled) {
-      channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+      switch (source) {
+        case GroupChannelEventSource.EVENT_MESSAGE_RECEIVED:
+        case GroupChannelEventSource.EVENT_MESSAGE_SENT:
+        case GroupChannelEventSource.SYNC_CHANNEL_BACKGROUND:
+        case GroupChannelEventSource.SYNC_CHANNEL_CHANGELOGS:
+        case undefined:
+          confirmAndMarkAsDelivered(updatedChannels ?? channels);
+          break;
+      }
     }
   };
 
@@ -52,11 +64,11 @@ export const useGroupChannelListWithCollection: UseGroupChannelList = (sdk, user
       collectionRef.current = createGroupChannelListCollection(sdk, options?.collectionCreator);
 
       collectionRef.current?.setGroupChannelCollectionHandler({
-        onChannelsAdded: () => {
-          updateChannelsAndMarkAsDelivered(true);
+        onChannelsAdded: (context, channels) => {
+          updateChannelsAndMarkAsDelivered(true, context.source, channels);
         },
-        onChannelsUpdated: () => {
-          updateChannelsAndMarkAsDelivered(true);
+        onChannelsUpdated: (context, channels) => {
+          updateChannelsAndMarkAsDelivered(true, context.source, channels);
         },
         onChannelsDeleted: () => {
           updateChannelsAndMarkAsDelivered(false);
diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithQuery.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelList/useGroupChannelListWithQuery.ts
@@ -43,7 +43,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
 
   const updateChannelsAndMarkAsDelivered = (channels: SendbirdChannel[]) => {
     updateChannels(channels);
-    if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+    if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
   };
 
   const init = useFreshCallback(async (uid?: string) => {
@@ -55,7 +55,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
         const channels = await queryRef.current.next();
 
         setChannels(channels, true);
-        if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+        if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
       }
     }
   });
@@ -67,21 +67,24 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
   }, [init, userId]);
 
   useChannelHandler(sdk, HOOK_NAME, {
-    onChannelChanged: (channel) => updateChannelsAndMarkAsDelivered([channel]),
+    onChannelChanged: (channel) => updateChannels([channel]),
     onChannelFrozen: (channel) => updateChannels([channel]),
     onChannelUnfrozen: (channel) => updateChannels([channel]),
     onChannelMemberCountChanged: (channels) => updateChannels(channels),
     onChannelDeleted: (url) => deleteChannels([url]),
-    onUserJoined: (channel) => updateChannelsAndMarkAsDelivered([channel]),
+    onUserJoined: (channel) => updateChannels([channel]),
     onUserLeft: (channel, user) => {
       const isMe = user.userId === userId;
       if (isMe) deleteChannels([channel.url]);
-      else updateChannelsAndMarkAsDelivered([channel]);
+      else updateChannels([channel]);
     },
     onUserBanned(channel, user) {
       const isMe = user.userId === userId;
       if (isMe) deleteChannels([channel.url]);
-      else updateChannelsAndMarkAsDelivered([channel]);
+      else updateChannels([channel]);
+    },
+    onMessageReceived(channel) {
+      updateChannelsAndMarkAsDelivered([channel]);
     },
   });
 
@@ -95,7 +98,7 @@ export const useGroupChannelListWithQuery: UseGroupChannelList = (sdk, userId, o
     if (queryRef.current?.hasNext) {
       const channels = await queryRef.current.next();
       setChannels(channels, false);
-      if (deliveryReceiptEnabled) channels.forEach((channel) => confirmAndMarkAsDelivered(sdk, channel));
+      if (deliveryReceiptEnabled) confirmAndMarkAsDelivered(channels);
     }
   });
 
diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithCollection.ts
@@ -1,21 +1,14 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { MessageCollectionInitPolicy, MessageFilter } from '@sendbird/chat/groupChannel';
+import { MessageCollectionInitPolicy, MessageEventSource, MessageFilter } from '@sendbird/chat/groupChannel';
 import type {
   SendbirdChannel,
   SendbirdFileMessage,
   SendbirdGroupChannel,
   SendbirdMessageCollection,
 } from '@sendbird/uikit-utils';
-import {
-  Logger,
-  confirmAndMarkAsDelivered,
-  confirmAndMarkAsRead,
-  isDifferentChannel,
-  useForceUpdate,
-} from '@sendbird/uikit-utils';
+import { Logger, confirmAndMarkAsRead, isDifferentChannel, useForceUpdate } from '@sendbird/uikit-utils';
 
-import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
 import { useActiveGroupChannel } from '../useActiveGroupChannel';
@@ -33,8 +26,6 @@ const createMessageCollection = (
 const HOOK_NAME = 'useGroupChannelMessagesWithCollection';
 
 export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
-
   const collectionRef = useRef<SendbirdMessageCollection>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update af
@@ -57,12 +48,7 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
-    } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
-    }
-    try {
-      await confirmAndMarkAsRead(sdk, [activeChannel]);
+      await confirmAndMarkAsRead([activeChannel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
@@ -84,8 +70,14 @@ export const useGroupChannelMessagesWithCollection: UseGroupChannelMessages = (s
         channelMarkAs();
 
         collectionRef.current?.setMessageCollectionHandler({
-          onMessagesAdded: (_, channel, messages) => {
-            channelMarkAs();
+          onMessagesAdded: (_, __, messages) => {
+            switch (_.source) {
+              case MessageEventSource.EVENT_MESSAGE_RECEIVED:
+              case MessageEventSource.EVENT_MESSAGE_SENT_SUCCESS:
+              case MessageEventSource.SYNC_MESSAGE_FILL:
+                channelMarkAs();
+                break;
+            }
             updateNextMessages(messages, false, sdk.currentUser.userId);
             updateChannel(channel);
           },
diff --git a/packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts b/packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts
@@ -3,15 +3,13 @@ import { useCallback, useRef } from 'react';
 import type { SendbirdBaseChannel, SendbirdGroupChannel } from '@sendbird/uikit-utils';
 import {
   Logger,
-  confirmAndMarkAsDelivered,
   confirmAndMarkAsRead,
   isDifferentChannel,
   useAsyncEffect,
   useForceUpdate,
 } from '@sendbird/uikit-utils';
 import type { SendbirdPreviousMessageListQuery } from '@sendbird/uikit-utils';
 
-import { useAppFeatures } from '../../common/useAppFeatures';
 import { useChannelHandler } from '../../handler/useChannelHandler';
 import type { UseGroupChannelMessages, UseGroupChannelMessagesOptions } from '../../types';
 import { useActiveGroupChannel } from '../useActiveGroupChannel';
@@ -30,8 +28,6 @@ const createMessageQuery = (
 
 const HOOK_NAME = 'useGroupChannelMessagesWithQuery';
 export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, channel, userId, options) => {
-  const { deliveryReceiptEnabled } = useAppFeatures(sdk);
-
   const queryRef = useRef<SendbirdPreviousMessageListQuery>();
 
   // NOTE: We cannot determine the channel object of Sendbird SDK is stale or not, so force update after setActiveChannel
@@ -54,12 +50,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
 
   const channelMarkAs = async () => {
     try {
-      if (deliveryReceiptEnabled) await confirmAndMarkAsDelivered(sdk, activeChannel);
-    } catch (e) {
-      Logger.warn(`[${HOOK_NAME}/channelMarkAs/Delivered]`, e);
-    }
-    try {
-      await confirmAndMarkAsRead(sdk, [activeChannel]);
+      await confirmAndMarkAsRead([channel]);
     } catch (e) {
       Logger.warn(`[${HOOK_NAME}/channelMarkAs/Read]`, e);
     }
diff --git a/packages/uikit-react-native/src/contexts/SendbirdChat.tsx b/packages/uikit-react-native/src/contexts/SendbirdChat.tsx
@@ -87,7 +87,7 @@ export const SendbirdChatProvider = ({
 
   const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
-      if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered(sdkInstance, channel);
+      if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered([channel]);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
diff --git a/packages/uikit-utils/src/index.ts b/packages/uikit-utils/src/index.ts
@@ -16,6 +16,7 @@ export {
   emailRegex,
   phoneRegex,
 } from './shared/regex';
+export { BufferedRequest } from './shared/bufferedRequest';
 
 export * from './hooks';
 export * from './ui-format/groupChannel';
diff --git a/packages/uikit-utils/src/sendbird/channel.ts b/packages/uikit-utils/src/sendbird/channel.ts
@@ -1,10 +1,5 @@
-import type {
-  SendbirdBaseChannel,
-  SendbirdChannel,
-  SendbirdChatSDK,
-  SendbirdGroupChannel,
-  SendbirdOpenChannel,
-} from '../types';
+import { BufferedRequest } from '../shared/bufferedRequest';
+import type { SendbirdBaseChannel, SendbirdChannel, SendbirdGroupChannel, SendbirdOpenChannel } from '../types';
 
 /**
  * Diff utils for channel
@@ -21,15 +16,16 @@ export const isGroupChannelChatUnavailable = (channel: SendbirdGroupChannel) =>
   return channel.myMutedState === 'muted' || (channel.isFrozen && channel.myRole !== 'operator');
 };
 
-export const confirmAndMarkAsRead = async (sdk: SendbirdChatSDK, channels: SendbirdBaseChannel[]) => {
-  const channelUrls = channels.filter((it) => it.isGroupChannel() && it.unreadMessageCount > 0).map((it) => it.url);
-  await sdk.groupChannel.markAsReadWithChannelUrls(channelUrls);
+export const confirmAndMarkAsRead = async (channels: SendbirdBaseChannel[]) => {
+  channels
+    .filter((it): it is SendbirdGroupChannel => it.isGroupChannel() && it.unreadMessageCount > 0)
+    .forEach((it) => BufferedRequest.markAsRead.push(() => it.markAsRead()));
 };
 
-export const confirmAndMarkAsDelivered = async (sdk: SendbirdChatSDK, channel: SendbirdBaseChannel) => {
-  if (channel.isGroupChannel() && channel.unreadMessageCount > 0) {
-    await sdk.groupChannel.markAsDelivered(channel.url);
-  }
+export const confirmAndMarkAsDelivered = async (channels: SendbirdBaseChannel[]) => {
+  channels
+    .filter((it): it is SendbirdGroupChannel => it.isGroupChannel() && it.unreadMessageCount > 0)
+    .forEach((it) => BufferedRequest.markAsDelivered.push(() => it.markAsDelivered()));
 };
 
 export function isDefaultCoverImage(coverUrl: string) {
diff --git a/packages/uikit-utils/src/shared/bufferedRequest.ts b/packages/uikit-utils/src/shared/bufferedRequest.ts
@@ -0,0 +1,85 @@
+type Func = (...args: unknown[]) => Promise<unknown>;
+type State = 'idle' | 'processing';
+
+let REQ_PER_TIMEOUT = 5;
+let TIMEOUT_MILLS = 1000;
+const SAFE_TIMEOUT_BUFFER = 100;
+
+export class BufferedRequest {
+  public static markAsRead = BufferedRequest.create();
+  public static markAsDelivered = BufferedRequest.create();
+
+  public static get reqPerTimeout() {
+    return REQ_PER_TIMEOUT;
+  }
+  public static set reqPerTimeout(value: number) {
+    REQ_PER_TIMEOUT = value;
+    BufferedRequest.markAsRead = BufferedRequest.create();
+    BufferedRequest.markAsDelivered = BufferedRequest.create();
+  }
+
+  public static get timeoutMills() {
+    return TIMEOUT_MILLS;
+  }
+  public static set timeoutMills(value: number) {
+    TIMEOUT_MILLS = value;
+    BufferedRequest.markAsRead = BufferedRequest.create();
+    BufferedRequest.markAsDelivered = BufferedRequest.create();
+  }
+
+  public static create(reqPerTimeout = REQ_PER_TIMEOUT, timeoutMills = TIMEOUT_MILLS) {
+    const waitQueue: Func[] = [];
+    const nextQueue: Func[] = [];
+
+    let state: State = 'idle';
+    let timeout: NodeJS.Timeout | undefined;
+
+    return {
+      push(func: Func) {
+        waitQueue.push(func);
+        this.invoke();
+      },
+      shift() {
+        if (nextQueue.length < reqPerTimeout) {
+          const nextRemains = Math.min(reqPerTimeout - nextQueue.length, waitQueue.length);
+          for (let n = 0; n < nextRemains; n++) {
+            const func = waitQueue.shift();
+            if (func) nextQueue.push(func);
+          }
+        }
+      },
+      handleIdle() {
+        if (0 < nextQueue.length) {
+          state = 'processing';
+          this.invoke();
+        }
+      },
+      handleProcessing() {
+        if (timeout) return;
+
+        timeout = setTimeout(() => {
+          timeout = undefined;
+          if (0 < nextQueue.length || 0 < waitQueue.length) {
+            this.invoke();
+          } else {
+            state = 'idle';
+          }
+        }, timeoutMills + SAFE_TIMEOUT_BUFFER);
+
+        nextQueue.forEach((func) => func());
+        nextQueue.length = 0;
+      },
+      async invoke() {
+        this.shift();
+
+        if (state === 'idle') {
+          this.handleIdle();
+        }
+
+        if (state === 'processing') {
+          this.handleProcessing();
+        }
+      },
+    };
+  }
+}
