import React from 'react';
import PropTypes from 'prop-types';
import {
View, SectionList, Text, Alert, Share
} from 'react-native';
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation';
import equal from 'deep-equal';
import { leaveRoom as leaveRoomAction } from '../../actions/room';
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, { safeAddListener } from '../../lib/realm';
import RocketChat from '../../lib/rocketchat';
import log from '../../utils/log';
import RoomTypeIcon from '../../containers/RoomTypeIcon';
import I18n from '../../i18n';
import scrollPersistTaps from '../../utils/scrollPersistTaps';
import { CustomIcon } from '../../lib/Icons';
import DisclosureIndicator from '../../containers/DisclosureIndicator';
import StatusBar from '../../containers/StatusBar';
import { COLOR_WHITE } from '../../constants/colors';
const renderSeparator = () => ;
class RoomActionsView extends React.Component {
static navigationOptions = {
title: I18n.t('Actions')
}
static propTypes = {
baseUrl: PropTypes.string,
navigation: PropTypes.object,
user: PropTypes.shape({
id: PropTypes.string,
token: PropTypes.string
}),
leaveRoom: PropTypes.func
}
constructor(props) {
super(props);
this.rid = props.navigation.getParam('rid');
this.t = props.navigation.getParam('t');
this.rooms = database.objects('subscriptions').filtered('rid = $0', this.rid);
this.state = {
room: this.rooms[0] || { rid: this.rid, t: this.t },
membersCount: 0,
member: {},
joined: this.rooms.length > 0,
canViewMembers: false,
canAutoTranslate: false
};
}
async componentDidMount() {
const { room } = this.state;
if (!room._id) {
try {
const result = await RocketChat.getChannelInfo(room.rid);
if (result.success) {
this.setState({ room: { ...result.channel, rid: result.channel._id } });
}
} catch (e) {
log(e);
}
}
if (room && room.t !== 'd' && this.canViewMembers) {
try {
const counters = await RocketChat.getRoomCounters(room.rid, room.t);
if (counters.success) {
this.setState({ membersCount: counters.members, joined: counters.joined });
}
} catch (e) {
log(e);
}
} else if (room.t === 'd') {
this.updateRoomMember();
}
const canAutoTranslate = RocketChat.canAutoTranslate();
this.setState({ canAutoTranslate });
safeAddListener(this.rooms, this.updateRoom);
}
shouldComponentUpdate(nextProps, nextState) {
const {
room, membersCount, member, joined, canViewMembers
} = this.state;
if (nextState.membersCount !== membersCount) {
return true;
}
if (nextState.joined !== joined) {
return true;
}
if (nextState.canViewMembers !== canViewMembers) {
return true;
}
if (!equal(nextState.room, room)) {
return true;
}
if (!equal(nextState.member, member)) {
return true;
}
return false;
}
componentWillUnmount() {
this.rooms.removeAllListeners();
}
onPressTouchable = (item) => {
if (item.route) {
const { navigation } = this.props;
navigation.navigate(item.route, item.params);
}
if (item.event) {
return item.event();
}
}
// TODO: move to componentDidMount
get canAddUser() {
const { room, joined } = this.state;
const { rid, t } = room;
const userInRoom = joined;
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;
}
// TODO: move to componentDidMount
get canViewMembers() {
const { room } = this.state;
const { rid, t, broadcast } = room;
if (broadcast) {
const viewBroadcastMemberListPermission = 'view-broadcast-member-list';
const permissions = RocketChat.hasPermission([viewBroadcastMemberListPermission], rid);
if (!permissions[viewBroadcastMemberListPermission]) {
return false;
}
}
// This method is executed only in componentDidMount and returns a value
// We save the state to read in render
const result = (t === 'c' || t === 'p');
this.setState({ canViewMembers: result });
return result;
}
get sections() {
const {
room, membersCount, canViewMembers, joined, canAutoTranslate
} = this.state;
const {
rid, t, blocker
} = room;
const notificationsAction = {
icon: 'bell',
name: I18n.t('Notifications'),
route: 'NotificationPrefView',
params: { rid },
testID: 'room-actions-notifications'
};
const sections = [{
data: [{
icon: 'star',
name: I18n.t('Room_Info'),
route: 'RoomInfoView',
// forward room only if room isn't joined
params: { rid, t },
testID: 'room-actions-info'
}],
renderItem: this.renderRoomInfo
}, {
data: [
{
icon: 'livechat',
name: I18n.t('Voice_call'),
disabled: true,
testID: 'room-actions-voice'
},
{
icon: 'video',
name: I18n.t('Video_call'),
disabled: true,
testID: 'room-actions-video'
}
],
renderItem: this.renderItem
}, {
data: [
{
icon: 'file-generic',
name: I18n.t('Files'),
route: 'MessagesView',
params: { rid, t, name: 'Files' },
testID: 'room-actions-files'
},
{
icon: 'at',
name: I18n.t('Mentions'),
route: 'MessagesView',
params: { rid, t, name: 'Mentions' },
testID: 'room-actions-mentioned'
},
{
icon: 'star',
name: I18n.t('Starred'),
route: 'MessagesView',
params: { rid, t, name: 'Starred' },
testID: 'room-actions-starred'
},
{
icon: 'magnifier',
name: I18n.t('Search'),
route: 'SearchMessagesView',
params: { rid },
testID: 'room-actions-search'
},
{
icon: 'share',
name: I18n.t('Share'),
event: this.handleShare,
testID: 'room-actions-share'
},
{
icon: 'pin',
name: I18n.t('Pinned'),
route: 'MessagesView',
params: { rid, t, name: 'Pinned' },
testID: 'room-actions-pinned'
}
],
renderItem: this.renderItem
}];
if (canAutoTranslate) {
sections[2].data.push({
icon: 'language',
name: I18n.t('Auto_Translate'),
route: 'AutoTranslateView',
params: { rid },
testID: 'room-actions-auto-translate'
});
}
if (t === 'd') {
sections.push({
data: [
{
icon: 'ban',
name: I18n.t(`${ blocker ? 'Unblock' : 'Block' }_user`),
type: 'danger',
event: this.toggleBlockUser,
testID: 'room-actions-block-user'
}
],
renderItem: this.renderItem
});
sections[2].data.push(notificationsAction);
} else if (t === 'c' || t === 'p') {
const actions = [];
if (canViewMembers) {
actions.push({
icon: 'team',
name: I18n.t('Members'),
description: membersCount > 0 ? `${ membersCount } ${ I18n.t('members') }` : null,
route: 'RoomMembersView',
params: { rid },
testID: 'room-actions-members'
});
}
if (this.canAddUser) {
actions.push({
icon: 'user-plus',
name: I18n.t('Add_user'),
route: 'SelectedUsersView',
params: {
nextActionID: 'ADD_USER',
rid,
title: I18n.t('Add_user')
},
testID: 'room-actions-add-user'
});
}
sections[2].data = [...actions, ...sections[2].data];
if (joined) {
sections[2].data.push(notificationsAction);
sections.push({
data: [
{
icon: 'sign-out',
name: I18n.t('Leave_channel'),
type: 'danger',
event: this.leaveChannel,
testID: 'room-actions-leave-channel'
}
],
renderItem: this.renderItem
});
}
}
return sections;
}
updateRoom = () => {
if (this.rooms.length > 0) {
this.setState({ room: JSON.parse(JSON.stringify(this.rooms[0])) });
}
}
updateRoomMember = async() => {
const { room } = this.state;
const { rid } = room;
const { user } = this.props;
try {
const roomUserId = RocketChat.getRoomMemberId(rid, user.id);
const result = await RocketChat.getUserInfo(roomUserId);
if (result.success) {
this.setState({ member: result.user });
}
} catch (e) {
log(e);
this.setState({ member: {} });
}
}
toggleBlockUser = () => {
const { room } = this.state;
const { rid, blocker } = room;
const { member } = this.state;
try {
RocketChat.toggleBlockUser(rid, member._id, !blocker);
} catch (e) {
log(e);
}
}
handleShare = () => {
const { room } = this.state;
const permalink = RocketChat.getPermalinkChannel(room);
Share.share({
message: permalink
});
};
leaveChannel = () => {
const { room } = this.state;
const { leaveRoom } = this.props;
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: () => leaveRoom(room.rid, room.t)
}
]
);
}
renderRoomInfo = ({ item }) => {
const { room, member } = this.state;
const { name, t, topic } = room;
const { baseUrl, user } = this.props;
return (
this.renderTouchableItem([
{t === 'd' && member._id ? : null }
,
{room.t === 'd'
? {room.fname}
: (
{room.prid ? room.fname : room.name}
)
}
{t === 'd' ? `@${ name }` : topic}
,
], item)
);
}
renderTouchableItem = (subview, item) => (
this.onPressTouchable(item)}
underlayColor={COLOR_WHITE}
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'
{...scrollPersistTaps}
/>
);
}
}
const mapStateToProps = state => ({
user: {
id: state.login.user && state.login.user.id,
token: state.login.user && state.login.user.token
},
baseUrl: state.settings.Site_Url || state.server ? state.server.server : ''
});
const mapDispatchToProps = dispatch => ({
leaveRoom: (rid, t) => dispatch(leaveRoomAction(rid, t))
});
export default connect(mapStateToProps, mapDispatchToProps)(RoomActionsView);