2020-03-30 19:50:27 +00:00
|
|
|
import React from 'react';
|
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import { ScrollView, Text } from 'react-native';
|
|
|
|
import isEqual from 'lodash/isEqual';
|
|
|
|
|
|
|
|
import Loading from '../../containers/Loading';
|
|
|
|
import KeyboardView from '../../presentation/KeyboardView';
|
|
|
|
import scrollPersistTaps from '../../utils/scrollPersistTaps';
|
|
|
|
import I18n from '../../i18n';
|
2020-10-30 16:15:58 +00:00
|
|
|
import * as HeaderButton from '../../containers/HeaderButton';
|
2020-03-30 19:50:27 +00:00
|
|
|
import StatusBar from '../../containers/StatusBar';
|
|
|
|
import { themes } from '../../constants/colors';
|
|
|
|
import { withTheme } from '../../theme';
|
|
|
|
import { getUserSelector } from '../../selectors/login';
|
|
|
|
import TextInput from '../../containers/TextInput';
|
|
|
|
import RocketChat from '../../lib/rocketchat';
|
|
|
|
import Navigation from '../../lib/Navigation';
|
|
|
|
import { createDiscussionRequest } from '../../actions/createDiscussion';
|
|
|
|
import { showErrorAlert } from '../../utils/info';
|
|
|
|
|
|
|
|
import SelectChannel from './SelectChannel';
|
|
|
|
import SelectUsers from './SelectUsers';
|
|
|
|
|
|
|
|
import styles from './styles';
|
2020-06-15 14:00:46 +00:00
|
|
|
import SafeAreaView from '../../containers/SafeAreaView';
|
|
|
|
import { goRoom } from '../../utils/goRoom';
|
2020-07-30 13:26:17 +00:00
|
|
|
import { logEvent, events } from '../../utils/log';
|
2020-03-30 19:50:27 +00:00
|
|
|
|
|
|
|
class CreateChannelView extends React.Component {
|
|
|
|
propTypes = {
|
|
|
|
navigation: PropTypes.object,
|
2020-06-15 14:00:46 +00:00
|
|
|
route: PropTypes.object,
|
2020-03-30 19:50:27 +00:00
|
|
|
server: PropTypes.string,
|
|
|
|
user: PropTypes.object,
|
|
|
|
create: PropTypes.func,
|
|
|
|
loading: PropTypes.bool,
|
|
|
|
result: PropTypes.object,
|
|
|
|
failure: PropTypes.bool,
|
|
|
|
error: PropTypes.object,
|
2020-06-15 14:00:46 +00:00
|
|
|
theme: PropTypes.string,
|
2020-10-30 15:54:02 +00:00
|
|
|
isMasterDetail: PropTypes.bool,
|
|
|
|
blockUnauthenticatedAccess: PropTypes.bool
|
2020-03-30 19:50:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2020-06-15 14:00:46 +00:00
|
|
|
const { route } = props;
|
|
|
|
this.channel = route.params?.channel;
|
|
|
|
const message = route.params?.message ?? {};
|
2020-03-30 19:50:27 +00:00
|
|
|
this.state = {
|
|
|
|
channel: this.channel,
|
|
|
|
message,
|
2020-06-15 14:00:46 +00:00
|
|
|
name: message?.msg || '',
|
2020-03-30 19:50:27 +00:00
|
|
|
users: [],
|
|
|
|
reply: ''
|
|
|
|
};
|
2020-06-15 14:00:46 +00:00
|
|
|
this.setHeader();
|
2020-03-30 19:50:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
|
|
const {
|
2020-06-15 14:00:46 +00:00
|
|
|
loading, failure, error, result, isMasterDetail
|
2020-03-30 19:50:27 +00:00
|
|
|
} = this.props;
|
|
|
|
|
|
|
|
if (!isEqual(this.state, prevState)) {
|
2020-06-15 14:00:46 +00:00
|
|
|
this.setHeader();
|
2020-03-30 19:50:27 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (!loading && loading !== prevProps.loading) {
|
|
|
|
setTimeout(() => {
|
|
|
|
if (failure) {
|
|
|
|
const msg = error.reason || I18n.t('There_was_an_error_while_action', { action: I18n.t('creating_channel') });
|
|
|
|
showErrorAlert(msg);
|
|
|
|
} else {
|
|
|
|
const { rid, t, prid } = result;
|
2020-06-15 14:00:46 +00:00
|
|
|
if (isMasterDetail) {
|
|
|
|
Navigation.navigate('DrawerNavigator');
|
|
|
|
} else {
|
2020-03-30 19:50:27 +00:00
|
|
|
Navigation.navigate('RoomsListView');
|
|
|
|
}
|
2020-06-15 14:00:46 +00:00
|
|
|
const item = {
|
2020-03-30 19:50:27 +00:00
|
|
|
rid, name: RocketChat.getRoomTitle(result), t, prid
|
2020-06-15 14:00:46 +00:00
|
|
|
};
|
|
|
|
goRoom({ item, isMasterDetail });
|
2020-03-30 19:50:27 +00:00
|
|
|
}
|
|
|
|
}, 300);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-06-15 14:00:46 +00:00
|
|
|
setHeader = () => {
|
|
|
|
const { navigation, route } = this.props;
|
|
|
|
const showCloseModal = route.params?.showCloseModal;
|
|
|
|
navigation.setOptions({
|
|
|
|
title: I18n.t('Create_Discussion'),
|
|
|
|
headerRight: (
|
|
|
|
this.valid()
|
|
|
|
? () => (
|
2020-10-30 16:15:58 +00:00
|
|
|
<HeaderButton.Container>
|
|
|
|
<HeaderButton.Item title={I18n.t('Create')} onPress={this.submit} testID='create-discussion-submit' />
|
|
|
|
</HeaderButton.Container>
|
2020-06-15 14:00:46 +00:00
|
|
|
)
|
|
|
|
: null
|
|
|
|
),
|
2020-10-30 16:15:58 +00:00
|
|
|
headerLeft: showCloseModal ? () => <HeaderButton.CloseModal navigation={navigation} /> : undefined
|
2020-06-15 14:00:46 +00:00
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-03-30 19:50:27 +00:00
|
|
|
submit = () => {
|
|
|
|
const {
|
|
|
|
name: t_name, channel: { prid, rid }, message: { id: pmid }, reply, users
|
|
|
|
} = this.state;
|
|
|
|
const { create } = this.props;
|
|
|
|
|
|
|
|
// create discussion
|
|
|
|
create({
|
|
|
|
prid: prid || rid, pmid, t_name, reply, users
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
valid = () => {
|
|
|
|
const {
|
|
|
|
channel, name
|
|
|
|
} = this.state;
|
|
|
|
|
|
|
|
return (
|
|
|
|
channel
|
|
|
|
&& channel.rid
|
|
|
|
&& channel.rid.trim().length
|
|
|
|
&& name.trim().length
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2020-07-30 13:26:17 +00:00
|
|
|
selectChannel = ({ value }) => {
|
|
|
|
logEvent(events.CREATE_DISCUSSION_SELECT_CHANNEL);
|
|
|
|
this.setState({ channel: { rid: value } });
|
|
|
|
}
|
|
|
|
|
|
|
|
selectUsers = ({ value }) => {
|
|
|
|
logEvent(events.CREATE_DISCUSSION_SELECT_USERS);
|
|
|
|
this.setState({ users: value });
|
|
|
|
}
|
|
|
|
|
2020-03-30 19:50:27 +00:00
|
|
|
render() {
|
|
|
|
const { name, users } = this.state;
|
|
|
|
const {
|
2020-10-30 15:54:02 +00:00
|
|
|
server, user, loading, blockUnauthenticatedAccess, theme
|
2020-03-30 19:50:27 +00:00
|
|
|
} = this.props;
|
|
|
|
return (
|
|
|
|
<KeyboardView
|
|
|
|
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
|
|
|
|
contentContainerStyle={styles.container}
|
|
|
|
keyboardVerticalOffset={128}
|
|
|
|
>
|
2020-10-30 13:59:44 +00:00
|
|
|
<StatusBar />
|
|
|
|
<SafeAreaView testID='create-discussion-view' style={styles.container}>
|
2020-03-30 19:50:27 +00:00
|
|
|
<ScrollView {...scrollPersistTaps}>
|
|
|
|
<Text style={[styles.description, { color: themes[theme].auxiliaryText }]}>{I18n.t('Discussion_Desc')}</Text>
|
|
|
|
<SelectChannel
|
|
|
|
server={server}
|
|
|
|
userId={user.id}
|
|
|
|
token={user.token}
|
|
|
|
initial={this.channel && { text: RocketChat.getRoomTitle(this.channel) }}
|
2020-07-30 13:26:17 +00:00
|
|
|
onChannelSelect={this.selectChannel}
|
2020-10-30 15:54:02 +00:00
|
|
|
blockUnauthenticatedAccess={blockUnauthenticatedAccess}
|
2020-03-30 19:50:27 +00:00
|
|
|
theme={theme}
|
|
|
|
/>
|
|
|
|
<TextInput
|
|
|
|
label={I18n.t('Discussion_name')}
|
|
|
|
placeholder={I18n.t('A_meaningful_name_for_the_discussion_room')}
|
|
|
|
containerStyle={styles.inputStyle}
|
|
|
|
defaultValue={name}
|
|
|
|
onChangeText={text => this.setState({ name: text })}
|
2020-04-01 12:07:03 +00:00
|
|
|
theme={theme}
|
2020-03-30 19:50:27 +00:00
|
|
|
/>
|
|
|
|
<SelectUsers
|
|
|
|
server={server}
|
|
|
|
userId={user.id}
|
|
|
|
token={user.token}
|
|
|
|
selected={users}
|
2020-07-30 13:26:17 +00:00
|
|
|
onUserSelect={this.selectUsers}
|
2020-10-30 15:54:02 +00:00
|
|
|
blockUnauthenticatedAccess={blockUnauthenticatedAccess}
|
2020-03-30 19:50:27 +00:00
|
|
|
theme={theme}
|
|
|
|
/>
|
|
|
|
<TextInput
|
|
|
|
multiline
|
2020-04-01 12:07:03 +00:00
|
|
|
textAlignVertical='top'
|
2020-03-30 19:50:27 +00:00
|
|
|
label={I18n.t('Your_message')}
|
|
|
|
inputStyle={styles.multiline}
|
|
|
|
theme={theme}
|
|
|
|
placeholder={I18n.t('Usually_a_discussion_starts_with_a_question_like_How_do_I_upload_a_picture')}
|
|
|
|
onChangeText={text => this.setState({ reply: text })}
|
|
|
|
/>
|
|
|
|
<Loading visible={loading} />
|
|
|
|
</ScrollView>
|
|
|
|
</SafeAreaView>
|
|
|
|
</KeyboardView>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
|
|
|
user: getUserSelector(state),
|
|
|
|
server: state.server.server,
|
|
|
|
error: state.createDiscussion.error,
|
|
|
|
failure: state.createDiscussion.failure,
|
|
|
|
loading: state.createDiscussion.isFetching,
|
2020-06-15 14:00:46 +00:00
|
|
|
result: state.createDiscussion.result,
|
2020-10-30 15:54:02 +00:00
|
|
|
blockUnauthenticatedAccess: state.settings.Accounts_AvatarBlockUnauthenticatedAccess ?? true,
|
2020-06-15 14:00:46 +00:00
|
|
|
isMasterDetail: state.app.isMasterDetail
|
2020-03-30 19:50:27 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
create: data => dispatch(createDiscussionRequest(data))
|
|
|
|
});
|
|
|
|
|
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(CreateChannelView));
|