Merge pull request #155 from sendbird/fix/mc-init-timing

chore(CLNP-2051): replaced useGroupChannelMessages

docs-validation/package.json

@@ -15,7 +15,7 @@
     "@react-native-firebase/messaging": "^14.7.0",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.7.0",
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "react": "17.0.2",
     "react-native": "0.67.5",
     "react-native-create-thumbnail": "^1.5.1",

package.json

@@ -98,7 +98,7 @@
     ]
   },
   "resolutions": {
-    "@sendbird/chat": "4.9.10",
+    "@sendbird/chat": "4.10.7",
     "@types/react": "^18",
     "@types/react-native": "^0.67"
   }

packages/uikit-chat-hooks/src/channel/useChannelMessagesReducer.ts

@@ -28,7 +28,7 @@ type Action =
     }
   | {
       type: 'delete_messages' | 'delete_new_messages';
-      value: { messageIds: number[]; reqIds: string[] };
+      value: { messageIds: (string | number)[]; reqIds: string[] };
     };
 
 type State = {
@@ -153,7 +153,7 @@ export const useChannelMessagesReducer = (sortComparator?: Options['sortComparat
   const updateMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {
     dispatch({ type: 'update_messages', value: { messages, clearBeforeAction, currentUserId } });
   };
-  const deleteMessages = (messageIds: number[], reqIds: string[]) => {
+  const deleteMessages = (messageIds: (string | number)[], reqIds: string[]) => {
     dispatch({ type: 'delete_messages', value: { messageIds, reqIds } });
   };
   const updateNewMessages = (messages: SendbirdBaseMessage[], clearBeforeAction: boolean, currentUserId?: string) => {

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/index.ts

@@ -4,6 +4,9 @@ import type { UseGroupChannelMessages } from '../../types';
 import { useGroupChannelMessagesWithCollection } from './useGroupChannelMessagesWithCollection';
 import { useGroupChannelMessagesWithQuery } from './useGroupChannelMessagesWithQuery';
 
+/**
+ * @deprecated This hook is deprecated and will be replaced by the 'uikit-tools' package.
+ * */
 export const useGroupChannelMessages: UseGroupChannelMessages = (sdk, channel, userId, options) => {
   if (sdk.isCacheEnabled || options?.enableCollectionWithoutLocalCache) {
     if (options?.queryCreator) printIgnoredWarning();

packages/uikit-chat-hooks/src/channel/useGroupChannelMessages/useGroupChannelMessagesWithQuery.ts

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 
-import type { PreviousMessageListQueryParams } from '@sendbird/chat/message';
+import type { BaseMessage, PreviousMessageListQueryParams } from '@sendbird/chat/message';
 import type {
   SendbirdBaseChannel,
   SendbirdGroupChannel,
@@ -116,7 +116,7 @@ export const useGroupChannelMessagesWithQuery: UseGroupChannelMessages = (sdk, c
         channelUrl: channel.url,
         channelType: channel.channelType,
       });
-      if (message) updateMessages([message], false, sdk.currentUser?.userId);
+      if (message) updateMessages([message as BaseMessage], false, sdk.currentUser?.userId);
     },
     // Channels
     onChannelChanged: channelUpdater,

packages/uikit-chat-hooks/src/channel/useOpenChannelMessages/useOpenChannelMessagesWithQuery.ts

@@ -75,7 +75,7 @@ export const useOpenChannelMessagesWithQuery: UseOpenChannelMessages = (sdk, cha
       const messageContext = {
         updatedMessages: [] as SendbirdBaseMessage[],
         addedMessages: [] as SendbirdBaseMessage[],
-        deletedMessageIds: [] as number[],
+        deletedMessageIds: [] as (number | string)[],
       };
       const changeLogsContext = {
         hasMore: false,

packages/uikit-chat-hooks/src/types.ts

@@ -73,6 +73,8 @@ export type UseGroupChannelListOptions = {
 };
 
 /**
+ * @deprecated This hook is deprecated and will be replaced by the 'uikit-tools' package.
+ *
  * @interface UseGroupChannelMessages
  * @description interface for group channel messages hook
  * - Receive new messages from other users & should count new messages -> append to state(newMessages)

packages/uikit-react-native/package.json

@@ -61,7 +61,7 @@
   "dependencies": {
     "@sendbird/uikit-chat-hooks": "3.3.0",
     "@sendbird/uikit-react-native-foundation": "3.3.0",
-    "@sendbird/uikit-tools": "0.0.1-alpha.42",
+    "@sendbird/uikit-tools": "0.0.1-alpha.57",
     "@sendbird/uikit-utils": "3.3.0"
   },
   "devDependencies": {
@@ -107,7 +107,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",

packages/uikit-react-native/src/components/ChannelMessageList/index.tsx

@@ -59,7 +59,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
   onEditMessage: (message: HandleableMessage) => void;
   onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
-  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
   onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 

packages/uikit-react-native/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { Pressable, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type { BaseMessage } from '@sendbird/chat/message';
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
@@ -24,12 +25,12 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
-        const msg = await sdk.message.getMessage({
+        const msg = (await sdk.message.getMessage({
           includeReactions: true,
           messageId: message.messageId,
           channelUrl: message.channelUrl,
           channelType: message.channelType,
-        });
+        })) as null | BaseMessage;
         if (msg) updateReactionFocusedItem({ message: msg });
       }
     },

packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -34,7 +34,9 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
         lazyScrollToIndex({ index: foundMessageIndex, animated: true, timeout });
       } else {
         if (props.channel.messageOffsetTimestamp <= createdAt) {
-          if (focusAnimated) props.onUpdateSearchItem({ startingPoint: createdAt });
+          if (focusAnimated) {
+            props.onUpdateSearchItem({ startingPoint: createdAt });
+          }
           props.onResetMessageListWithStartingPoint(createdAt);
         } else {
           return false;
@@ -44,15 +46,14 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     },
   );
 
-  const scrollToBottom = useFreshCallback((animated = false) => {
+  const scrollToBottom = useFreshCallback(async (animated = false) => {
     if (props.hasNext()) {
       props.onUpdateSearchItem(undefined);
       props.onScrolledAwayFromBottom(false);
 
-      props.onResetMessageList(() => {
-        props.onScrolledAwayFromBottom(false);
-        lazyScrollToBottom({ animated });
-      });
+      await props.onResetMessageList();
+      props.onScrolledAwayFromBottom(false);
+      lazyScrollToBottom({ animated });
     } else {
       lazyScrollToBottom({ animated });
     }

packages/uikit-react-native/src/domain/groupChannel/types.ts

@@ -73,8 +73,8 @@ export interface GroupChannelProps {
     | 'hasNext'
     | 'searchItem'
   > & {
-    onResetMessageList: (callback?: () => void) => void;
-    onResetMessageListWithStartingPoint: (startingPoint: number, callback?: () => void) => void;
+    onResetMessageList: () => Promise<void>;
+    onResetMessageListWithStartingPoint: (startingPoint: number) => Promise<void>;
 
     // Changing the search item will trigger the focus animation on messages.
     onUpdateSearchItem: (searchItem?: GroupChannelProps['MessageList']['searchItem']) => void;

packages/uikit-react-native/src/fragments/createGroupChannelFragment.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { ReplyType } from '@sendbird/chat/message';
-import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
 import { Box } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelMessages } from '@sendbird/uikit-tools';
 import {
   NOOP,
   PASS,
   SendbirdFileMessage,
   SendbirdGroupChannel,
   SendbirdUserMessage,
+  confirmAndMarkAsRead,
   messageComparator,
   useFreshCallback,
   useIIFE,
@@ -75,8 +76,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       messages,
       newMessages,
       resetNewMessages,
-      next,
-      prev,
+      loadNext,
+      loadPrevious,
       hasNext,
       sendFileMessage,
       sendUserMessage,
@@ -85,20 +86,21 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       resendMessage,
       deleteMessage,
       resetWithStartingPoint,
-    } = useGroupChannelMessages(sdk, channel, currentUser?.userId, {
+    } = useGroupChannelMessages(sdk, channel, {
       shouldCountNewMessages: () => scrolledAwayFromBottomRef.current,
       onMessagesReceived(messages) {
         groupChannelPubSub.publish({ type: 'MESSAGES_RECEIVED', data: { messages } });
       },
       onMessagesUpdated(messages) {
         groupChannelPubSub.publish({ type: 'MESSAGES_UPDATED', data: { messages } });
       },
+      onChannelDeleted,
+      onCurrentUserBanned: onChannelDeleted,
       collectionCreator,
       sortComparator,
-      onChannelDeleted,
+      markAsRead: confirmAndMarkAsRead,
       replyType,
       startingPoint: internalSearchItem?.startingPoint,
-      enableCollectionWithoutLocalCache: true,
     });
 
     const onBlurFragment = () => {
@@ -144,12 +146,12 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       [flatListProps],
     );
 
-    const onResetMessageList = useCallback((callback?: () => void) => {
-      resetWithStartingPoint(Number.MAX_SAFE_INTEGER, callback);
+    const onResetMessageList = useCallback(async () => {
+      return await resetWithStartingPoint(Number.MAX_SAFE_INTEGER);
     }, []);
 
-    const onResetMessageListWithStartingPoint = useCallback((startingPoint: number, callback?: () => void) => {
-      resetWithStartingPoint(startingPoint, callback);
+    const onResetMessageListWithStartingPoint = useCallback(async (startingPoint: number) => {
+      return await resetWithStartingPoint(startingPoint);
     }, []);
 
     // Changing the search item will trigger the focus animation on messages.
@@ -224,8 +226,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             renderMessage={renderItem}
             messages={messages}
             newMessages={newMessages}
-            onTopReached={prev}
-            onBottomReached={next}
+            onTopReached={loadPrevious}
+            onBottomReached={loadNext}
             hasNext={hasNext}
             scrolledAwayFromBottom={scrolledAwayFromBottom}
             onScrolledAwayFromBottom={onScrolledAwayFromBottom}

packages/uikit-testing-tools/src/mocks/createMockChannel.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   BannedUserListQuery,
   ChannelType,
@@ -125,6 +126,7 @@ class MockChannel implements GetMockProps<Params, SendbirdBaseChannel & Sendbird
   isOperator(): boolean {
     throw new Error('Method not implemented.');
   }
+  // @ts-ignore
   refresh = jest.fn(async (): Promise<this> => {
     this.params.sdk?.__throwIfFailureTest();
     return this;

packages/uikit-testing-tools/src/mocks/createMockGroupChannelCollection.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { ChannelType } from '@sendbird/chat';
 import {
   GroupChannel,

packages/uikit-testing-tools/src/mocks/createMockMessage.ts

@@ -1,6 +1,8 @@
+// @ts-nocheck
 import { ChannelType } from '@sendbird/chat';
 import { NotificationData } from '@sendbird/chat/feedChannel';
-import { MessageType, SendingStatus } from '@sendbird/chat/message';
+import { Form } from '@sendbird/chat/lib/__definition';
+import { AdminMessage, Feedback, FeedbackStatus, MessageType, SendingStatus } from '@sendbird/chat/message';
 import type {
   SendbirdAdminMessage,
   SendbirdBaseMessage,
@@ -67,6 +69,10 @@ class MockMessage implements GetMockProps<Params, SendbirdBaseMessage> {
   scheduledInfo = null;
   extendedMessage = {};
   notificationData: NotificationData | null = null;
+  forms: Form[] | null = null;
+  myFeedback: Feedback | null = null;
+  myFeedbackStatus: FeedbackStatus = 'NO_FEEDBACK';
+  suggestedReplies: string[] | null = null;
 
   isFileMessage(): this is SendbirdFileMessage {
     return this.messageType === MessageType.FILE && !Object.prototype.hasOwnProperty.call(this, 'fileInfoList');
@@ -109,6 +115,26 @@ class MockMessage implements GetMockProps<Params, SendbirdBaseMessage> {
     return Object.assign({}, this);
   }
 
+  deleteFeedback(_: number): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
+  hasForm(): this is AdminMessage {
+    return this.forms !== null;
+  }
+
+  submitFeedback(_: Pick<Feedback, 'rating' | 'comment'>): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
+  submitForm(_: { formId?: string; answers?: Record<string, string> }): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
+  updateFeedback(_: Feedback): Promise<void> {
+    return Promise.resolve(undefined);
+  }
+
   asFileMessage(): SendbirdFileMessage {
     return this as unknown as SendbirdFileMessage;
   }

packages/uikit-testing-tools/src/mocks/createMockMessageCollection.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   MessageCollectionEventHandler,
   MessageCollectionInitHandler,
@@ -6,7 +7,7 @@ import {
   MessageCollectionParams,
   MessageFilter,
 } from '@sendbird/chat/groupChannel';
-import { SendingStatus } from '@sendbird/chat/message';
+import { BaseMessage, SendingStatus } from '@sendbird/chat/message';
 import type {
   SendbirdBaseMessage,
   SendbirdGroupChannel,
@@ -57,7 +58,7 @@ class MockMessageCollection implements GetMockProps<Params, Omit<SendbirdMessage
   });
 
   initialize = jest.fn((_policy: MessageCollectionInitPolicy) => {
-    const initHandler: MessageCollectionInitHandler = {
+    const initHandler: MessageCollectionInitHandler<BaseMessage> = {
       onCacheResult: jest.fn((handler: MessageCollectionInitResultHandler) => {
         this.__cacheInitHandler = handler;
         return initHandler;

packages/uikit-testing-tools/src/mocks/createMockQuery.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { ChannelType } from '@sendbird/chat';
 
 import type { GetMockParams } from '../types';

packages/uikit-testing-tools/src/mocks/createMockSendbirdSDK.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import {
   ApplicationUserListQueryParams,
   ChannelType,

packages/uikit-testing-tools/src/mocks/createMockUser.ts

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import { UserOnlineState } from '@sendbird/chat';
 import type { Sender } from '@sendbird/chat/message';
 import type {

packages/uikit-utils/package.json

@@ -56,7 +56,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "react": ">=17.0.2",
     "react-native": ">=0.65.0"
   },

sample/package.json

@@ -28,7 +28,7 @@
     "@react-navigation/bottom-tabs": "^6.2.0",
     "@react-navigation/native": "^6.0.6",
     "@react-navigation/native-stack": "^6.7.0",
-    "@sendbird/chat": "^4.9.8",
+    "@sendbird/chat": "^4.10.7",
     "@sendbird/react-native-scrollview-enhancer": "^0.2.1",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-controls": "^6.4.19",