From 8d56c75fd52a7c315e004384438a52786b474443 Mon Sep 17 00:00:00 2001 From: Reinaldo Neto <47038980+reinaldonetof@users.noreply.github.com> Date: Fri, 19 Aug 2022 14:27:04 -0300 Subject: [PATCH] [FIX] Pagination when search by members and fix the duplicated members in a Room's member's list (#4446) * [FIX] Duplicate members in a Room's member's list * fix search and pagination * fix the pagination for server lower than 3.16 Co-authored-by: Gleidson Daniel Silva --- app/lib/services/restApi.ts | 6 +-- app/views/RoomMembersView/index.tsx | 68 +++++++++++++++++++---------- 2 files changed, 46 insertions(+), 28 deletions(-) diff --git a/app/lib/services/restApi.ts b/app/lib/services/restApi.ts index 27c72d048..c58d7d3b8 100644 --- a/app/lib/services/restApi.ts +++ b/app/lib/services/restApi.ts @@ -866,7 +866,7 @@ export const getRoomMembers = async ({ allUsers: boolean; type: 'all' | 'online'; roomType: SubscriptionType; - filter: boolean; + filter: string; skip: number; limit: number; }) => { @@ -888,9 +888,7 @@ export const getRoomMembers = async ({ } // RC 0.42.0 const result = await sdk.methodCallWrapper('getUsersOfRoom', rid, allUsers, { skip, limit }); - if (result.success) { - return result?.records; - } + return result?.records; }; export const e2eFetchMyKeys = async () => { diff --git a/app/views/RoomMembersView/index.tsx b/app/views/RoomMembersView/index.tsx index faaef21fd..2805d8ae8 100644 --- a/app/views/RoomMembersView/index.tsx +++ b/app/views/RoomMembersView/index.tsx @@ -17,7 +17,6 @@ import { IApplicationState, IBaseScreen, IUser, SubscriptionType, TSubscriptionM import I18n from '../../i18n'; import database from '../../lib/database'; import { CustomIcon } from '../../containers/CustomIcon'; -import protectedFunction from '../../lib/methods/helpers/protectedFunction'; import UserItem from '../../containers/UserItem'; import { getUserSelector } from '../../selectors/login'; import { ModalStackParamList } from '../../stacks/MasterDetailStack/types'; @@ -29,7 +28,7 @@ import log from '../../lib/methods/helpers/log'; import scrollPersistTaps from '../../lib/methods/helpers/scrollPersistTaps'; import { TSupportedPermissions } from '../../reducers/permissions'; import { RoomTypes } from '../../lib/methods'; -import { getRoomTitle, hasPermission, isGroupChat } from '../../lib/methods/helpers'; +import { compareServerVersion, debounce, getRoomTitle, hasPermission, isGroupChat } from '../../lib/methods/helpers'; import styles from './styles'; import { Services } from '../../lib/services'; @@ -57,17 +56,19 @@ interface IRoomMembersViewProps extends IBaseScreen { @@ -86,12 +87,13 @@ class RoomMembersView extends React.Component { - const { members } = this.state; - let membersFiltered: TUserModel[] = []; - text = text.trim(); + get isServerVersionLowerThan3_16() { + const { serverVersion } = this.props; + return compareServerVersion(serverVersion, 'lowerThan', '3.16.0'); + } - if (members && members.length > 0 && text) { - membersFiltered = members.filter( - m => m.username.toLowerCase().match(text.toLowerCase()) || m.name?.toLowerCase().match(text.toLowerCase()) - ); + onSearchChangeText = debounce((text: string) => { + const { members } = this.state; + text = text.trim(); + if (this.isServerVersionLowerThan3_16) { + let membersFiltered: TUserModel[] = []; + + if (members && members.length > 0 && text) { + membersFiltered = members.filter( + m => m.username.toLowerCase().match(text.toLowerCase()) || m.name?.toLowerCase().match(text.toLowerCase()) + ); + } + return this.setState({ filtering: text, membersFiltered }); } - this.setState({ filtering: !!text, membersFiltered }); - }); + + this.setState({ filtering: text, page: 0, members: [], end: false }, () => { + this.fetchMembers(); + }); + }, 500); navToDirectMessage = async (item: IUser) => { try { @@ -265,7 +278,9 @@ class RoomMembersView extends React.Component member._id !== userId); - const newMembersFiltered = membersFiltered.filter(member => member._id !== userId); + const newMembersFiltered = this.isServerVersionLowerThan3_16 + ? membersFiltered.filter(member => member._id !== userId) + : []; this.setState({ members: newMembers, membersFiltered: newMembersFiltered @@ -423,7 +438,7 @@ class RoomMembersView extends React.Component { try { const { allUsers } = this.state; - this.setState({ members: [], allUsers: !allUsers, end: false }, () => { + this.setState({ members: [], allUsers: !allUsers, end: false, page: 0 }, () => { this.fetchMembers(); }); } catch (e) { @@ -445,8 +460,9 @@ class RoomMembersView extends React.Component { - const { rid, members, isLoading, allUsers, end, room, filtering } = this.state; + const { rid, members, isLoading, allUsers, end, room, filtering, page } = this.state; const { t } = room; + if (isLoading || end) { return; } @@ -458,14 +474,17 @@ class RoomMembersView extends React.Component !members.some(m => m._id === member._id)); this.setState({ - members: members.concat(membersResult || []), + members: members.concat(membersResultFiltered || []), isLoading: false, - end: membersResult?.length < PAGE_SIZE + end, + page: page + 1 }); this.setHeader(); } catch (e) { @@ -599,7 +618,7 @@ class RoomMembersView extends React.Component member._id !== userId), - membersFiltered: membersFiltered.filter(member => member._id !== userId) + membersFiltered: this.isServerVersionLowerThan3_16 ? membersFiltered.filter(member => member._id !== userId) : [] }); } catch (e) { log(e); @@ -629,7 +648,7 @@ class RoomMembersView extends React.Component item._id} @@ -664,7 +683,8 @@ const mapStateToProps = (state: IApplicationState) => ({ removeUserPermission: state.permissions['remove-user'], editTeamMemberPermission: state.permissions['edit-team-member'], viewAllTeamChannelsPermission: state.permissions['view-all-team-channels'], - viewAllTeamsPermission: state.permissions['view-all-teams'] + viewAllTeamsPermission: state.permissions['view-all-teams'], + serverVersion: state.server.version }); export default connect(mapStateToProps)(withTheme(withActionSheet(RoomMembersView)));