{"size": 1153, "ext": "js", "max_stars_repo_path": "app/chat.js", "max_stars_repo_name": "ShindoSensei/relacjs", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "app/chat.js", "max_issues_repo_name": "ShindoSensei/relacjs", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "app/chat.js", "max_forks_repo_name": "ShindoSensei/relacjs", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 23.5306122449, "max_line_length": 116, "alphanum_fraction": 0.6062445794}
import React from 'react'
import {Message} from './message.js'

export class Chat extends React.Component {
  constructor () {
    super()
    this.state = {
      messages: []
    }
  }

  displayMessage (msg) {
    this.setState({
      messages: this.state.messages.concat([msg])
    })
  }

  componentDidMount () {
    this.props.socket.on('welcome', this.displayMessage.bind(this))
    this.props.socket.on('joined', this.displayMessage.bind(this))
    this.props.socket.on('chat', this.displayMessage.bind(this))
    this.props.socket.on('left', this.displayMessage.bind(this))
  }

  render () {
    let messageItems = this.state.messages.map(function (msg, index) {
      return (<p key={index}>{msg}</p>)
    })
    return (
      <div>
        <div className='text-center chatWindow'>
          <div className='messageDis'>
            {messageItems}
          </div>
        </div>
        <div>
          <Message socket={this.props.socket} sendMsg={this.displayMessage.bind(this)} userName={this.props.user} />
        </div>
      </div>
    )
  }

}

Chat.propTypes = {
  socket: React.PropTypes.object,
  user: React.PropTypes.string
}
