chat.jsx

class Chat extends React.Component {
  constructor(props) {
    super();
    this.state = {
      users: [],
      messages:[],
      text: '',
      status: 'userEnter'
    };

    this.statusProps = {
      'userEnter': {
        modalDisplay: true,
        modalInput: true,
        modalMessage: "What is user name?"
      },
      'error': {
        modalDisplay: true,
        modalInput: false,
        modalMessage: "There was an error, please retry!"
      }
    }

    this.handleMessageSubmit.bind(this);
    this.handleModalSubmit.bind(this);
  }

  componentDidMount() {
    this.connection = new ChatConnection(this);
  }

  handleMessageSubmit(message) {
    var {messages} = this.state;
    messages.push(message);
    this.setState({messages});
    this.connection.socket.emit('send:message', message);
  }

  handleModalSubmit(e) {
    if (this.state.status === 'userEnter') {
      var input = e.target.value;
    }
  }

  render() {
    var statusProp = this.statusProps[this.state.status];

    return (
      <div>
        <StatusBar user={this.state.user}
                   users={this.state.users} />
        <ChatRoom onMessageSubmit={this.handleMessageSubmit}
                  messages={this.state.messages}
                  user={this.state.user} />
        <Modal onSubmit={this.handleModalSubmit}
               message={statusProp.message}
               modalDisplay={statusProp.modalDisplay} />
      </div>
    );
  }
}