feat(uikit): added queryCreator prop to OpenChannelRegisterOperatorFragment

Author: bang9

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

@@ -1,5 +1,5 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser, UserStruct } from '@sendbird/uikit-utils';
+import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
@@ -16,15 +16,15 @@ export interface OpenChannelParticipantsProps {
 }
 export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
 
-export interface OpenChannelRegisterOperatorProps<User extends UserStruct = SendbirdParticipant> {
+export interface OpenChannelRegisterOperatorProps {
   Fragment: {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (channel: SendbirdOpenChannel) => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    renderUser?: UserListProps<SendbirdParticipant>['List']['renderUser'];
+    // NOTE: SDK does not migrate the response type of query to Participant from User yet due to backward compat.
+    queryCreator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['queryCreator'];
+    sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
-  OpenChannelRegisterOperatorProps<User>['Fragment']
->;
+export type OpenChannelRegisterOperatorFragment = CommonComponent<OpenChannelRegisterOperatorProps['Fragment']>;

packages/uikit-react-native/src/fragments/createOpenChannelRegisterOperatorFragment.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { CustomQueryInterface, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdParticipant } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
@@ -13,18 +13,14 @@ import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
 const createOpenChannelRegisterOperatorFragment = (
   initModule?: Partial<UserListModule<SendbirdParticipant>>,
-): OpenChannelRegisterOperatorFragment<SendbirdParticipant> => {
+): OpenChannelRegisterOperatorFragment => {
   const UserListModule = createUserListModule<SendbirdParticipant>(initModule);
 
-  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight, queryCreator }) => {
     const { sdk, currentUser } = useSendbirdChat();
     const { STRINGS } = useLocalization();
     const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
-      queryCreator: () => {
-        return channel.createParticipantListQuery({
-          limit: 20,
-        }) as unknown as CustomQueryInterface<SendbirdParticipant>;
-      },
+      queryCreator: queryCreator ?? (() => channel.createParticipantListQuery({ limit: 20 })),
       sortComparator,
     });
 
@@ -84,7 +80,7 @@ const createOpenChannelRegisterOperatorFragment = (
         >
           <UserListModule.List
             onLoadNext={next}
-            users={users}
+            users={users as SendbirdParticipant[]}
             renderUser={_renderUser}
             onRefresh={refresh}
             refreshing={refreshing}