From 9267bbcc5ba7bf5bda93ee801d573d3a8e488bfe Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 14 Mar 2024 11:51:37 +0900
Subject: [PATCH 1/2] Fix scroll issue on the AddOperatorsModal and
 MutedMembersModal

---
 .../ModerationPanel/AddOperatorsModal.tsx     | 29 +++++++++----------
 .../ModerationPanel/MutedMembersModal.tsx     |  2 +-
 2 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
index af6005b2f..13fcef6a2 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({
         </Label>
         <div
           className="sendbird-more-members__popup-scroll"
-          onScroll={(e) => {
-            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',
     });

From 8b7aedb41a9d37f17b3fdeb464217af24c0c3e97 Mon Sep 17 00:00:00 2001
From: HoonBaek <hoon@sendbird.com>
Date: Thu, 14 Mar 2024 11:54:30 +0900
Subject: [PATCH 2/2] fix lint

---
 .../components/ModerationPanel/AddOperatorsModal.tsx            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
index 13fcef6a2..1d811a887 100644
--- a/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
+++ b/src/modules/ChannelSettings/components/ModerationPanel/AddOperatorsModal.tsx
@@ -79,7 +79,7 @@ export default function AddOperatorsModal({
                   ]);
                 });
               }
-            }
+            },
           })}
         >
           {