Merge pull request #161 from sendbird/chore/new-list-params

chore(CLNP-2179): introduced new list query params

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

@@ -4,6 +4,9 @@ import type { UseGroupChannelList } from '../../types';
 import { useGroupChannelListWithCollection } from './useGroupChannelListWithCollection';
 import { useGroupChannelListWithQuery } from './useGroupChannelListWithQuery';
 
+/**
+ * @deprecated This hook is deprecated and will be replaced by the 'uikit-tools' package.
+ * */
 export const useGroupChannelList: UseGroupChannelList = (sdk, userId, options) => {
   if (sdk.isCacheEnabled || options?.enableCollectionWithoutLocalCache) {
     if (options?.queryCreator) Logger.warn('`queryCreator` is ignored, please use `collectionCreator` instead.');

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

@@ -33,6 +33,8 @@ export interface CustomBidirectionalQueryInterface<Data> {
 }
 
 /**
+ * @deprecated This hook is deprecated and will be replaced by the 'uikit-tools' package.
+ *
  * @interface UseGroupChannelList
  * @description interface for group channel list hook
  * */

packages/uikit-react-native/__template__/types.ts

@@ -33,4 +33,4 @@ export interface __domain__Module {
   StatusLoading: CommonComponent;
 }
 
-export type __domain__Fragment = CommonComponent<__domain__Props['Fragment']>;
+export type __domain__Fragment = React.FC<__domain__Props['Fragment']>;

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

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { FlatList } from 'react-native';
 
+import type { MessageCollectionParams, MessageFilterParams } from '@sendbird/chat/groupChannel';
 import type { UseGroupChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
 import type {
   OnBeforeHandler,
@@ -20,6 +21,7 @@ import type { ChannelMessageListProps } from '../../components/ChannelMessageLis
 import type { CommonComponent } from '../../types';
 import type { PubSub } from '../../utils/pubsub';
 
+export type MessageListQueryParamsType = Omit<MessageCollectionParams, 'filter'> & MessageFilterParams;
 export interface GroupChannelProps {
   Fragment: {
     channel: SendbirdGroupChannel;
@@ -43,9 +45,19 @@ export interface GroupChannelProps {
     keyboardAvoidOffset?: GroupChannelProps['Provider']['keyboardAvoidOffset'];
     flatListProps?: GroupChannelProps['MessageList']['flatListProps'];
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
-    collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
 
     searchItem?: GroupChannelProps['MessageList']['searchItem'];
+
+    /**
+     * @description You can specify the query parameters for the message list.
+     * @example
+     * ```
+     * <GroupChannelFragment messageListQueryParams={{ prevResultLimit: 20, customTypesFilter: ['filter'] }} />
+     * ```
+     * */
+    messageListQueryParams?: MessageListQueryParamsType;
+    /** @deprecated Please use `messageListQueryParams` instead */
+    collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
   };
   Header: {
     shouldHideRight: () => boolean;
@@ -169,7 +181,7 @@ export interface GroupChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;
+export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;
 
 export type GroupChannelPubSubContextPayload =
   | {

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

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

packages/uikit-react-native/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';

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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 =
   | {

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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']>;

packages/uikit-react-native/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;

packages/uikit-react-native/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;

sample/src/screens/uikit/groupChannel/GroupChannelScreen.tsx

@@ -97,6 +97,10 @@ const GroupChannelScreen = () => {
         // Navigate to group channel settings
         navigation.push(Routes.GroupChannelSettings, params);
       }}
+      // messageListQueryParams={{
+      //   prevResultLimit: 20,
+      //   customTypesFilter: ['filter'],
+      // }}
     />
   );
 };

sample/src/screens/uikit/groupChannel/GroupChannelTabs/GroupChannelListScreen.tsx

@@ -63,6 +63,10 @@ const GroupChannelListScreen = () => {
       onPressChannel={(channel) => {
         navigation.navigate(Routes.GroupChannel, { channelUrl: channel.url });
       }}
+      // channelListQueryParams={{
+      //   includeEmpty: true,
+      //   includeFrozen: false,
+      // }}
     />
   );
 };