verdnatura-chat/app/views/NewServerView.js

177 lines
4.1 KiB
JavaScript
Raw Normal View History

2017-08-03 18:23:43 +00:00
import React from 'react';
2017-08-05 18:16:32 +00:00
import PropTypes from 'prop-types';
import { Text, TextInput, View, StyleSheet, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import { serverRequest, addServer } from '../actions/server';
import KeyboardView from '../presentation/KeyboardView';
2017-08-09 13:12:00 +00:00
2017-08-03 18:23:43 +00:00
const styles = StyleSheet.create({
view: {
flex: 1,
2017-08-07 00:34:35 +00:00
flexDirection: 'column',
2017-08-12 20:52:55 +00:00
alignItems: 'stretch',
backgroundColor: '#fff'
2017-08-03 18:23:43 +00:00
},
input: {
height: 40,
borderColor: '#aaa',
margin: 20,
padding: 5,
borderWidth: 0,
backgroundColor: '#f8f8f8'
2017-08-07 00:34:35 +00:00
},
text: {
textAlign: 'center',
color: '#888'
},
validateText: {
position: 'absolute',
color: 'green',
textAlign: 'center',
paddingLeft: 50,
paddingRight: 50,
width: '100%'
},
validText: {
color: 'green'
},
invalidText: {
color: 'red'
},
validatingText: {
color: '#aaa'
},
spaceView: {
flexGrow: 1
2017-08-03 18:23:43 +00:00
}
});
@connect(state => ({
validInstance: !state.server.failure,
validating: state.server.connecting
}), dispatch => ({
validateServer: url => dispatch(serverRequest(url)),
addServer: url => dispatch(addServer(url))
}))
2017-08-05 18:16:32 +00:00
export default class NewServerView extends React.Component {
static propTypes = {
validateServer: PropTypes.func.isRequired,
addServer: PropTypes.func.isRequired,
validating: PropTypes.bool.isRequired,
validInstance: PropTypes.bool.isRequired,
navigation: PropTypes.object.isRequired
2017-08-05 18:16:32 +00:00
}
2017-08-09 01:40:55 +00:00
static navigationOptions = () => ({
2017-08-07 00:34:35 +00:00
title: 'New Server Connection'
});
2017-08-03 18:23:43 +00:00
constructor(props) {
super(props);
this.state = {
2017-08-07 00:34:35 +00:00
defaultServer: 'https://demo.rocket.chat',
editable: true,
2017-08-03 18:23:43 +00:00
text: ''
};
this.adding = false;
this.props.validateServer(this.state.defaultServer); // Need to call because in case of submit with empty field
}
componentDidUpdate() {
if (this.adding) {
if (!this.props.validInstance) {
/* eslint-disable react/no-did-update-set-state */
this.setState({ editable: true });
this.adding = false;
}
if (this.props.validInstance && !this.props.validating) {
this.props.navigation.goBack();
this.adding = false;
2017-08-12 20:52:55 +00:00
}
}
}
onChangeText = (text) => {
this.setState({ text });
this.props.validateServer(this.completeUrl(text));
}
submit = () => {
this.setState({ editable: false });
this.adding = true;
this.props.addServer(this.completeUrl(this.state.text.trim() || this.state.defaultServer));
}
completeUrl = (url) => {
url = url.trim();
if (/^(\w|[0-9-_]){3,}$/.test(url) &&
/^(htt(ps?)?)|(loca((l)?|(lh)?|(lho)?|(lhos)?|(lhost:?\d*)?)$)/.test(url) === false) {
url = `${ url }.rocket.chat`;
}
if (/^(https?:\/\/)?(((\w|[0-9])+(\.(\w|[0-9-_])+)+)|localhost)(:\d+)?$/.test(url)) {
if (/^localhost(:\d+)?/.test(url)) {
url = `http://${ url }`;
} else if (/^https?:\/\//.test(url) === false) {
2017-08-07 00:34:35 +00:00
url = `https://${ url }`;
}
}
2017-08-03 18:23:43 +00:00
return url.replace(/\/+$/, '');
}
renderValidation = () => {
if (!this.state.text.trim()) {
return null;
}
if (this.props.validating) {
return (
<Text style={[styles.validateText, styles.validatingText]}>
Validating {this.state.url} ...
</Text>
);
}
if (this.props.validInstance) {
return (
<Text style={[styles.validateText, styles.validText]}>
{this.state.url} is a valid Rocket.Chat instance
</Text>
);
}
return (
<Text style={[styles.validateText, styles.invalidText]}>
{this.state.url} is not a valid Rocket.Chat instance
</Text>
);
2017-08-03 18:23:43 +00:00
}
render() {
return (
<KeyboardView
scrollEnabled={false}
contentContainerStyle={[styles.view, { height: Dimensions.get('window').height }]}
keyboardVerticalOffset={128}
>
<View style={styles.spaceView} />
2017-08-03 18:23:43 +00:00
<TextInput
ref={ref => this.inputElement = ref}
2017-08-03 18:23:43 +00:00
style={styles.input}
onChangeText={this.onChangeText}
2017-08-03 18:23:43 +00:00
keyboardType='url'
autoCorrect={false}
returnKeyType='done'
autoCapitalize='none'
2017-08-05 18:16:32 +00:00
autoFocus
editable={this.state.editable}
2017-08-03 18:23:43 +00:00
onSubmitEditing={this.submit}
2017-08-07 00:34:35 +00:00
placeholder={this.state.defaultServer}
2017-08-05 18:16:32 +00:00
/>
<View style={styles.spaceView}>
{this.renderValidation()}
</View>
2017-08-09 13:12:00 +00:00
</KeyboardView>
2017-08-03 18:23:43 +00:00
);
}
}