text: import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect, withSetUsername } from 'plugin-api/beta/client/hocs';
  import { compose, branch, renderNothing } from 'recompose';
  import {
    usernameStatusSelector,
    usernameSelector,
  } from 'plugin-api/beta/client/selectors/auth';
  import SetUsernameDialog from '../components/SetUsernameDialog';
  
  class SetUsernameDialogContainer extends Component {
    state = {
      username: this.props.username,
      usernameError: null,
    };
  
    handleSubmit = () => {
      const validationError = this.props.validateUsername(this.state.username);
      if (validationError) {
        this.setState({ usernameError: validationError });
      } else {
        this.props.setUsername(this.state.username);
      }
    };
  
    setUsername = username => this.setState({ username });
  
    render() {
      if (!this.props.unset) {
        return null;
      }
      return (
        <SetUsernameDialog
          username={this.state.username}
          usernameError={this.state.usernameError}
          onSubmit={this.handleSubmit}
          onUsernameChange={this.setUsername}
          errorMessage={this.props.errorMessage}
          loading={this.props.loading}
        />
      );
    }
  }
  
  SetUsernameDialogContainer.propTypes = {
    unset: PropTypes.bool.isRequired,
    username: PropTypes.string,
    setUsername: PropTypes.func.isRequired,
    loading: PropTypes.bool.isRequired,
    errorMessage: PropTypes.string,
    success: PropTypes.bool.isRequired,
    validateUsername: PropTypes.func.isRequired,
  };
  
  const mapStateToProps = state => ({
    unset: usernameStatusSelector(state) === 'UNSET',
    username: usernameSelector(state),
  });
  
  export default compose(
    connect(mapStateToProps, null),
    withSetUsername,
    branch(props => !props.username, renderNothing)
  )(SetUsernameDialogContainer);
  