Merge pull request #86 from sendbird/feat/query-creators

bang9 · web-flow · commit ae5e0a40bd7f · 2023-04-27T23:40:22.000+09:00
[UIKIT-3756] Feat/query creators
diff --git a/packages/uikit-react-native/src/domain/groupChannelBannedUsers/types.ts b/packages/uikit-react-native/src/domain/groupChannelBannedUsers/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type GroupChannelBannedUsersProps = {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: GroupChannelBannedUsersProps['Header']['onPressHeaderLeft'];
     renderUser?: GroupChannelBannedUsersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/groupChannelMutedMembers/types.ts b/packages/uikit-react-native/src/domain/groupChannelMutedMembers/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type GroupChannelMutedMembersProps = {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: GroupChannelMutedMembersProps['Header']['onPressHeaderLeft'];
     renderUser?: GroupChannelMutedMembersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/groupChannelOperators/types.ts b/packages/uikit-react-native/src/domain/groupChannelOperators/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -10,6 +11,7 @@ export type GroupChannelOperatorsProps = {
     onPressHeaderLeft: GroupChannelOperatorsProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: GroupChannelOperatorsProps['Header']['onPressHeaderRight'];
     renderUser?: GroupChannelOperatorsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/groupChannelUserList/types.ts b/packages/uikit-react-native/src/domain/groupChannelUserList/types.ts
@@ -42,28 +42,26 @@ export type GroupChannelInviteFragment<User extends UserStruct> = CommonComponen
   GroupChannelInviteProps<User>['Fragment']
 >;
 
-export interface GroupChannelMembersProps<User extends UserStruct> {
+export interface GroupChannelMembersProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelMembersFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelMembersProps<User>['Fragment']
->;
+export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
 
-export interface GroupChannelRegisterOperatorProps<User extends UserStruct = SendbirdMember> {
+export interface GroupChannelRegisterOperatorProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (channel: SendbirdGroupChannel) => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelRegisterOperatorProps<User>['Fragment']
->;
+export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;
diff --git a/packages/uikit-react-native/src/domain/openChannelBannedUsers/types.ts b/packages/uikit-react-native/src/domain/openChannelBannedUsers/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type OpenChannelBannedUsersProps = {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: OpenChannelBannedUsersProps['Header']['onPressHeaderLeft'];
     renderUser?: OpenChannelBannedUsersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/openChannelMutedParticipants/types.ts b/packages/uikit-react-native/src/domain/openChannelMutedParticipants/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type OpenChannelMutedParticipantsProps = {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: OpenChannelMutedParticipantsProps['Header']['onPressHeaderLeft'];
     renderUser?: OpenChannelMutedParticipantsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/openChannelOperators/types.ts b/packages/uikit-react-native/src/domain/openChannelOperators/types.ts
@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -10,6 +11,7 @@ export type OpenChannelOperatorsProps = {
     onPressHeaderLeft: OpenChannelOperatorsProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: OpenChannelOperatorsProps['Header']['onPressHeaderRight'];
     renderUser?: OpenChannelOperatorsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;
diff --git a/packages/uikit-react-native/src/domain/openChannelUserList/types.ts b/packages/uikit-react-native/src/domain/openChannelUserList/types.ts
@@ -1,30 +1,30 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdOpenChannel, SendbirdParticipant, 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';
 
-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> {
+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']>;
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelBannedUsersFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelBannedUsersFragment.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+import { useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -18,14 +18,17 @@ const createGroupChannelBannedUsersFragment = (
 ): GroupChannelBannedUsersFragment => {
   const GroupChannelBannedUsersModule = createGroupChannelBannedUsersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createBannedUserListQuery({ limit: 20 }),
+  }) => {
     const { STRINGS } = useLocalization();
     const { currentUser, sdk } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
-      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, { queryCreator });
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
       if (renderUser) return renderUser(props);
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelMembersFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelMembersFragment.tsx
@@ -17,10 +17,17 @@ const RETURN_EMPTY_STRING = () => '';
 
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelMembersFragment<SendbirdMember> => {
+): GroupChannelMembersFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    sortComparator,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
@@ -30,7 +37,8 @@ const createGroupChannelMembersFragment = (
     const { show } = useUserProfile();
 
     const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
+      queryCreator,
+      sortComparator,
     });
 
     useChannelHandler(sdk, handlerId, {
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelMutedMembersFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelMutedMembersFragment.tsx
@@ -18,16 +18,19 @@ const createGroupChannelMutedMembersFragment = (
 ): GroupChannelMutedMembersFragment => {
   const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
-      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserMuted(eventChannel, user) {
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelNotificationsFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelNotificationsFragment.tsx
@@ -13,12 +13,11 @@ const createGroupChannelNotificationsFragment = (
 ): GroupChannelNotificationsFragment => {
   const GroupChannelNotificationsModule = createGroupChannelNotificationsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, children, channel }) => {
+  return ({ onPressHeaderLeft = NOOP, channel }) => {
     return (
       <GroupChannelNotificationsModule.Provider channel={channel}>
         <GroupChannelNotificationsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
         <GroupChannelNotificationsModule.View />
-        {children}
       </GroupChannelNotificationsModule.Provider>
     );
   };
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelOperatorsFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelOperatorsFragment.tsx
@@ -15,17 +15,21 @@ const createGroupChannelOperatorsFragment = (
 ): GroupChannelOperatorsFragment => {
   const GroupChannelOperatorsModule = createGroupChannelOperatorsModule(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
     const { show } = useUserProfile();
 
-    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {
-      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {
diff --git a/packages/uikit-react-native/src/fragments/createGroupChannelRegisterOperatorFragment.tsx b/packages/uikit-react-native/src/fragments/createGroupChannelRegisterOperatorFragment.tsx
@@ -13,16 +13,20 @@ import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
 const createGroupChannelRegisterOperatorFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelRegisterOperatorFragment<SendbirdMember> => {
+): GroupChannelRegisterOperatorFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    sortComparator,
+    renderUser,
+    onPressHeaderRight,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const { sdk, currentUser } = useSendbirdChat();
     const { STRINGS } = useLocalization();
-    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
-      sortComparator,
-    });
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, { queryCreator, sortComparator });
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {
diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelBannedUsersFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelBannedUsersFragment.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+import { useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -18,14 +18,17 @@ const createOpenChannelBannedUsersFragment = (
 ): OpenChannelBannedUsersFragment => {
   const OpenChannelBannedUsersModule = createOpenChannelBannedUsersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createBannedUserListQuery({ limit: 20 }),
+  }) => {
     const { STRINGS } = useLocalization();
     const { currentUser, sdk } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
-      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, { queryCreator });
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
       if (renderUser) return renderUser(props);
diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelMutedParticipantsFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelMutedParticipantsFragment.tsx
@@ -18,16 +18,19 @@ const createOpenChannelMutedParticipantsFragment = (
 ): OpenChannelMutedParticipantsFragment => {
   const OpenChannelMutedParticipantsModule = createOpenChannelMutedParticipantsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('OpenChannelMutedParticipants');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
-      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(
       sdk,
diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelOperatorsFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelOperatorsFragment.tsx
diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelParticipantsFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelParticipantsFragment.tsx
diff --git a/packages/uikit-react-native/src/fragments/createOpenChannelRegisterOperatorFragment.tsx b/packages/uikit-react-native/src/fragments/createOpenChannelRegisterOperatorFragment.tsx
