2017-08-10 16:25:50 +00:00
|
|
|
import React from 'react';
|
2017-09-01 19:42:50 +00:00
|
|
|
import { connect } from 'react-redux';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-09-25 19:28:42 +00:00
|
|
|
import {
|
2019-12-11 23:01:12 +00:00
|
|
|
View, Text, Switch, ScrollView, StyleSheet, FlatList
|
2018-09-25 19:28:42 +00:00
|
|
|
} from 'react-native';
|
2018-12-21 10:55:35 +00:00
|
|
|
import equal from 'deep-equal';
|
2018-04-03 16:24:59 +00:00
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
import TextInput from '../presentation/TextInput';
|
2018-04-24 19:34:03 +00:00
|
|
|
import Loading from '../containers/Loading';
|
2018-09-25 19:28:42 +00:00
|
|
|
import { createChannelRequest as createChannelRequestAction } from '../actions/createChannel';
|
|
|
|
import { removeUser as removeUserAction } from '../actions/selectedUsers';
|
2018-08-31 18:13:30 +00:00
|
|
|
import sharedStyles from './Styles';
|
2017-09-01 20:00:31 +00:00
|
|
|
import KeyboardView from '../presentation/KeyboardView';
|
2018-04-24 19:34:03 +00:00
|
|
|
import scrollPersistTaps from '../utils/scrollPersistTaps';
|
2018-06-01 17:38:13 +00:00
|
|
|
import I18n from '../i18n';
|
2018-08-31 18:13:30 +00:00
|
|
|
import UserItem from '../presentation/UserItem';
|
2019-03-12 16:23:06 +00:00
|
|
|
import { CustomHeaderButtons, Item } from '../containers/HeaderButton';
|
|
|
|
import StatusBar from '../containers/StatusBar';
|
2019-12-11 23:01:12 +00:00
|
|
|
import { SWITCH_TRACK_COLOR, themes } from '../constants/colors';
|
|
|
|
import { withTheme } from '../theme';
|
2020-02-19 19:43:47 +00:00
|
|
|
import { Review } from '../utils/review';
|
|
|
|
import { getUserSelector } from '../selectors/login';
|
2020-07-06 19:01:35 +00:00
|
|
|
import SafeAreaView from '../containers/SafeAreaView';
|
2018-08-31 18:13:30 +00:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
container: {
|
2018-09-11 16:32:52 +00:00
|
|
|
flex: 1
|
2018-08-31 18:13:30 +00:00
|
|
|
},
|
|
|
|
list: {
|
2019-12-11 23:01:12 +00:00
|
|
|
width: '100%'
|
2018-08-31 18:13:30 +00:00
|
|
|
},
|
|
|
|
separator: {
|
|
|
|
marginLeft: 60
|
|
|
|
},
|
|
|
|
formSeparator: {
|
|
|
|
marginLeft: 15
|
|
|
|
},
|
|
|
|
input: {
|
|
|
|
height: 54,
|
|
|
|
paddingHorizontal: 18,
|
2019-03-29 19:36:07 +00:00
|
|
|
fontSize: 17,
|
2019-12-11 23:01:12 +00:00
|
|
|
...sharedStyles.textRegular
|
2018-08-31 18:13:30 +00:00
|
|
|
},
|
2020-04-07 13:26:19 +00:00
|
|
|
switchContainer: {
|
2018-08-31 18:13:30 +00:00
|
|
|
height: 54,
|
|
|
|
alignItems: 'center',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
flexDirection: 'row',
|
|
|
|
paddingHorizontal: 18
|
|
|
|
},
|
|
|
|
label: {
|
2019-03-29 19:36:07 +00:00
|
|
|
fontSize: 17,
|
2019-12-11 23:01:12 +00:00
|
|
|
...sharedStyles.textMedium
|
2018-08-31 18:13:30 +00:00
|
|
|
},
|
|
|
|
invitedHeader: {
|
|
|
|
marginTop: 18,
|
|
|
|
marginHorizontal: 15,
|
|
|
|
flexDirection: 'row',
|
|
|
|
justifyContent: 'space-between',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
|
|
|
invitedTitle: {
|
2019-03-29 19:36:07 +00:00
|
|
|
fontSize: 18,
|
|
|
|
...sharedStyles.textSemibold,
|
2018-08-31 18:13:30 +00:00
|
|
|
lineHeight: 41
|
|
|
|
},
|
|
|
|
invitedCount: {
|
2019-03-29 19:36:07 +00:00
|
|
|
fontSize: 14,
|
2019-12-11 23:01:12 +00:00
|
|
|
...sharedStyles.textRegular
|
2018-08-31 18:13:30 +00:00
|
|
|
}
|
|
|
|
});
|
2017-08-10 16:25:50 +00:00
|
|
|
|
2019-08-20 19:24:22 +00:00
|
|
|
class CreateChannelView extends React.Component {
|
2020-07-06 19:01:35 +00:00
|
|
|
static navigationOptions = {
|
|
|
|
title: I18n.t('Create_Channel')
|
2018-11-14 21:42:03 +00:00
|
|
|
}
|
|
|
|
|
2017-09-01 19:42:50 +00:00
|
|
|
static propTypes = {
|
2019-03-12 16:23:06 +00:00
|
|
|
navigation: PropTypes.object,
|
2018-09-11 16:32:52 +00:00
|
|
|
baseUrl: PropTypes.string,
|
2018-04-10 13:03:54 +00:00
|
|
|
create: PropTypes.func.isRequired,
|
2018-08-31 18:13:30 +00:00
|
|
|
removeUser: PropTypes.func.isRequired,
|
2018-10-23 21:39:48 +00:00
|
|
|
error: PropTypes.object,
|
|
|
|
failure: PropTypes.bool,
|
|
|
|
isFetching: PropTypes.bool,
|
2019-02-07 19:58:20 +00:00
|
|
|
users: PropTypes.array.isRequired,
|
|
|
|
user: PropTypes.shape({
|
|
|
|
id: PropTypes.string,
|
|
|
|
token: PropTypes.string
|
2019-12-11 23:01:12 +00:00
|
|
|
}),
|
|
|
|
theme: PropTypes.string
|
2017-09-25 13:15:28 +00:00
|
|
|
};
|
2017-08-10 16:25:50 +00:00
|
|
|
|
2019-05-28 13:03:08 +00:00
|
|
|
state = {
|
|
|
|
channelName: '',
|
|
|
|
type: true,
|
|
|
|
readOnly: false,
|
|
|
|
broadcast: false
|
2017-09-25 13:15:28 +00:00
|
|
|
}
|
|
|
|
|
2018-12-21 10:55:35 +00:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
|
|
|
const {
|
|
|
|
channelName, type, readOnly, broadcast
|
|
|
|
} = this.state;
|
2020-04-07 13:26:19 +00:00
|
|
|
const { users, isFetching, theme } = this.props;
|
2019-12-11 23:01:12 +00:00
|
|
|
if (nextProps.theme !== theme) {
|
|
|
|
return true;
|
|
|
|
}
|
2018-12-21 10:55:35 +00:00
|
|
|
if (nextState.channelName !== channelName) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextState.type !== type) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextState.readOnly !== readOnly) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextState.broadcast !== broadcast) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (nextProps.isFetching !== isFetching) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
if (!equal(nextProps.users, users)) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
2020-07-06 19:01:35 +00:00
|
|
|
toggleRightButton = (channelName) => {
|
2019-03-12 16:23:06 +00:00
|
|
|
const { navigation } = this.props;
|
2020-07-06 19:01:35 +00:00
|
|
|
navigation.setOptions({
|
|
|
|
headerRight: () => channelName.trim().length > 0 && (
|
|
|
|
<CustomHeaderButtons>
|
|
|
|
<Item title={I18n.t('Create')} onPress={this.submit} testID='create-channel-submit' />
|
|
|
|
</CustomHeaderButtons>
|
|
|
|
)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
onChangeText = (channelName) => {
|
|
|
|
this.toggleRightButton(channelName);
|
2018-08-31 18:13:30 +00:00
|
|
|
this.setState({ channelName });
|
|
|
|
}
|
|
|
|
|
2018-05-24 20:17:45 +00:00
|
|
|
submit = () => {
|
|
|
|
const {
|
|
|
|
channelName, type, readOnly, broadcast
|
|
|
|
} = this.state;
|
2018-10-23 21:39:48 +00:00
|
|
|
const { users: usersProps, isFetching, create } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
2018-10-23 21:39:48 +00:00
|
|
|
if (!channelName.trim() || isFetching) {
|
2018-09-25 19:28:42 +00:00
|
|
|
return;
|
|
|
|
}
|
2017-09-25 13:15:28 +00:00
|
|
|
|
|
|
|
// transform users object into array of usernames
|
2018-09-25 19:28:42 +00:00
|
|
|
const users = usersProps.map(user => user.name);
|
2017-09-25 13:15:28 +00:00
|
|
|
|
|
|
|
// create channel
|
2018-09-25 19:28:42 +00:00
|
|
|
create({
|
2018-05-24 20:17:45 +00:00
|
|
|
name: channelName, users, type, readOnly, broadcast
|
|
|
|
});
|
2020-02-19 19:43:47 +00:00
|
|
|
|
|
|
|
Review.pushPositiveEvent();
|
2017-08-10 16:25:50 +00:00
|
|
|
}
|
|
|
|
|
2018-08-31 18:13:30 +00:00
|
|
|
removeUser = (user) => {
|
2020-03-18 21:26:17 +00:00
|
|
|
const { removeUser } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
removeUser(user);
|
2017-09-21 17:08:00 +00:00
|
|
|
}
|
|
|
|
|
2018-05-24 20:17:45 +00:00
|
|
|
renderSwitch = ({
|
2018-08-31 18:13:30 +00:00
|
|
|
id, value, label, onValueChange, disabled = false
|
2019-12-11 23:01:12 +00:00
|
|
|
}) => {
|
|
|
|
const { theme } = this.props;
|
|
|
|
return (
|
2020-04-07 13:26:19 +00:00
|
|
|
<View style={[styles.switchContainer, { backgroundColor: themes[theme].backgroundColor }]}>
|
2019-12-11 23:01:12 +00:00
|
|
|
<Text style={[styles.label, { color: themes[theme].titleText }]}>{I18n.t(label)}</Text>
|
|
|
|
<Switch
|
|
|
|
value={value}
|
|
|
|
onValueChange={onValueChange}
|
|
|
|
testID={`create-channel-${ id }`}
|
|
|
|
trackColor={SWITCH_TRACK_COLOR}
|
|
|
|
disabled={disabled}
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
);
|
|
|
|
}
|
2018-05-24 20:17:45 +00:00
|
|
|
|
|
|
|
renderType() {
|
|
|
|
const { type } = this.state;
|
|
|
|
return this.renderSwitch({
|
|
|
|
id: 'type',
|
|
|
|
value: type,
|
2018-08-31 18:13:30 +00:00
|
|
|
label: 'Private_Channel',
|
2018-05-24 20:17:45 +00:00
|
|
|
onValueChange: value => this.setState({ type: value })
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
renderReadOnly() {
|
|
|
|
const { readOnly, broadcast } = this.state;
|
|
|
|
return this.renderSwitch({
|
|
|
|
id: 'readonly',
|
|
|
|
value: readOnly,
|
2018-08-31 18:13:30 +00:00
|
|
|
label: 'Read_Only_Channel',
|
2018-05-24 20:17:45 +00:00
|
|
|
onValueChange: value => this.setState({ readOnly: value }),
|
|
|
|
disabled: broadcast
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
renderBroadcast() {
|
|
|
|
const { broadcast, readOnly } = this.state;
|
|
|
|
return this.renderSwitch({
|
|
|
|
id: 'broadcast',
|
|
|
|
value: broadcast,
|
2018-08-31 18:13:30 +00:00
|
|
|
label: 'Broadcast_Channel',
|
2018-05-24 20:17:45 +00:00
|
|
|
onValueChange: (value) => {
|
|
|
|
this.setState({
|
|
|
|
broadcast: value,
|
|
|
|
readOnly: value ? true : readOnly
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
2017-09-21 17:08:00 +00:00
|
|
|
}
|
|
|
|
|
2018-08-31 18:13:30 +00:00
|
|
|
renderSeparator = () => <View style={[sharedStyles.separator, styles.separator]} />
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
renderFormSeparator = () => {
|
|
|
|
const { theme } = this.props;
|
|
|
|
return <View style={[sharedStyles.separator, styles.formSeparator, { backgroundColor: themes[theme].separatorColor }]} />;
|
|
|
|
}
|
2018-08-31 18:13:30 +00:00
|
|
|
|
2018-09-25 19:28:42 +00:00
|
|
|
renderItem = ({ item }) => {
|
2019-12-11 23:01:12 +00:00
|
|
|
const { baseUrl, user, theme } = this.props;
|
2018-08-31 18:13:30 +00:00
|
|
|
|
2018-09-25 19:28:42 +00:00
|
|
|
return (
|
|
|
|
<UserItem
|
|
|
|
name={item.fname}
|
|
|
|
username={item.name}
|
|
|
|
onPress={() => this.removeUser(item)}
|
|
|
|
testID={`create-channel-view-item-${ item.name }`}
|
2020-03-18 21:26:17 +00:00
|
|
|
icon='check'
|
2018-09-25 19:28:42 +00:00
|
|
|
baseUrl={baseUrl}
|
2019-02-07 19:58:20 +00:00
|
|
|
user={user}
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2018-09-25 19:28:42 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderInvitedList = () => {
|
2019-12-11 23:01:12 +00:00
|
|
|
const { users, theme } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<FlatList
|
|
|
|
data={users}
|
|
|
|
extraData={users}
|
|
|
|
keyExtractor={item => item._id}
|
2019-12-11 23:01:12 +00:00
|
|
|
style={[
|
|
|
|
styles.list,
|
|
|
|
sharedStyles.separatorVertical,
|
|
|
|
{
|
|
|
|
backgroundColor: themes[theme].focusedBackground,
|
|
|
|
borderColor: themes[theme].separatorColor
|
|
|
|
}
|
|
|
|
]}
|
2018-09-25 19:28:42 +00:00
|
|
|
renderItem={this.renderItem}
|
|
|
|
ItemSeparatorComponent={this.renderSeparator}
|
|
|
|
enableEmptySections
|
|
|
|
keyboardShouldPersistTaps='always'
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2018-08-31 18:13:30 +00:00
|
|
|
|
2017-08-10 16:25:50 +00:00
|
|
|
render() {
|
2018-09-25 19:28:42 +00:00
|
|
|
const { channelName } = this.state;
|
2019-12-11 23:01:12 +00:00
|
|
|
const { users, isFetching, theme } = this.props;
|
2018-09-25 19:28:42 +00:00
|
|
|
const userCount = users.length;
|
|
|
|
|
2017-08-10 16:25:50 +00:00
|
|
|
return (
|
2017-11-07 16:28:02 +00:00
|
|
|
<KeyboardView
|
2019-12-11 23:01:12 +00:00
|
|
|
style={{ backgroundColor: themes[theme].auxiliaryBackground }}
|
2018-08-31 18:13:30 +00:00
|
|
|
contentContainerStyle={[sharedStyles.container, styles.container]}
|
2018-04-24 19:34:03 +00:00
|
|
|
keyboardVerticalOffset={128}
|
2017-11-07 16:28:02 +00:00
|
|
|
>
|
2019-12-11 23:01:12 +00:00
|
|
|
<StatusBar theme={theme} />
|
2020-07-06 19:01:35 +00:00
|
|
|
<SafeAreaView testID='create-channel-view' theme={theme}>
|
2018-08-31 18:13:30 +00:00
|
|
|
<ScrollView {...scrollPersistTaps}>
|
2019-12-11 23:01:12 +00:00
|
|
|
<View style={[sharedStyles.separatorVertical, { borderColor: themes[theme].separatorColor }]}>
|
2018-08-31 18:13:30 +00:00
|
|
|
<TextInput
|
2019-08-20 19:24:22 +00:00
|
|
|
autoFocus
|
2019-12-11 23:01:12 +00:00
|
|
|
style={[styles.input, { backgroundColor: themes[theme].backgroundColor }]}
|
2018-08-31 18:13:30 +00:00
|
|
|
label={I18n.t('Channel_Name')}
|
2018-09-25 19:28:42 +00:00
|
|
|
value={channelName}
|
2018-08-31 18:13:30 +00:00
|
|
|
onChangeText={this.onChangeText}
|
|
|
|
placeholder={I18n.t('Channel_Name')}
|
|
|
|
returnKeyType='done'
|
|
|
|
testID='create-channel-name'
|
|
|
|
autoCorrect={false}
|
|
|
|
autoCapitalize='none'
|
2019-12-11 23:01:12 +00:00
|
|
|
theme={theme}
|
2018-08-31 18:13:30 +00:00
|
|
|
underlineColorAndroid='transparent'
|
2018-05-24 20:17:45 +00:00
|
|
|
/>
|
2018-08-31 18:13:30 +00:00
|
|
|
{this.renderFormSeparator()}
|
|
|
|
{this.renderType()}
|
|
|
|
{this.renderFormSeparator()}
|
|
|
|
{this.renderReadOnly()}
|
|
|
|
{this.renderFormSeparator()}
|
|
|
|
{this.renderBroadcast()}
|
|
|
|
</View>
|
|
|
|
<View style={styles.invitedHeader}>
|
2019-12-11 23:01:12 +00:00
|
|
|
<Text style={[styles.invitedTitle, { color: themes[theme].titleText }]}>{I18n.t('Invite')}</Text>
|
|
|
|
<Text style={[styles.invitedCount, { color: themes[theme].auxiliaryText }]}>{userCount === 1 ? I18n.t('1_user') : I18n.t('N_users', { n: userCount })}</Text>
|
2018-05-24 20:17:45 +00:00
|
|
|
</View>
|
2018-08-31 18:13:30 +00:00
|
|
|
{this.renderInvitedList()}
|
2018-10-23 21:39:48 +00:00
|
|
|
<Loading visible={isFetching} />
|
2018-08-31 18:13:30 +00:00
|
|
|
</ScrollView>
|
|
|
|
</SafeAreaView>
|
2017-09-01 19:42:50 +00:00
|
|
|
</KeyboardView>
|
2017-08-10 16:25:50 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
2019-08-20 19:24:22 +00:00
|
|
|
|
|
|
|
const mapStateToProps = state => ({
|
2020-02-19 19:43:47 +00:00
|
|
|
baseUrl: state.server.server,
|
2019-08-20 19:24:22 +00:00
|
|
|
isFetching: state.createChannel.isFetching,
|
|
|
|
users: state.selectedUsers.users,
|
2020-02-19 19:43:47 +00:00
|
|
|
user: getUserSelector(state)
|
2019-08-20 19:24:22 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
const mapDispatchToProps = dispatch => ({
|
|
|
|
create: data => dispatch(createChannelRequestAction(data)),
|
|
|
|
removeUser: user => dispatch(removeUserAction(user))
|
|
|
|
});
|
|
|
|
|
2019-12-11 23:01:12 +00:00
|
|
|
export default connect(mapStateToProps, mapDispatchToProps)(withTheme(CreateChannelView));
|