chore: replaced with uikit-tools hooks and introduced new channelListQueryParams

Author: bang9

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/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: {

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/GroupChannelTabs/GroupChannelListScreen.tsx

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