diff --git a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
index af6005b2f..1d811a887 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
@@ -4,6 +4,7 @@ import React, {
useState,
useContext,
} from 'react';
+import { OperatorFilter } from '@sendbird/chat/groupChannel';
import { LocalizationContext } from '../../../../lib/LocalizationContext';
import Modal from '../../../../ui/Modal';
@@ -14,7 +15,7 @@ import Label, {
import { ButtonTypes } from '../../../../ui/Button';
import UserListItem from '../../../../ui/UserListItem';
import { useChannelSettingsContext } from '../../context/ChannelSettingsProvider';
-import { OperatorFilter } from '@sendbird/chat/groupChannel';
+import { useOnScrollPositionChangeDetector } from '../../../../hooks/useOnScrollReachedEndDetector';
interface Props {
onCancel(): void;
@@ -67,21 +68,19 @@ export default function AddOperatorsModal({
{
- const { hasNext } = memberQuery;
- const target = e.target as HTMLTextAreaElement;
- const fetchMore = (
- target.clientHeight + target.scrollTop === target.scrollHeight
- );
- if (hasNext && fetchMore) {
- memberQuery.next().then((o) => {
- setMembers([
- ...members,
- ...o,
- ]);
- });
- }
- }}
+ onScroll={useOnScrollPositionChangeDetector({
+ onReachedBottom: async () => {
+ const { hasNext } = memberQuery;
+ if (hasNext) {
+ memberQuery.next().then((o) => {
+ setMembers([
+ ...members,
+ ...o,
+ ]);
+ });
+ }
+ },
+ })}
>
{
members.map((member) => (
diff --git a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
index cbecf7410..993496be9 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/MutedMembersModal.tsx
@@ -32,7 +32,7 @@ export default function MutedMembersModal({
useEffect(() => {
const memberUserListQuery = channel?.createMemberListQuery({
- limit: 10,
+ limit: 20,
// @ts-ignore
mutedMemberFilter: 'muted',
});