@sendbird/uikit-react-native 3.4.0 → 3.4.2

package/src/domain/groupChannelList/types.ts

@@ -1,21 +1,32 @@
 import type React from 'react';
 import type { FlatListProps } from 'react-native';
 
+import type { GroupChannelCollectionParams, GroupChannelFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelListOptions } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 
+export type ChannelListQueryParamsType = Omit<GroupChannelCollectionParams, 'filter'> & GroupChannelFilterParams;
 export interface GroupChannelListProps {
   Fragment: {
     onPressChannel: GroupChannelListProps['List']['onPressChannel'];
     onPressCreateChannel: (channelType: GroupChannelType) => void;
     renderGroupChannelPreview?: GroupChannelListProps['List']['renderGroupChannelPreview'];
     skipTypeSelection?: boolean;
-    collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
     flatListProps?: GroupChannelListProps['List']['flatListProps'];
     menuItemCreator?: GroupChannelListProps['List']['menuItemCreator'];
+    /**
+     * @description You can specify the query parameters for the channel list.
+     * @example
+     * ```
+     * <GroupChannelListFragment channelListQueryParams={{ limit: 20, includeEmpty: false }} />
+     * ```
+     * */
+    channelListQueryParams?: ChannelListQueryParamsType;
+    /** @deprecated Please use `channelListQueryParams` instead */
+    collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
   };
   Header: {};
   List: {
@@ -61,5 +72,5 @@ export interface GroupChannelListModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelListFragment = CommonComponent<GroupChannelListProps['Fragment']>;
+export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
 export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

package/src/domain/groupChannelModeration/types.ts

@@ -45,4 +45,4 @@ export interface GroupChannelModerationModule {
   Menu: CommonComponent<GroupChannelModerationProps['Menu']>;
 }
 
-export type GroupChannelModerationFragment = CommonComponent<GroupChannelModerationProps['Fragment']>;
+export type GroupChannelModerationFragment = React.FC<GroupChannelModerationProps['Fragment']>;

package/src/domain/groupChannelMutedMembers/types.ts

@@ -49,4 +49,4 @@ export interface GroupChannelMutedMembersModule {
   StatusError: CommonComponent<GroupChannelMutedMembersProps['StatusError']>;
 }
 
-export type GroupChannelMutedMembersFragment = CommonComponent<GroupChannelMutedMembersProps['Fragment']>;
+export type GroupChannelMutedMembersFragment = React.FC<GroupChannelMutedMembersProps['Fragment']>;

package/src/domain/groupChannelNotifications/types.ts

@@ -35,4 +35,4 @@ export interface GroupChannelNotificationsModule {
   View: CommonComponent<GroupChannelNotificationsProps['View']>;
 }
 
-export type GroupChannelNotificationsFragment = CommonComponent<GroupChannelNotificationsProps['Fragment']>;
+export type GroupChannelNotificationsFragment = React.FC<GroupChannelNotificationsProps['Fragment']>;

package/src/domain/groupChannelOperators/types.ts

@@ -51,4 +51,4 @@ export interface GroupChannelOperatorsModule {
   StatusError: CommonComponent<GroupChannelOperatorsProps['StatusError']>;
 }
 
-export type GroupChannelOperatorsFragment = CommonComponent<GroupChannelOperatorsProps['Fragment']>;
+export type GroupChannelOperatorsFragment = React.FC<GroupChannelOperatorsProps['Fragment']>;

package/src/domain/groupChannelSettings/types.ts

@@ -53,4 +53,4 @@ export interface GroupChannelSettingsModule {
   Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
 }
 
-export type GroupChannelSettingsFragment = CommonComponent<GroupChannelSettingsProps['Fragment']>;
+export type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;

package/src/domain/groupChannelUserList/types.ts

@@ -52,7 +52,7 @@ export interface GroupChannelMembersProps {
     queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
+export type GroupChannelMembersFragment = React.FC<GroupChannelMembersProps['Fragment']>;
 
 export interface GroupChannelRegisterOperatorProps {
   Fragment: {
@@ -64,4 +64,4 @@ export interface GroupChannelRegisterOperatorProps {
     queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;
+export type GroupChannelRegisterOperatorFragment = React.FC<GroupChannelRegisterOperatorProps['Fragment']>;

package/src/domain/messageSearch/types.ts

@@ -52,4 +52,4 @@ export interface MessageSearchModule {
   StatusError: CommonComponent<MessageSearchProps['StatusError']>;
 }
 
-export type MessageSearchFragment = CommonComponent<MessageSearchProps['Fragment']>;
+export type MessageSearchFragment = React.FC<MessageSearchProps['Fragment']>;

package/src/domain/openChannel/types.ts

@@ -111,7 +111,7 @@ export interface OpenChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type OpenChannelFragment = CommonComponent<OpenChannelProps['Fragment']>;
+export type OpenChannelFragment = React.FC<OpenChannelProps['Fragment']>;
 
 export type OpenChannelPubSubContextPayload =
   | {

package/src/domain/openChannelBannedUsers/types.ts

@@ -49,4 +49,4 @@ export interface OpenChannelBannedUsersModule {
   StatusError: CommonComponent<OpenChannelBannedUsersProps['StatusError']>;
 }
 
-export type OpenChannelBannedUsersFragment = CommonComponent<OpenChannelBannedUsersProps['Fragment']>;
+export type OpenChannelBannedUsersFragment = React.FC<OpenChannelBannedUsersProps['Fragment']>;

package/src/domain/openChannelCreate/types.ts

@@ -42,4 +42,4 @@ export interface OpenChannelCreateModule {
   StatusLoading: CommonComponent;
 }
 
-export type OpenChannelCreateFragment = CommonComponent<OpenChannelCreateProps['Fragment']>;
+export type OpenChannelCreateFragment = React.FC<OpenChannelCreateProps['Fragment']>;

package/src/domain/openChannelList/types.ts

@@ -53,4 +53,4 @@ export interface OpenChannelListModule {
   StatusError: CommonComponent<OpenChannelListProps['StatusError']>;
 }
 
-export type OpenChannelListFragment = CommonComponent<OpenChannelListProps['Fragment']>;
+export type OpenChannelListFragment = React.FC<OpenChannelListProps['Fragment']>;

package/src/domain/openChannelModeration/types.ts

@@ -45,4 +45,4 @@ export interface OpenChannelModerationModule {
   Menu: CommonComponent<OpenChannelModerationProps['Menu']>;
 }
 
-export type OpenChannelModerationFragment = CommonComponent<OpenChannelModerationProps['Fragment']>;
+export type OpenChannelModerationFragment = React.FC<OpenChannelModerationProps['Fragment']>;

package/src/domain/openChannelMutedParticipants/types.ts

@@ -49,4 +49,4 @@ export interface OpenChannelMutedParticipantsModule {
   StatusError: CommonComponent<OpenChannelMutedParticipantsProps['StatusError']>;
 }
 
-export type OpenChannelMutedParticipantsFragment = CommonComponent<OpenChannelMutedParticipantsProps['Fragment']>;
+export type OpenChannelMutedParticipantsFragment = React.FC<OpenChannelMutedParticipantsProps['Fragment']>;

package/src/domain/openChannelOperators/types.ts

@@ -51,4 +51,4 @@ export interface OpenChannelOperatorsModule {
   StatusError: CommonComponent<OpenChannelOperatorsProps['StatusError']>;
 }
 
-export type OpenChannelOperatorsFragment = CommonComponent<OpenChannelOperatorsProps['Fragment']>;
+export type OpenChannelOperatorsFragment = React.FC<OpenChannelOperatorsProps['Fragment']>;

package/src/domain/openChannelSettings/types.ts

@@ -51,4 +51,4 @@ export interface OpenChannelSettingsModule {
   Menu: CommonComponent<OpenChannelSettingsProps['Menu']>;
 }
 
-export type OpenChannelSettingsFragment = CommonComponent<OpenChannelSettingsProps['Fragment']>;
+export type OpenChannelSettingsFragment = React.FC<OpenChannelSettingsProps['Fragment']>;

package/src/domain/openChannelUserList/types.ts

@@ -1,7 +1,8 @@
+import type React from 'react';
+
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 
-import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
 
 export interface OpenChannelParticipantsProps {
@@ -14,7 +15,7 @@ export interface OpenChannelParticipantsProps {
     sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
+export type OpenChannelParticipantsFragment = React.FC<OpenChannelParticipantsProps['Fragment']>;
 
 export interface OpenChannelRegisterOperatorProps {
   Fragment: {
@@ -27,4 +28,4 @@ export interface OpenChannelRegisterOperatorProps {
     sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelRegisterOperatorFragment = CommonComponent<OpenChannelRegisterOperatorProps['Fragment']>;
+export type OpenChannelRegisterOperatorFragment = React.FC<OpenChannelRegisterOperatorProps['Fragment']>;

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,23 +19,24 @@ 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) {
-      useAppState('change', (status) => {
+    useAppState('change', (status) => {
+      if (sbOptions.appInfo.deliveryReceiptEnabled) {
         if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
-      });
-    }
+      }
+    });
 
     const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(
       (props) => {
@@ -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.2';
 export default VERSION;