[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:
parent
7da5801452
commit
8d56c75fd5
|
@ -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 () => {
|
||||
|
|
|
@ -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)));
|
||||
|
|
Loading…
Reference in New Issue