feat: Add query params to the member list props (#1175)

[CLNP-3679](https://sendbird.atlassian.net/browse/CLNP-3679)

## ChangeLog
* Added `memberListQueryParams` to the `MemberList`, `MembersModal`,
`MutedMemberList`, and `MutedMembersModal`
* Added `bannedUserListQueryParams` to the `BannedUserList` and
`BannedUsersModal`
* Added `operatorListQueryParams` to the `OperatorList` and
`OperatorsModal`

Author: HoonBaek

src/modules/ChannelSettings/components/ModerationPanel/BannedUserList.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   ReactNode,
 } from 'react';
-import type { RestrictedUser } from '@sendbird/chat';
+import type { BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 
 import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import
@@ -23,10 +23,12 @@ import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 interface BannedUserListProps {
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  bannedUserListQueryParams?: BannedUserListQueryParams;
 }
 
 export const BannedUserList = ({
   renderUserListItem = (props) => <UserListItem {...props} />,
+  bannedUserListQueryParams = {},
 }: BannedUserListProps): ReactElement => {
   const [members, setMembers] = useState<RestrictedUser[]>([]);
   const [hasNext, setHasNext] = useState(false);
@@ -40,7 +42,7 @@ export const BannedUserList = ({
       setMembers([]);
       return;
     }
-    const bannedUserListQuery = channel?.createBannedUserListQuery({ limit: 10 });
+    const bannedUserListQuery = channel?.createBannedUserListQuery({ limit: 10, ...bannedUserListQueryParams });
     bannedUserListQuery.next().then((users) => {
       setMembers(users);
       setHasNext(bannedUserListQuery.hasNext);
@@ -106,6 +108,7 @@ export const BannedUserList = ({
               refreshList();
             }}
             renderUserListItem={renderUserListItem}
+            bannedUserListQueryParams={bannedUserListQueryParams}
           />
         )
       }

src/modules/ChannelSettings/components/ModerationPanel/BannedUsersModal.tsx

@@ -11,26 +11,28 @@ import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
 import { noop } from '../../../../utils/utils';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { useLocalization } from '../../../../lib/LocalizationContext';
-import { BannedUserListQuery, RestrictedUser } from '@sendbird/chat';
+import { BannedUserListQuery, BannedUserListQueryParams, RestrictedUser } from '@sendbird/chat';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 export interface BannedUsersModalProps {
   onCancel(): void;
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  bannedUserListQueryParams?: BannedUserListQueryParams;
 }
 
 export function BannedUsersModal({
   onCancel,
   renderUserListItem = (props) => <UserListItem {...props} />,
+  bannedUserListQueryParams = {},
 }: BannedUsersModalProps): ReactElement {
   const [members, setMembers] = useState<RestrictedUser[]>([]);
   const [memberQuery, setMemberQuery] = useState<BannedUserListQuery | null>(null);
   const { channel } = useChannelSettingsContext();
   const { stringSet } = useLocalization();
 
   useEffect(() => {
-    const bannedUserListQuery = channel?.createBannedUserListQuery();
+    const bannedUserListQuery = channel?.createBannedUserListQuery({ limit: 20, ...bannedUserListQueryParams });
     if (bannedUserListQuery) {
       bannedUserListQuery.next().then((users) => {
         setMembers(users);

src/modules/ChannelSettings/components/ModerationPanel/MemberList.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   ReactNode,
 } from 'react';
-import type { Member } from '@sendbird/chat/groupChannel';
+import type { Member, MemberListQueryParams } from '@sendbird/chat/groupChannel';
 import { Role } from '@sendbird/chat';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
@@ -20,10 +20,12 @@ import MembersModal from './MembersModal';
 import { InviteUsersModal } from './InviteUsersModal';
 
 interface MemberListProps {
-  renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  renderUserListItem?: (props: UserListItemProps & { index: number }) => ReactNode;
+  memberListQueryParams?: MemberListQueryParams;
 }
 export const MemberList = ({
   renderUserListItem = (props) => <UserListItem {...props} />,
+  memberListQueryParams = {},
 }: MemberListProps): ReactElement => {
   const [members, setMembers] = useState<Array<Member>>([]);
   const [hasNext, setHasNext] = useState(false);
@@ -40,7 +42,7 @@ export const MemberList = ({
       setMembers([]);
       return;
     }
-    const memberUserListQuery = channel?.createMemberListQuery({ limit: 10 });
+    const memberUserListQuery = channel?.createMemberListQuery({ limit: 10, ...memberListQueryParams });
     memberUserListQuery.next().then((members) => {
       setMembers(members);
       setHasNext(memberUserListQuery.hasNext);
@@ -51,10 +53,12 @@ export const MemberList = ({
   return (
     <div className="sendbird-channel-settings-member-list">
       {
-        members.map((member) => (
+        members.map((member, index) => (
           <React.Fragment key={member.userId}>
             {
               renderUserListItem({
+                // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+                index,
                 user: member,
                 channel,
                 size: 'small',
@@ -122,6 +126,7 @@ export const MemberList = ({
               forceUpdateUI();
             }}
             renderUserListItem={renderUserListItem}
+            memberListQueryParams={memberListQueryParams}
           />
         )
       }

src/modules/ChannelSettings/components/ModerationPanel/MembersModal.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { Role } from '@sendbird/chat';
-import { type Member, MemberListQuery } from '@sendbird/chat/groupChannel';
+import type { Member, MemberListQuery, MemberListQueryParams } from '@sendbird/chat/groupChannel';
 
 import Modal from '../../../../ui/Modal';
 import UserListItem, { type UserListItemProps } from '../../../../ui/UserListItem';
@@ -19,12 +19,14 @@ import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 export interface MembersModalProps {
   onCancel(): void;
-  renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  renderUserListItem?: (props: UserListItemProps & { index: number }) => ReactNode;
+  memberListQueryParams?: MemberListQueryParams;
 }
 
 export function MembersModal({
   onCancel,
   renderUserListItem = (props) => <UserListItem {...props} />,
+  memberListQueryParams = {},
 }: MembersModalProps): ReactElement {
   const [members, setMembers] = useState<Member[]>([]);
   const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
@@ -35,6 +37,7 @@ export function MembersModal({
   useEffect(() => {
     const memberListQuery = channel?.createMemberListQuery({
       limit: 20,
+      ...memberListQueryParams,
     });
     memberListQuery?.next().then((members) => {
       setMembers(members);
@@ -65,10 +68,12 @@ export function MembersModal({
             },
           })}
         >
-          {members.map((member: Member) => (
+          {members.map((member: Member, index) => (
             <React.Fragment key={member.userId}>
               {
                 renderUserListItem({
+                  // NOTE: This `index` is used to display the current user's user item at the top when customizing externally.
+                  index,
                   user: member,
                   channel,
                   renderListItemMenu: (props) => (

src/modules/ChannelSettings/components/ModerationPanel/MutedMemberList.tsx

@@ -5,7 +5,7 @@ import React, {
   useCallback,
   ReactNode,
 } from 'react';
-import type { Member } from '@sendbird/chat/groupChannel';
+import type { Member, MemberListQueryParams } from '@sendbird/chat/groupChannel';
 
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { useLocalization } from '../../../../lib/LocalizationContext';
@@ -14,13 +14,15 @@ import Button, { ButtonTypes, ButtonSizes } from '../../../../ui/Button';
 import Label, { LabelTypography, LabelColors } from '../../../../ui/Label';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
-import MembersModal from './MembersModal';
+import MutedMembersModal from './MutedMembersModal';
 
 interface MutedMemberListProps {
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  memberListQueryParams?: MemberListQueryParams;
 }
 export const MutedMemberList = ({
   renderUserListItem = (props) => <UserListItem {...props} />,
+  memberListQueryParams = {},
 }: MutedMemberListProps): ReactElement => {
   const [members, setMembers] = useState<Member[]>([]);
   const [hasNext, setHasNext] = useState(false);
@@ -36,6 +38,7 @@ export const MutedMemberList = ({
     }
     const memberUserListQuery = channel?.createMemberListQuery({
       limit: 10,
+      ...memberListQueryParams,
       // @ts-ignore
       mutedMemberFilter: 'muted',
     });
@@ -101,12 +104,13 @@ export const MutedMemberList = ({
       }
       {
         showModal && (
-          <MembersModal
+          <MutedMembersModal
             onCancel={() => {
               setShowModal(false);
               refreshList();
             }}
             renderUserListItem={renderUserListItem}
+            memberListQueryParams={memberListQueryParams}
           />
         )
       }

src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx

@@ -10,18 +10,20 @@ import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
 import { noop } from '../../../../utils/utils';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { useLocalization } from '../../../../lib/LocalizationContext';
-import { Member, MemberListQuery } from '@sendbird/chat/groupChannel';
+import { Member, MemberListQuery, MemberListQueryParams } from '@sendbird/chat/groupChannel';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 export interface MutedMembersModalProps {
   onCancel(): void;
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  memberListQueryParams?: MemberListQueryParams;
 }
 
 export function MutedMembersModal({
   onCancel,
   renderUserListItem = (props) => <UserListItem {...props} />,
+  memberListQueryParams = {},
 }: MutedMembersModalProps): ReactElement {
   const [members, setMembers] = useState<Member[]>([]);
   const [memberQuery, setMemberQuery] = useState<MemberListQuery | null>(null);
@@ -32,6 +34,7 @@ export function MutedMembersModal({
   useEffect(() => {
     const memberUserListQuery = channel?.createMemberListQuery({
       limit: 20,
+      ...memberListQueryParams,
       // @ts-ignore
       mutedMemberFilter: 'muted',
     });

src/modules/ChannelSettings/components/ModerationPanel/OperatorList.tsx

@@ -6,7 +6,7 @@ import React, {
   useContext,
   ReactNode,
 } from 'react';
-import type { User } from '@sendbird/chat';
+import type { OperatorListQueryParams, User } from '@sendbird/chat';
 
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
@@ -20,9 +20,11 @@ import AddOperatorsModal from './AddOperatorsModal';
 
 interface OperatorListProps {
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  operatorListQueryParams?: OperatorListQueryParams;
 }
 export const OperatorList = ({
   renderUserListItem = (props) => <UserListItem {...props} />,
+  operatorListQueryParams = {},
 }: OperatorListProps): ReactElement => {
   const [operators, setOperators] = useState<User[]>([]);
   const [showMore, setShowMore] = useState(false);
@@ -36,7 +38,7 @@ export const OperatorList = ({
       setOperators([]);
       return;
     }
-    const operatorListQuery = channel?.createOperatorListQuery({ limit: 10 });
+    const operatorListQuery = channel?.createOperatorListQuery({ limit: 10, ...operatorListQueryParams });
     operatorListQuery.next().then((operators) => {
       setOperators(operators);
       setHasNext(operatorListQuery.hasNext);
@@ -110,6 +112,7 @@ export const OperatorList = ({
               refreshList();
             }}
             renderUserListItem={renderUserListItem}
+            operatorListQueryParams={operatorListQueryParams}
           />
         )
       }

src/modules/ChannelSettings/components/ModerationPanel/OperatorsModal.tsx

@@ -11,18 +11,20 @@ import UserListItem, { UserListItemProps } from '../../../../ui/UserListItem';
 
 import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
 import { LocalizationContext } from '../../../../lib/LocalizationContext';
-import { OperatorListQuery, User } from '@sendbird/chat';
+import { OperatorListQuery, OperatorListQueryParams, User } from '@sendbird/chat';
 import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
 import { UserListItemMenu } from '../../../../ui/UserListItemMenu';
 
 export interface OperatorsModalProps {
   onCancel?(): void;
   renderUserListItem?: (props: UserListItemProps) => ReactNode;
+  operatorListQueryParams?: OperatorListQueryParams;
 }
 
 export function OperatorsModal({
   onCancel,
   renderUserListItem = (props) => <UserListItem {...props} />,
+  operatorListQueryParams = {},
 }: OperatorsModalProps): ReactElement {
   const [operators, setOperators] = useState<User[]>([]);
   const [operatorQuery, setOperatorQuery] = useState<OperatorListQuery | null>(null);
@@ -31,9 +33,7 @@ export function OperatorsModal({
   const { stringSet } = useContext(LocalizationContext);
 
   useEffect(() => {
-    const operatorListQuery = channel?.createOperatorListQuery({
-      limit: 20,
-    });
+    const operatorListQuery = channel?.createOperatorListQuery({ limit: 20, ...operatorListQueryParams });
     operatorListQuery?.next().then((operators) => {
       setOperators(operators);
     });