import React from 'react'; import PropTypes from 'prop-types'; import { Text, ScrollView, StyleSheet } from 'react-native'; import { connect } from 'react-redux'; import SafeAreaView from 'react-native-safe-area-view'; import Orientation from 'react-native-orientation-locker'; 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'; import StatusBar from '../containers/StatusBar'; import log from '../utils/log'; const styles = StyleSheet.create({ loginTitle: { marginVertical: 0, marginTop: 15 } }); class SetUsernameView extends React.Component { static navigationOptions = ({ navigation }) => { const title = navigation.getParam('title'); return { title }; } static propTypes = { navigation: PropTypes.object, server: PropTypes.string, userId: PropTypes.string, loginRequest: PropTypes.func, token: PropTypes.string } constructor(props) { super(props); this.state = { username: '', saving: false }; const { server } = this.props; props.navigation.setParams({ title: server }); Orientation.lockToPortrait(); } async componentDidMount() { const suggestion = await RocketChat.getUsernameSuggestion(); 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; } submit = async() => { const { username } = this.state; 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); } this.setState({ saving: false }); } render() { const { username, saving } = this.state; return ( {I18n.t('Username')} {I18n.t('Set_username_subtitle')} this.setState({ username: value })} value={username} onSubmitEditing={this.submit} testID='set-username-view-input' clearButtonMode='while-editing' containerStyle={sharedStyles.inputLastChild} />