[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 <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2022-08-19 14:27:04 -03:00 committed by Diego Mello
parent 7da5801452
commit 8d56c75fd5
2 changed files with 46 additions and 28 deletions

View File

@ -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 () => {

View File

@ -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<ModalStackParamList, 'RoomMe
editTeamMemberPermission: string[];
viewAllTeamChannelsPermission: string[];
viewAllTeamsPermission: string[];
serverVersion: string;
}
interface IRoomMembersViewState {
isLoading: boolean;
allUsers: boolean;
filtering: boolean;
filtering: string;
rid: string;
members: TUserModel[];
membersFiltered: TUserModel[];
room: TSubscriptionModel;
end: boolean;
page: number;
}
class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMembersViewState> {
@ -86,12 +87,13 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
this.state = {
isLoading: false,
allUsers: false,
filtering: false,
filtering: '',
rid,
members: [],
membersFiltered: [],
room: room || ({} as TSubscriptionModel),
end: false
end: false,
page: 0
};
if (room && room.observe) {
this.roomObservable = room.observe();
@ -179,18 +181,29 @@ class RoomMembersView extends React.Component<IRoomMembersViewProps, IRoomMember
});
};
onSearchChangeText = protectedFunction((text: string) => {
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<IRoomMembersViewProps, IRoomMember
const message = I18n.t('User_has_been_removed_from_s', { s: getRoomTitle(room) });
EventEmitter.emit(LISTENER, { message });
const newMembers = members.filter(member => 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<IRoomMembersViewProps, IRoomMember
toggleStatus = () => {
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<IRoomMembersViewProps, IRoomMember
};
fetchMembers = async () => {
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<IRoomMembersViewProps, IRoomMember
roomType: t,
type: allUsers ? 'all' : 'online',
filter: filtering,
skip: members.length,
skip: PAGE_SIZE * page,
limit: PAGE_SIZE,
allUsers
});
const end = membersResult?.length < PAGE_SIZE;
const membersResultFiltered = membersResult?.filter((member: TUserModel) => !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<IRoomMembersViewProps, IRoomMember
EventEmitter.emit(LISTENER, { message });
this.setState({
members: members.filter(member => 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<IRoomMembersViewProps, IRoomMember
<SafeAreaView testID='room-members-view'>
<StatusBar />
<FlatList
data={filtering ? membersFiltered : members}
data={!!filtering && this.isServerVersionLowerThan3_16 ? membersFiltered : members}
renderItem={this.renderItem}
style={[styles.list, { backgroundColor: themes[theme].backgroundColor }]}
keyExtractor={item => 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)));