chore: replaced useGroupChannelMessages

Author: bang9

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/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/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/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-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"
   },