import React from 'react'; import PropTypes from 'prop-types'; import { FlatList, View } from 'react-native'; import { connect } from 'react-redux'; import { Q } from '@nozbe/watermelondb'; import styles from './styles'; import UserItem from '../../presentation/UserItem'; import scrollPersistTaps from '../../utils/scrollPersistTaps'; import RocketChat from '../../lib/rocketchat'; import database from '../../lib/database'; import { LISTENER } from '../../containers/Toast'; import EventEmitter from '../../utils/events'; import log from '../../utils/log'; import I18n from '../../i18n'; import SearchBox from '../../containers/SearchBox'; import protectedFunction from '../../lib/methods/helpers/protectedFunction'; import * as HeaderButton from '../../containers/HeaderButton'; import StatusBar from '../../containers/StatusBar'; import ActivityIndicator from '../../containers/ActivityIndicator'; import { withTheme } from '../../theme'; import { themes } from '../../constants/colors'; import { getUserSelector } from '../../selectors/login'; import { withActionSheet } from '../../containers/ActionSheet'; import { showConfirmationAlert } from '../../utils/info'; import SafeAreaView from '../../containers/SafeAreaView'; import { goRoom } from '../../utils/goRoom'; const PAGE_SIZE = 25; const PERMISSION_MUTE_USER = 'mute-user'; const PERMISSION_SET_LEADER = 'set-leader'; const PERMISSION_SET_OWNER = 'set-owner'; const PERMISSION_SET_MODERATOR = 'set-moderator'; const PERMISSION_REMOVE_USER = 'remove-user'; class RoomMembersView extends React.Component { static propTypes = { navigation: PropTypes.object, route: PropTypes.object, rid: PropTypes.string, members: PropTypes.array, baseUrl: PropTypes.string, room: PropTypes.object, user: PropTypes.shape({ id: PropTypes.string, token: PropTypes.string }), showActionSheet: PropTypes.func, theme: PropTypes.string, isMasterDetail: PropTypes.bool, useRealName: PropTypes.bool, muteUserPermission: PropTypes.array, setLeaderPermission: PropTypes.array, setOwnerPermission: PropTypes.array, setModeratorPermission: PropTypes.array, removeUserPermission: PropTypes.array } constructor(props) { super(props); this.mounted = false; this.MUTE_INDEX = 0; const rid = props.route.params?.rid; const room = props.route.params?.room; this.state = { isLoading: false, allUsers: false, filtering: false, rid, members: [], membersFiltered: [], room: room || {}, end: false }; if (room && room.observe) { this.roomObservable = room.observe(); this.subscription = this.roomObservable .subscribe((changes) => { if (this.mounted) { this.setState({ room: changes }); } else { this.state.room = changes; } }); } this.setHeader(); } async componentDidMount() { this.mounted = true; this.fetchMembers(); const { room } = this.state; const { muteUserPermission, setLeaderPermission, setOwnerPermission, setModeratorPermission, removeUserPermission } = this.props; const result = await RocketChat.hasPermission([ muteUserPermission, setLeaderPermission, setOwnerPermission, setModeratorPermission, removeUserPermission ], room.rid); this.permissions = { [PERMISSION_MUTE_USER]: result[0], [PERMISSION_SET_LEADER]: result[1], [PERMISSION_SET_OWNER]: result[2], [PERMISSION_SET_MODERATOR]: result[3], [PERMISSION_REMOVE_USER]: result[4] }; const hasSinglePermission = Object.values(this.permissions).some(p => !!p); if (hasSinglePermission) { this.fetchRoomMembersRoles(); } } componentWillUnmount() { if (this.subscription && this.subscription.unsubscribe) { this.subscription.unsubscribe(); } } setHeader = () => { const { allUsers } = this.state; const { navigation } = this.props; const toggleText = allUsers ? I18n.t('Online') : I18n.t('All'); navigation.setOptions({ title: I18n.t('Members'), headerRight: () => ( ) }); } onSearchChangeText = protectedFunction((text) => { const { members } = this.state; let membersFiltered = []; if (members && members.length > 0 && text) { membersFiltered = members.filter(m => m.username.toLowerCase().match(text.toLowerCase())); } this.setState({ filtering: !!text, membersFiltered }); }) navToDirectMessage = async(item) => { try { const db = database.active; const subsCollection = db.collections.get('subscriptions'); const query = await subsCollection.query(Q.where('name', item.username)).fetch(); if (query.length) { const [room] = query; this.goRoom(room); } else { const result = await RocketChat.createDirectMessage(item.username); if (result.success) { this.goRoom({ rid: result.room?._id, name: item.username, t: 'd' }); } } } catch (e) { log(e); } } onPressUser = (selectedUser) => { const { room } = this.state; const { showActionSheet, user } = this.props; const options = [{ icon: 'message', title: I18n.t('Direct_message'), onPress: () => this.navToDirectMessage(selectedUser) }]; // Owner if (this.permissions['set-owner']) { const userRoleResult = this.roomRoles.find(r => r.u._id === selectedUser._id); const isOwner = userRoleResult?.roles.includes('owner'); options.push({ icon: 'shield-check', title: I18n.t(isOwner ? 'Remove_as_owner' : 'Set_as_owner'), onPress: () => this.handleOwner(selectedUser, !isOwner) }); } // Leader if (this.permissions['set-leader']) { const userRoleResult = this.roomRoles.find(r => r.u._id === selectedUser._id); const isLeader = userRoleResult?.roles.includes('leader'); options.push({ icon: 'shield-alt', title: I18n.t(isLeader ? 'Remove_as_leader' : 'Set_as_leader'), onPress: () => this.handleLeader(selectedUser, !isLeader) }); } // Moderator if (this.permissions['set-moderator']) { const userRoleResult = this.roomRoles.find(r => r.u._id === selectedUser._id); const isModerator = userRoleResult?.roles.includes('moderator'); options.push({ icon: 'shield', title: I18n.t(isModerator ? 'Remove_as_moderator' : 'Set_as_moderator'), onPress: () => this.handleModerator(selectedUser, !isModerator) }); } // Ignore if (selectedUser._id !== user.id) { const { ignored } = room; const isIgnored = ignored?.includes?.(selectedUser._id); options.push({ icon: 'ignore', title: I18n.t(isIgnored ? 'Unignore' : 'Ignore'), onPress: () => this.handleIgnore(selectedUser, !isIgnored) }); } if (this.permissions['mute-user']) { const { muted = [] } = room; const userIsMuted = muted.find?.(m => m === selectedUser.username); selectedUser.muted = !!userIsMuted; options.push({ icon: userIsMuted ? 'audio' : 'audio-disabled', title: I18n.t(userIsMuted ? 'Unmute' : 'Mute'), onPress: () => { showConfirmationAlert({ message: I18n.t(`The_user_${ userIsMuted ? 'will' : 'wont' }_be_able_to_type_in_roomName`, { roomName: RocketChat.getRoomTitle(room) }), confirmationText: I18n.t(userIsMuted ? 'Unmute' : 'Mute'), onPress: () => this.handleMute(selectedUser) }); } }); } // Remove from room if (this.permissions['remove-user']) { options.push({ icon: 'logout', title: I18n.t('Remove_from_room'), danger: true, onPress: () => { showConfirmationAlert({ message: I18n.t('The_user_will_be_removed_from_s', { s: RocketChat.getRoomTitle(room) }), confirmationText: I18n.t('Yes_remove_user'), onPress: () => this.handleRemoveUserFromRoom(selectedUser) }); } }); } showActionSheet({ options, hasCancel: true }); } toggleStatus = () => { try { const { allUsers } = this.state; this.setState({ members: [], allUsers: !allUsers, end: false }, () => { this.fetchMembers(); }); } catch (e) { log(e); } } fetchRoomMembersRoles = async() => { try { const { room } = this.state; const result = await RocketChat.getRoomRoles(room.rid, room.t); if (result?.success) { this.roomRoles = result.roles; } } catch (e) { log(e); } } fetchMembers = async() => { const { rid, members, isLoading, allUsers, end } = this.state; if (isLoading || end) { return; } this.setState({ isLoading: true }); try { const membersResult = await RocketChat.getRoomMembers(rid, allUsers, members.length, PAGE_SIZE); const newMembers = membersResult.records; this.setState({ members: members.concat(newMembers || []), isLoading: false, end: newMembers.length < PAGE_SIZE }); this.setHeader(); } catch (e) { log(e); this.setState({ isLoading: false }); } } goRoom = (item) => { const { navigation, isMasterDetail } = this.props; if (isMasterDetail) { navigation.navigate('DrawerNavigator'); } else { navigation.popToTop(); } goRoom({ item, isMasterDetail }); } getUserDisplayName = (user) => { const { useRealName } = this.props; return (useRealName ? user.name : user.username) || user.username; } handleMute = async(user) => { const { rid } = this.state; try { await RocketChat.toggleMuteUserInRoom(rid, user?.username, !user?.muted); EventEmitter.emit(LISTENER, { message: I18n.t('User_has_been_key', { key: user?.muted ? I18n.t('unmuted') : I18n.t('muted') }) }); } catch (e) { log(e); } } handleOwner = async(selectedUser, isOwner) => { try { const { room } = this.state; await RocketChat.toggleRoomOwner({ roomId: room.rid, t: room.t, userId: selectedUser._id, isOwner }); const message = isOwner ? 'User__username__is_now_a_owner_of__room_name_' : 'User__username__removed_from__room_name__owners'; EventEmitter.emit(LISTENER, { message: I18n.t(message, { username: this.getUserDisplayName(selectedUser), room_name: RocketChat.getRoomTitle(room) }) }); } catch (e) { log(e); } this.fetchRoomMembersRoles(); } handleLeader = async(selectedUser, isLeader) => { try { const { room } = this.state; await RocketChat.toggleRoomLeader({ roomId: room.rid, t: room.t, userId: selectedUser._id, isLeader }); const message = isLeader ? 'User__username__is_now_a_leader_of__room_name_' : 'User__username__removed_from__room_name__leaders'; EventEmitter.emit(LISTENER, { message: I18n.t(message, { username: this.getUserDisplayName(selectedUser), room_name: RocketChat.getRoomTitle(room) }) }); } catch (e) { log(e); } this.fetchRoomMembersRoles(); } handleModerator = async(selectedUser, isModerator) => { try { const { room } = this.state; await RocketChat.toggleRoomModerator({ roomId: room.rid, t: room.t, userId: selectedUser._id, isModerator }); const message = isModerator ? 'User__username__is_now_a_moderator_of__room_name_' : 'User__username__removed_from__room_name__moderators'; EventEmitter.emit(LISTENER, { message: I18n.t(message, { username: this.getUserDisplayName(selectedUser), room_name: RocketChat.getRoomTitle(room) }) }); } catch (e) { log(e); } this.fetchRoomMembersRoles(); } handleIgnore = async(selectedUser, ignore) => { try { const { room } = this.state; await RocketChat.ignoreUser({ rid: room.rid, userId: selectedUser._id, ignore }); const message = I18n.t(ignore ? 'User_has_been_ignored' : 'User_has_been_unignored'); EventEmitter.emit(LISTENER, { message }); } catch (e) { log(e); } } handleRemoveUserFromRoom = async(selectedUser) => { try { const { room, members, membersFiltered } = this.state; const userId = selectedUser._id; await RocketChat.removeUserFromRoom({ roomId: room.rid, t: room.t, userId }); const message = I18n.t('User_has_been_removed_from_s', { s: RocketChat.getRoomTitle(room) }); EventEmitter.emit(LISTENER, { message }); this.setState({ members: members.filter(member => member._id !== userId), membersFiltered: membersFiltered.filter(member => member._id !== userId) }); } catch (e) { log(e); } } renderSearchBar = () => ( this.onSearchChangeText(text)} testID='room-members-view-search' /> ) renderSeparator = () => { const { theme } = this.props; return ; } renderItem = ({ item }) => { const { baseUrl, user, theme } = this.props; return ( this.onPressUser(item)} baseUrl={baseUrl} testID={`room-members-view-item-${ item.username }`} user={user} theme={theme} /> ); } render() { const { filtering, members, membersFiltered, isLoading } = this.state; const { theme } = this.props; return ( item._id} ItemSeparatorComponent={this.renderSeparator} ListHeaderComponent={this.renderSearchBar} ListFooterComponent={() => { if (isLoading) { return ; } return null; }} onEndReachedThreshold={0.1} onEndReached={this.fetchMembers} maxToRenderPerBatch={5} windowSize={10} {...scrollPersistTaps} /> ); } } const mapStateToProps = state => ({ baseUrl: state.server.server, user: getUserSelector(state), isMasterDetail: state.app.isMasterDetail, useRealName: state.settings.UI_Use_Real_Name, muteUserPermission: state.permissions[PERMISSION_MUTE_USER], setLeaderPermission: state.permissions[PERMISSION_SET_LEADER], setOwnerPermission: state.permissions[PERMISSION_SET_OWNER], setModeratorPermission: state.permissions[PERMISSION_SET_MODERATOR], removeUserPermission: state.permissions[PERMISSION_REMOVE_USER] }); export default connect(mapStateToProps)(withActionSheet(withTheme(RoomMembersView)));