verdnatura-chat/app/views/SetUsernameView.js

137 lines
3.6 KiB
JavaScript
Raw Normal View History

import React from 'react';
import PropTypes from 'prop-types';
import {
2018-12-05 20:52:08 +00:00
Text, ScrollView, StyleSheet
} from 'react-native';
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation';
2019-03-12 16:23:06 +00:00
import Orientation from 'react-native-orientation-locker';
2018-12-05 20:52:08 +00:00
import { loginRequest as loginRequestAction } from '../actions/login';
import TextInput from '../containers/TextInput';
import Button from '../containers/Button';
import KeyboardView from '../presentation/KeyboardView';
import sharedStyles from './Styles';
import scrollPersistTaps from '../utils/scrollPersistTaps';
import I18n from '../i18n';
import RocketChat from '../lib/rocketchat';
2019-03-12 16:23:06 +00:00
import StatusBar from '../containers/StatusBar';
2019-05-28 16:18:46 +00:00
import log from '../utils/log';
const styles = StyleSheet.create({
loginTitle: {
marginVertical: 0,
marginTop: 15
}
});
class SetUsernameView extends React.Component {
2019-03-12 16:23:06 +00:00
static navigationOptions = ({ navigation }) => {
const title = navigation.getParam('title');
return {
2019-03-12 16:23:06 +00:00
title
};
}
static propTypes = {
2019-03-12 16:23:06 +00:00
navigation: PropTypes.object,
server: PropTypes.string,
2018-12-05 20:52:08 +00:00
userId: PropTypes.string,
2019-02-07 15:48:10 +00:00
loginRequest: PropTypes.func,
token: PropTypes.string
}
constructor(props) {
super(props);
this.state = {
2018-12-05 20:52:08 +00:00
username: '',
saving: false
};
2019-03-12 16:23:06 +00:00
const { server } = this.props;
props.navigation.setParams({ title: server });
Orientation.lockToPortrait();
}
async componentDidMount() {
const suggestion = await RocketChat.getUsernameSuggestion();
2018-12-05 20:52:08 +00:00
if (suggestion.success) {
this.setState({ username: suggestion.result });
}
}
shouldComponentUpdate(nextProps, nextState) {
const { username, saving } = this.state;
if (nextState.username !== username) {
return true;
}
if (nextState.saving !== saving) {
return true;
}
return false;
}
2018-12-05 20:52:08 +00:00
submit = async() => {
const { username } = this.state;
2018-12-05 20:52:08 +00:00
const { loginRequest, token } = this.props;
if (!username.trim()) {
return;
}
this.setState({ saving: true });
try {
await RocketChat.setUsername(username);
await loginRequest({ resume: token });
} catch (e) {
log(e);
2018-12-05 20:52:08 +00:00
}
this.setState({ saving: false });
}
render() {
2018-12-05 20:52:08 +00:00
const { username, saving } = this.state;
return (
<KeyboardView contentContainerStyle={sharedStyles.container}>
2019-03-12 16:23:06 +00:00
<StatusBar />
<ScrollView {...scrollPersistTaps} contentContainerStyle={sharedStyles.containerScrollView}>
<SafeAreaView style={sharedStyles.container} testID='set-username-view' forceInset={{ vertical: 'never' }}>
<Text style={[sharedStyles.loginTitle, sharedStyles.textBold, styles.loginTitle]}>{I18n.t('Username')}</Text>
<Text style={[sharedStyles.loginSubtitle, sharedStyles.textRegular]}>{I18n.t('Set_username_subtitle')}</Text>
<TextInput
autoFocus
placeholder={I18n.t('Username')}
returnKeyType='send'
2019-03-12 16:23:06 +00:00
iconLeft='at'
onChangeText={value => this.setState({ username: value })}
value={username}
onSubmitEditing={this.submit}
testID='set-username-view-input'
clearButtonMode='while-editing'
containerStyle={sharedStyles.inputLastChild}
/>
<Button
title={I18n.t('Register')}
type='primary'
onPress={this.submit}
testID='set-username-view-submit'
disabled={!username}
2018-12-05 20:52:08 +00:00
loading={saving}
/>
</SafeAreaView>
</ScrollView>
</KeyboardView>
);
}
}
const mapStateToProps = state => ({
server: state.server.server,
token: state.login.user && state.login.user.token
});
const mapDispatchToProps = dispatch => ({
loginRequest: params => dispatch(loginRequestAction(params))
});
export default connect(mapStateToProps, mapDispatchToProps)(SetUsernameView);