@sendbird/uikit-react-native 3.4.0 → 3.4.1

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { MessageCollection, MessageFilter } from '@sendbird/chat/groupChannel';
 import { ReplyType } from '@sendbird/chat/message';
 import { Box } from '@sendbird/uikit-react-native-foundation';
 import { useGroupChannelMessages } from '@sendbird/uikit-tools';
+import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdUserMessage } from '@sendbird/uikit-utils';
 import {
   NOOP,
   PASS,
-  SendbirdFileMessage,
-  SendbirdGroupChannel,
-  SendbirdUserMessage,
   confirmAndMarkAsRead,
   messageComparator,
   useFreshCallback,
@@ -52,9 +51,10 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     onBeforeUpdateFileMessage = PASS,
     channel,
     keyboardAvoidOffset,
-    collectionCreator,
     sortComparator = messageComparator,
     flatListProps,
+    messageListQueryParams,
+    collectionCreator,
   }) => {
     const { playerService, recorderService } = usePlatformService();
     const { sdk, currentUser, sbOptions } = useSendbirdChat();
@@ -96,7 +96,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       },
       onChannelDeleted,
       onCurrentUserBanned: onChannelDeleted,
-      collectionCreator,
+      collectionCreator: getCollectionCreator(channel, messageListQueryParams, collectionCreator),
       sortComparator,
       markAsRead: confirmAndMarkAsRead,
       replyType,
@@ -260,4 +260,20 @@ function shouldRenderInput(channel: SendbirdGroupChannel) {
   return true;
 }
 
+function getCollectionCreator(
+  channel: SendbirdGroupChannel,
+  messageListQueryParams?: GroupChannelProps['Fragment']['messageListQueryParams'],
+  deprecatedCreatorProp?: () => MessageCollection,
+) {
+  if (!messageListQueryParams && deprecatedCreatorProp) return deprecatedCreatorProp;
+
+  return (defaultParams: GroupChannelProps['Fragment']['messageListQueryParams']) => {
+    const params = { ...defaultParams, ...messageListQueryParams };
+    return channel.createMessageCollection({
+      ...params,
+      filter: new MessageFilter(params),
+    });
+  };
+}
+
 export default createGroupChannelFragment;

package/src/fragments/createGroupChannelListFragment.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { PASS, useAppState, useFreshCallback } from '@sendbird/uikit-utils';
+import { GroupChannelCollection, GroupChannelFilter } from '@sendbird/chat/groupChannel';
+import { useGroupChannelList } from '@sendbird/uikit-tools';
+import { PASS, SendbirdChatSDK, confirmAndMarkAsDelivered, useAppState, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
@@ -18,16 +19,17 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
   return ({
     onPressChannel,
     onPressCreateChannel,
-    collectionCreator,
     renderGroupChannelPreview,
     skipTypeSelection = false,
     flatListProps = {},
     menuItemCreator = PASS,
+    channelListQueryParams,
+    collectionCreator,
   }) => {
-    const { sdk, currentUser, sbOptions, markAsDeliveredWithChannel } = useSendbirdChat();
-    const { groupChannels, next, loading } = useGroupChannelList(sdk, currentUser?.userId, {
-      collectionCreator,
-      enableCollectionWithoutLocalCache: true,
+    const { sdk, sbOptions, markAsDeliveredWithChannel } = useSendbirdChat();
+    const { groupChannels, loadMore, initialized } = useGroupChannelList(sdk, {
+      collectionCreator: getCollectionCreator(sdk, channelListQueryParams, collectionCreator),
+      markAsDelivered: confirmAndMarkAsDelivered,
     });
 
     if (sbOptions.appInfo.deliveryReceiptEnabled) {
@@ -49,13 +51,13 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     return (
       <GroupChannelListModule.Provider>
         <GroupChannelListModule.Header />
-        <StatusComposition loading={loading} LoadingComponent={<GroupChannelListModule.StatusLoading />}>
+        <StatusComposition loading={!initialized} LoadingComponent={<GroupChannelListModule.StatusLoading />}>
           <GroupChannelListModule.List
             onPressChannel={onPressChannel}
             menuItemCreator={menuItemCreator}
             renderGroupChannelPreview={_renderGroupChannelPreview}
             groupChannels={groupChannels}
-            onLoadNext={next}
+            onLoadNext={loadMore}
             flatListProps={{
               ListEmptyComponent: <GroupChannelListModule.StatusEmpty />,
               contentContainerStyle: { flexGrow: 1 },
@@ -72,4 +74,20 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
   };
 };
 
+function getCollectionCreator(
+  sdk: SendbirdChatSDK,
+  channelListQueryParams?: GroupChannelListProps['Fragment']['channelListQueryParams'],
+  deprecatedCreatorProp?: () => GroupChannelCollection,
+) {
+  if (!channelListQueryParams && deprecatedCreatorProp) return deprecatedCreatorProp;
+
+  return (defaultParams: GroupChannelListProps['Fragment']['channelListQueryParams']) => {
+    const params = { ...defaultParams, ...channelListQueryParams };
+    return sdk.groupChannel.createGroupChannelCollection({
+      ...params,
+      filter: new GroupChannelFilter(params),
+    });
+  };
+}
+
 export default createGroupChannelListFragment;

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { ErrorInfo, ReactNode } from 'react';
+import type { ComponentType, ErrorInfo, ReactNode } from 'react';
 
 import type { SendbirdUser } from '@sendbird/uikit-utils';
 
@@ -17,7 +17,7 @@ export interface LocalCacheStorage {
 
 export type ErrorBoundaryProps = { error: Error; errorInfo: ErrorInfo; reset: () => void };
 
-export type CommonComponent<P = {}> = (props: P & { children?: ReactNode }) => null | ReactNode;
+export type CommonComponent<P = {}> = ComponentType<P & { children?: ReactNode | undefined }>;
 
 export type MentionedUser = {
   range: Range;

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.4.0';
+const VERSION = '3.4.1';
 export default VERSION;