import React, { Component } from "react"

import UserList from "./user_list"
import CategoryColumn from "./category_column"
import IdeaSubmissionForm from "./idea_submission_form"

class Room extends Component {
  constructor(props) {
    super(props)
    this.state = { ideas: [] }
    this.handleIdeaSubmission = this.handleIdeaSubmission.bind(this)
    this._setupRoomChannelEventHandlers()
  }

  _setupRoomChannelEventHandlers() {
    this.props.roomChannel.on("new_idea_received", newIdea => {
      this.setState({ ideas: [...this.state.ideas, newIdea] })
    })
  }

  handleIdeaSubmission(idea) {
    this.props.roomChannel.push("new_idea", { body: idea })
  }

  render() {
    return (
      <section className="room">
        <div className="ui three column padded grid category-columns-wrapper">
          <CategoryColumn category="happy" ideas={ this.state.ideas }/>
          <CategoryColumn category="sad" ideas={ [] }/>
          <CategoryColumn category="confused" ideas={ [] }/>
        </div>

        <UserList users={ this.props.users } />
        <IdeaSubmissionForm onIdeaSubmission={ this.handleIdeaSubmission }/>
      </section>
    )
  }
}

Room.propTypes = {
  roomChannel: React.PropTypes.object.isRequired,
  users: React.PropTypes.array.isRequired,
}

export default Room

import React, { Component } from "react"

import UserList from "./user_list"
import CategoryColumn from "./category_column"
import IdeaSubmissionForm from "./idea_submission_form"

class Room extends Component {
  constructor(props) {
    super(props)
    this.state = { ideas: [] }
    this.handleIdeaSubmission = this.handleIdeaSubmission.bind(this)
    this._setupRoomChannelEventHandlers()
  }

  _setupRoomChannelEventHandlers() {
    this.props.roomChannel.on("new_idea_received", newIdea => {
      this.setState({ ideas: [...this.state.ideas, newIdea] })
    })
  }

  handleIdeaSubmission(idea) {
    this.props.roomChannel.push("new_idea", { body: idea })
  }

  render() {
    return (
      <section className="room">
        <div className="ui equal width padded grid category-columns-wrapper">
          <CategoryColumn category="happy" ideas={ this.state.ideas }/>
          <CategoryColumn category="sad" ideas={ [] }/>
          <CategoryColumn category="confused" ideas={ [] }/>
        </div>

        <UserList users={ this.props.users } />
        <IdeaSubmissionForm onIdeaSubmission={ this.handleIdeaSubmission }/>
      </section>
    )
  }
}

Room.propTypes = {
  roomChannel: React.PropTypes.object.isRequired,
  users: React.PropTypes.array.isRequired,
}

export default Room

Use equal width grid to so that, in the future, we can use four column retro formats without changing the code
Use equal width grid to so that, in the future, we can use four column retro formats without changing the code
