feat(uikit): added queryCreator prop to OpenChannelParticipantsFragment

sendbird · Apr 27, 2023 · 01f82da · 01f82da
1 parent d7746f5
commit 01f82da
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git a/packages/uikit-react-native/src/domain/openChannelUserList/types.ts b/packages/uikit-react-native/src/domain/openChannelUserList/types.ts
@@ -1,20 +1,20 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdOpenChannel, SendbirdParticipant, UserStruct } from '@sendbird/uikit-utils';
+import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser, UserStruct } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
 
-export interface OpenChannelParticipantsProps<User extends UserStruct> {
+export interface OpenChannelParticipantsProps {
   Fragment: {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: () => 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 OpenChannelParticipantsFragment<User extends UserStruct> = CommonComponent<
-  OpenChannelParticipantsProps<User>['Fragment']
->;
+export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
 
 export interface OpenChannelRegisterOperatorProps<User extends UserStruct = SendbirdParticipant> {
   Fragment: {

diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelParticipantsFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelParticipantsFragment.tsx
@@ -17,10 +17,10 @@ import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useCo
 const RETURN_EMPTY_STRING = () => '';
 const createOpenChannelParticipantsFragment = (
   initModule?: Partial<UserListModule<SendbirdParticipant>>,
-): OpenChannelParticipantsFragment<SendbirdParticipant> => {
+): OpenChannelParticipantsFragment => {
   const UserListModule = createUserListModule<SendbirdParticipant>(initModule);
 
-  return ({ channel, onPressHeaderLeft, renderUser }) => {
+  return ({ channel, onPressHeaderLeft, renderUser, queryCreator, sortComparator }) => {
     const handlerId = useUniqHandlerId('OpenChannelParticipantsFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
@@ -30,7 +30,8 @@ const createOpenChannelParticipantsFragment = (
     const { show } = useUserProfile();
 
     const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
-      queryCreator: () => channel.createParticipantListQuery({ limit: 20 }),
+      queryCreator: queryCreator ?? (() => channel.createParticipantListQuery({ limit: 20 })),
+      sortComparator,
     });
 
     useChannelHandler(