text: import React from 'react';
  import AddCharacterStore from '../stores/AddCharacterStore';
  import AddCharacterActions from '../actions/AddCharacterActions';
  
  class AddCharacter extends React.Component {
    constructor(props) {
      super(props);
      this.state = AddCharacterStore.getState();
      this.onChange = this.onChange.bind(this);
    }
  
    componentDidMount() {
      AddCharacterStore.listen(this.onChange);
    }
  
    componentWillUnmount() {
      AddCharacterStore.unlisten(this.onChange);
    }
  
    onChange(state) {
      this.setState(state);
    }
  
    handleSubmit(event) {
      event.preventDefault();
  
      var name = this.state.name.trim();
      var gender = this.state.gender;
  
      if (!name) {
        AddCharacterActions.invalidName();
        this.refs.nameTextField.focus();
      }
  
      if (!gender) {
        AddCharacterActions.invalidGender();
      }
  
      if (name && gender) {
        AddCharacterActions.addCharacter(name, gender);
      }
    }
  
    render() {
      return (
        <div className='container'>
          <div className='row flipInX animated'>
            <div className='col-sm-8'>
              <div className='panel panel-default'>
                <div className='panel-heading'>Add Athlete</div>
                <div className='panel-body'>
                  <form onSubmit={this.handleSubmit.bind(this)}>
                    <div className={'form-group ' + this.state.nameValidationState}>
                      <label className='control-label'>Athlete Name</label>
                      <input type='text' className='form-control' ref='nameTextField' value={this.state.name}
                             onChange={AddCharacterActions.updateName} autoFocus/>
                      <span className='help-block'>{this.state.helpBlock}</span>
                    </div>
                    <div className={'form-group ' + this.state.genderValidationState}>
                      <div className='radio radio-inline'>
                        <input type='radio' name='gender' id='female' value='Female' checked={this.state.gender === 'Female'}
                               onChange={AddCharacterActions.updateGender}/>
                        <label htmlFor='female'>Female</label>
                      </div>
                      <div className='radio radio-inline'>
                        <input type='radio' name='gender' id='male' value='Male' checked={this.state.gender === 'Male'}
                               onChange={AddCharacterActions.updateGender}/>
                        <label htmlFor='male'>Male</label>
                      </div>
                    </div>
                    <button type='submit' className='btn btn-primary'>Submit</button>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    }
  }
  
  export default AddCharacter;