279 lines
6.9 KiB
JavaScript
279 lines
6.9 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import {
|
|
FlatList, View, Vibration
|
|
} from 'react-native';
|
|
import ActionSheet from 'react-native-action-sheet';
|
|
import { connect } from 'react-redux';
|
|
import SafeAreaView from 'react-native-safe-area-view';
|
|
import equal from 'deep-equal';
|
|
|
|
import Navigation from '../../lib/Navigation';
|
|
import LoggedView from '../View';
|
|
import styles from './styles';
|
|
import UserItem from '../../presentation/UserItem';
|
|
import scrollPersistTaps from '../../utils/scrollPersistTaps';
|
|
import RocketChat from '../../lib/rocketchat';
|
|
import database from '../../lib/realm';
|
|
import { showToast } from '../../utils/info';
|
|
import log from '../../utils/log';
|
|
import { isAndroid } from '../../utils/deviceInfo';
|
|
import I18n from '../../i18n';
|
|
import SearchBox from '../../containers/SearchBox';
|
|
|
|
@connect(state => ({
|
|
baseUrl: state.settings.Site_Url || state.server ? state.server.server : '',
|
|
room: state.room
|
|
}))
|
|
/** @extends React.Component */
|
|
export default class RoomMembersView extends LoggedView {
|
|
static options() {
|
|
return {
|
|
topBar: {
|
|
title: {
|
|
text: I18n.t('Members')
|
|
},
|
|
rightButtons: [{
|
|
id: 'toggleOnline',
|
|
text: I18n.t('Online'),
|
|
testID: 'room-members-view-toggle-status',
|
|
color: isAndroid ? '#FFF' : undefined
|
|
}]
|
|
}
|
|
};
|
|
}
|
|
|
|
static propTypes = {
|
|
componentId: PropTypes.string,
|
|
rid: PropTypes.string,
|
|
members: PropTypes.array,
|
|
baseUrl: PropTypes.string,
|
|
room: PropTypes.object
|
|
}
|
|
|
|
constructor(props) {
|
|
super('MentionedMessagesView', props);
|
|
|
|
this.CANCEL_INDEX = 0;
|
|
this.MUTE_INDEX = 1;
|
|
this.actionSheetOptions = [''];
|
|
const { rid, members, room } = props;
|
|
this.rooms = database.objects('subscriptions').filtered('rid = $0', rid);
|
|
this.permissions = RocketChat.hasPermission(['mute-user'], rid);
|
|
this.state = {
|
|
allUsers: false,
|
|
filtering: false,
|
|
rid,
|
|
members,
|
|
membersFiltered: [],
|
|
userLongPressed: {},
|
|
room,
|
|
options: []
|
|
};
|
|
Navigation.events().bindComponent(this);
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.fetchMembers();
|
|
this.rooms.addListener(this.updateRoom);
|
|
}
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
const {
|
|
allUsers, filtering, members, membersFiltered, userLongPressed, room, options
|
|
} = this.state;
|
|
if (nextState.allUsers !== allUsers) {
|
|
return true;
|
|
}
|
|
if (nextState.filtering !== filtering) {
|
|
return true;
|
|
}
|
|
if (!equal(nextState.members, members)) {
|
|
return true;
|
|
}
|
|
if (!equal(nextState.options, options)) {
|
|
return true;
|
|
}
|
|
if (!equal(nextState.membersFiltered, membersFiltered)) {
|
|
return true;
|
|
}
|
|
if (!equal(nextState.userLongPressed, userLongPressed)) {
|
|
return true;
|
|
}
|
|
if (!equal(nextState.room.muted, room.muted)) {
|
|
return true;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.rooms.removeAllListeners();
|
|
}
|
|
|
|
navigationButtonPressed = ({ buttonId }) => {
|
|
const { allUsers } = this.state;
|
|
const { componentId } = this.props;
|
|
|
|
if (buttonId === 'toggleOnline') {
|
|
try {
|
|
Navigation.mergeOptions(componentId, {
|
|
topBar: {
|
|
rightButtons: [{
|
|
id: 'toggleOnline',
|
|
text: allUsers ? I18n.t('Online') : I18n.t('All'),
|
|
testID: 'room-members-view-toggle-status',
|
|
color: isAndroid ? '#FFF' : undefined
|
|
}]
|
|
}
|
|
});
|
|
this.fetchMembers(!allUsers);
|
|
} catch (e) {
|
|
log('RoomMembers.onNavigationButtonPressed', e);
|
|
}
|
|
}
|
|
}
|
|
|
|
onSearchChangeText = (text) => {
|
|
const { members } = this.state;
|
|
|
|
let membersFiltered = [];
|
|
if (text) {
|
|
membersFiltered = members.filter(m => m.username.toLowerCase().match(text.toLowerCase()));
|
|
}
|
|
this.setState({ filtering: !!text, membersFiltered });
|
|
}
|
|
|
|
onPressUser = async(item) => {
|
|
try {
|
|
const subscriptions = database.objects('subscriptions').filtered('name = $0', item.username);
|
|
if (subscriptions.length) {
|
|
this.goRoom({ rid: subscriptions[0].rid, name: item.username });
|
|
} else {
|
|
const result = await RocketChat.createDirectMessage(item.username);
|
|
if (result.success) {
|
|
this.goRoom({ rid: result.room._id, name: item.username });
|
|
}
|
|
}
|
|
} catch (e) {
|
|
log('onPressUser', e);
|
|
}
|
|
}
|
|
|
|
onLongPressUser = (user) => {
|
|
if (!this.permissions['mute-user']) {
|
|
return;
|
|
}
|
|
const { room } = this.state;
|
|
const { muted } = room;
|
|
|
|
this.actionSheetOptions = [I18n.t('Cancel')];
|
|
const userIsMuted = !!muted.find(m => m.value === user.username);
|
|
user.muted = userIsMuted;
|
|
if (userIsMuted) {
|
|
this.actionSheetOptions.push(I18n.t('Unmute'));
|
|
} else {
|
|
this.actionSheetOptions.push(I18n.t('Mute'));
|
|
}
|
|
this.setState({ userLongPressed: user });
|
|
Vibration.vibrate(50);
|
|
this.showActionSheet();
|
|
}
|
|
|
|
showActionSheet = () => {
|
|
ActionSheet.showActionSheetWithOptions({
|
|
options: this.actionSheetOptions,
|
|
cancelButtonIndex: this.CANCEL_INDEX,
|
|
title: I18n.t('Actions')
|
|
}, (actionIndex) => {
|
|
this.handleActionPress(actionIndex);
|
|
});
|
|
}
|
|
|
|
fetchMembers = async(status) => {
|
|
const { rid } = this.state;
|
|
const membersResult = await RocketChat.getRoomMembers(rid, status);
|
|
const members = membersResult.records;
|
|
this.setState({ allUsers: status, members });
|
|
}
|
|
|
|
updateRoom = () => {
|
|
if (this.rooms.length > 0) {
|
|
const [room] = this.rooms;
|
|
this.setState({ room });
|
|
}
|
|
}
|
|
|
|
goRoom = async({ rid, name }) => {
|
|
const { componentId } = this.props;
|
|
await Navigation.popToRoot(componentId);
|
|
Navigation.push('RoomsListView', {
|
|
component: {
|
|
name: 'RoomView',
|
|
passProps: {
|
|
rid, name, t: 'd'
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
handleMute = async() => {
|
|
const { rid, userLongPressed } = this.state;
|
|
try {
|
|
await RocketChat.toggleMuteUserInRoom(rid, userLongPressed.username, !userLongPressed.muted);
|
|
showToast(I18n.t('User_has_been_key', { key: userLongPressed.muted ? I18n.t('unmuted') : I18n.t('muted') }));
|
|
} catch (e) {
|
|
log('handleMute', e);
|
|
}
|
|
}
|
|
|
|
handleActionPress = (actionIndex) => {
|
|
switch (actionIndex) {
|
|
case this.MUTE_INDEX:
|
|
this.handleMute();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
}
|
|
|
|
renderSearchBar = () => (
|
|
<SearchBox onChangeText={text => this.onSearchChangeText(text)} testID='room-members-view-search' />
|
|
)
|
|
|
|
renderSeparator = () => <View style={styles.separator} />;
|
|
|
|
renderItem = ({ item }) => {
|
|
const { baseUrl } = this.props;
|
|
|
|
return (
|
|
<UserItem
|
|
name={item.name}
|
|
username={item.username}
|
|
onPress={() => this.onPressUser(item)}
|
|
onLongPress={() => this.onLongPressUser(item)}
|
|
baseUrl={baseUrl}
|
|
testID={`room-members-view-item-${ item.username }`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
filtering, members, membersFiltered
|
|
} = this.state;
|
|
return (
|
|
<SafeAreaView style={styles.list} testID='room-members-view' forceInset={{ bottom: 'never' }}>
|
|
<FlatList
|
|
data={filtering ? membersFiltered : members}
|
|
renderItem={this.renderItem}
|
|
style={styles.list}
|
|
keyExtractor={item => item._id}
|
|
ItemSeparatorComponent={this.renderSeparator}
|
|
ListHeaderComponent={this.renderSearchBar}
|
|
{...scrollPersistTaps}
|
|
/>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
}
|