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', });