import React from 'react'; import PropTypes from 'prop-types'; import { View, SectionList, Text, Alert } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons'; import MaterialIcon from 'react-native-vector-icons/MaterialIcons'; import { connect } from 'react-redux'; import LoggedView from '../View'; import styles from './styles'; import sharedStyles from '../Styles'; import Avatar from '../../containers/Avatar'; import Status from '../../containers/status'; import Touch from '../../utils/touch'; import database from '../../lib/realm'; import RocketChat from '../../lib/rocketchat'; import { leaveRoom } from '../../actions/room'; import { setLoading } from '../../actions/selectedUsers'; import log from '../../utils/log'; import RoomTypeIcon from '../../containers/RoomTypeIcon'; import I18n from '../../i18n'; const renderSeparator = () => ; const getRoomTitle = room => (room.t === 'd' ? {room.fname} :  {room.name}); @connect(state => ({ user_id: state.login.user.id, user_username: state.login.user.username }), dispatch => ({ leaveRoom: rid => dispatch(leaveRoom(rid)), setLoadingInvite: loading => dispatch(setLoading(loading)) })) export default class RoomActionsView extends LoggedView { static propTypes = { baseUrl: PropTypes.string, user: PropTypes.object, navigation: PropTypes.object, leaveRoom: PropTypes.func } constructor(props) { super('RoomActionsView', props); const { rid } = props.navigation.state.params; this.rooms = database.objects('subscriptions').filtered('rid = $0', rid); [this.room] = this.rooms; this.state = { room: this.room, onlineMembers: [], allMembers: [], member: {} }; } async componentDidMount() { this.rooms.addListener(this.updateRoom); const [members, member] = await Promise.all([this.updateRoomMembers(), this.updateRoomMember()]); this.setState({ ...members, ...member }); } componentWillUnmount() { this.rooms.removeAllListeners(); } onPressTouchable = (item) => { if (item.route) { return this.props.navigation.navigate({ key: item.route, routeName: item.route, params: item.params }); } if (item.event) { return item.event(); } } updateRoomMembers = async() => { const { t } = this.state.room; if (!this.canViewMembers) { return {}; } if (t === 'c' || t === 'p') { let onlineMembers = []; let allMembers = []; try { const onlineMembersCall = RocketChat.getRoomMembers(this.state.room.rid, false); const allMembersCall = RocketChat.getRoomMembers(this.state.room.rid, true); const [onlineMembersResult, allMembersResult] = await Promise.all([onlineMembersCall, allMembersCall]); onlineMembers = onlineMembersResult.records; allMembers = allMembersResult.records; return { onlineMembers, allMembers }; } catch (error) { return {}; } } } updateRoomMember = async() => { if (this.state.room.t !== 'd') { return {}; } try { const member = await RocketChat.getRoomMember(this.state.room.rid, this.props.user_id); return { member }; } catch (e) { log('RoomActions updateRoomMember', e); return {}; } } updateRoom = () => { this.setState({ room: this.room }); } get canAddUser() { // Invite user const { rid, t } = this.room; const { allMembers } = this.state; // TODO: same test joined const userInRoom = !!allMembers.find(m => m.username === this.props.user_username); const permissions = RocketChat.hasPermission(['add-user-to-joined-room', 'add-user-to-any-c-room', 'add-user-to-any-p-room'], rid); if (userInRoom && permissions['add-user-to-joined-room']) { return true; } if (t === 'c' && permissions['add-user-to-any-c-room']) { return true; } if (t === 'p' && permissions['add-user-to-any-p-room']) { return true; } return false; } get canViewMembers() { const { rid, t, broadcast } = this.state.room; if (broadcast) { const viewBroadcastMemberListPermission = 'view-broadcast-member-list'; const permissions = RocketChat.hasPermission([viewBroadcastMemberListPermission], rid); if (!permissions[viewBroadcastMemberListPermission]) { return false; } } return (t === 'c' || t === 'p'); } get sections() { const { rid, t, blocker, notifications } = this.room; const { onlineMembers } = this.state; const sections = [{ data: [{ icon: 'ios-star', name: 'USER', route: 'RoomInfo', params: { rid }, testID: 'room-actions-info' }], renderItem: this.renderRoomInfo }, { data: [ { icon: 'ios-call-outline', name: I18n.t('Voice_call'), disabled: true, testID: 'room-actions-voice' }, { icon: 'ios-videocam-outline', name: I18n.t('Video_call'), disabled: true, testID: 'room-actions-video' } ], renderItem: this.renderItem }, { data: [ { icon: 'ios-attach', name: I18n.t('Files'), route: 'RoomFiles', params: { rid }, testID: 'room-actions-files' }, { icon: 'ios-at-outline', name: I18n.t('Mentions'), route: 'MentionedMessages', params: { rid }, testID: 'room-actions-mentioned' }, { icon: 'ios-star-outline', name: I18n.t('Starred'), route: 'StarredMessages', params: { rid }, testID: 'room-actions-starred' }, { icon: 'ios-search', name: I18n.t('Search'), route: 'SearchMessages', params: { rid }, testID: 'room-actions-search' }, { icon: 'ios-share-outline', name: I18n.t('Share'), disabled: true, testID: 'room-actions-share' }, { icon: 'ios-pin', name: I18n.t('Pinned'), route: 'PinnedMessages', params: { rid }, testID: 'room-actions-pinned' }, { icon: 'ios-code', name: I18n.t('Snippets'), route: 'SnippetedMessages', params: { rid }, testID: 'room-actions-snippeted' }, { icon: `ios-notifications${ notifications ? '' : '-off' }-outline`, name: I18n.t(`${ notifications ? 'Enable' : 'Disable' }_notifications`), event: () => this.toggleNotifications(), testID: 'room-actions-notifications' } ], renderItem: this.renderItem }]; if (t === 'd') { sections.push({ data: [ { icon: 'block', name: I18n.t(`${ blocker ? 'Unblock' : 'Block' }_user`), type: 'danger', event: () => this.toggleBlockUser(), testID: 'room-actions-block-user' } ], renderItem: this.renderItem }); } else if (t === 'c' || t === 'p') { const actions = []; if (this.canViewMembers) { actions.push({ icon: 'ios-people', name: I18n.t('Members'), description: (onlineMembers.length === 1 ? I18n.t('1_online_member') : I18n.t('N_online_members', { n: onlineMembers.length })), route: 'RoomMembers', params: { rid, members: onlineMembers }, testID: 'room-actions-members' }); } if (this.canAddUser) { actions.push({ icon: 'ios-person-add', name: I18n.t('Add_user'), route: 'SelectedUsers', params: { nextAction: async() => { try { this.props.setLoadingInvite(true); await RocketChat.addUsersToRoom(rid); this.props.navigation.goBack(); } catch (e) { log('RoomActions Add User', e); } finally { this.props.setLoadingInvite(false); } } }, testID: 'room-actions-add-user' }); } sections[2].data = [...actions, ...sections[2].data]; sections.push({ data: [ { icon: 'block', name: I18n.t('Leave_channel'), type: 'danger', event: () => this.leaveChannel(), testID: 'room-actions-leave-channel' } ], renderItem: this.renderItem }); } return sections; } toggleBlockUser = async() => { const { rid, blocker } = this.state.room; const { member } = this.state; try { RocketChat.toggleBlockUser(rid, member._id, !blocker); } catch (e) { log('toggleBlockUser', e); } } leaveChannel = () => { const { room } = this.state; Alert.alert( I18n.t('Are_you_sure_question_mark'), I18n.t('Are_you_sure_you_want_to_leave_the_room', { room: room.t === 'd' ? room.fname : room.name }), [ { text: I18n.t('Cancel'), style: 'cancel' }, { text: I18n.t('Yes_action_it', { action: I18n.t('leave') }), style: 'destructive', onPress: () => this.props.leaveRoom(room.rid) } ] ); } toggleNotifications = () => { const { room } = this.state; try { RocketChat.saveNotificationSettings(room.rid, 'mobilePushNotifications', room.notifications ? 'default' : 'nothing'); } catch (e) { log('toggleNotifications', e); } } renderRoomInfo = ({ item }) => { const { room, member } = this.state; const { name, t, topic } = room; return ( this.renderTouchableItem([ {t === 'd' ? : null } , { getRoomTitle(room) } {t === 'd' ? `@${ name }` : topic} , ], item) ); } renderTouchableItem = (subview, item) => ( this.onPressTouchable(item)} underlayColor='#FFFFFF' activeOpacity={0.5} accessibilityLabel={item.name} accessibilityTraits='button' testID={item.testID} > {subview} ) renderItem = ({ item }) => { const subview = item.type === 'danger' ? [ , { item.name } ] : [ , { item.name }, item.description ? { item.description } : null, ]; return this.renderTouchableItem(subview, item); } renderSectionSeparator = (data) => { if (data.trailingItem) { return ; } if (!data.trailingSection) { return ; } return null; } render() { return ( item.name} testID='room-actions-list' /> ); } }