diff --git a/app/screens/manage_channel_members/manage_channel_members.tsx b/app/screens/manage_channel_members/manage_channel_members.tsx index f188ec1c7..610fa0335 100644 --- a/app/screens/manage_channel_members/manage_channel_members.tsx +++ b/app/screens/manage_channel_members/manage_channel_members.tsx @@ -84,10 +84,11 @@ export default function ManageChannelMembers({ const searchTimeoutId = useRef(null); const mounted = useRef(false); + const hasMoreProfiles = useRef(true); + const pageRef = useRef(0); const [isManageMode, setIsManageMode] = useState(false); const [profiles, setProfiles] = useState(EMPTY); - const hasMoreProfiles = useRef(false); const [channelMembers, setChannelMembers] = useState(EMPTY_MEMBERS); const [searchResults, setSearchResults] = useState(EMPTY); const [loading, setLoading] = useState(true); @@ -97,6 +98,9 @@ export default function ManageChannelMembers({ const clearSearch = useCallback(() => { setTerm(''); setSearchResults(EMPTY); + if (searchTimeoutId.current) { + clearTimeout(searchTimeoutId.current); + } }, []); const close = useCallback(() => { @@ -231,23 +235,38 @@ export default function ManageChannelMembers({ useNavButtonPressed(MANAGE_BUTTON, componentId, toggleManageEnabled, [toggleManageEnabled]); + const getFetchChannelMembers = useCallback(async () => { + const options: GetUsersOptions = {sort: 'admin', active: true, per_page: PER_PAGE_DEFAULT, page: pageRef.current}; + const {users, members} = await fetchChannelMemberships(serverUrl, channelId, options, true); + + if (!mounted.current) { + return; + } + + if (users.length < PER_PAGE_DEFAULT) { + hasMoreProfiles.current = false; + } + + if (users.length) { + setChannelMembers((prev) => [...prev, ...members]); + setProfiles((prev) => [...prev, ...users]); + } + + setLoading(false); + }, [serverUrl, channelId]); + + const handleReachedBottom = useCallback(() => { + if (hasMoreProfiles.current && !loading && !searchedTerm) { + pageRef.current += 1; + setLoading(true); + getFetchChannelMembers(); + } + }, [loading, searchedTerm, getFetchChannelMembers]); + useEffect(() => { mounted.current = true; - const options: GetUsersOptions = {sort: 'admin', active: true, per_page: PER_PAGE_DEFAULT}; - fetchChannelMemberships(serverUrl, channelId, options, true).then(({users, members}) => { - if (!mounted.current) { - return; - } + getFetchChannelMembers(); - if (users.length >= PER_PAGE_DEFAULT) { - hasMoreProfiles.current = true; - } - if (users.length) { - setProfiles(users); - setChannelMembers(members); - } - setLoading(false); - }); return () => { mounted.current = false; }; @@ -301,6 +320,7 @@ export default function ManageChannelMembers({ testID='manage_members.user_list' tutorialWatched={tutorialWatched} includeUserMargin={true} + fetchMore={handleReachedBottom} /> );