toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix channel members list not fully loaded (#7896) (#7908)

Browse source 
* Load more users when reaching bottom of the list

Fix mattermost issue when typing quickly within search input

* Update: logic to load next users on bottom list reached

* Update: logic refactored

---------

Co-authored-by: Philippe Ka <philippe.karle@infomaniak.com>
(cherry picked from commit 02261eb8c0)

Co-authored-by: Philippe Karle <32866015+Pkarle@users.noreply.github.com>
This commit is contained in:
Mattermost Build 2024-04-17 11:09:43 +03:00 committed by GitHub
parent a0053607eb
commit 409b3d2932
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 35 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
app/screens/manage_channel_members/manage_channel_members.tsx
View file

@ -84,10 +84,11 @@ export default function ManageChannelMembers({
const searchTimeoutId = useRef<NodeJS.Timeout | null>(null);
const mounted = useRef(false);
const hasMoreProfiles = useRef(true);
const pageRef = useRef(0);
const [isManageMode, setIsManageMode] = useState(false);
const [profiles, setProfiles] = useState<UserProfile[]>(EMPTY);
const hasMoreProfiles = useRef(false);
const [channelMembers, setChannelMembers] = useState<ChannelMembership[]>(EMPTY_MEMBERS);
const [searchResults, setSearchResults] = useState<UserProfile[]>(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}
/>
</SafeAreaView>
);