flux-sample.coffee

# Dispatcher
Dispatcher = require('flux').Dispatcher
AppDispatcher = new Dispatcher

# Action
Actions = {
  add: (post) ->
    AppDispatcher.dispatch
      type: 'add'
      post: post

  load: (posts) ->
    AppDispatcher.displatch
      type: 'load'
      posts: posts
}

# Store
EventEmitter = require('events').EventEmitter
assign = require('object-assign')

posts = ['foo', 'bar', 'buz']

PostStore = assign {}, EventEmitter.prototype,
  loadAll: ->
    return posts

  emitChange: ->
    this.emit('change')

  addChangeListener: (callback) ->
    this.on('change', callback)

AppDispatcher.register (action) ->
  if action.type == 'add'
    posts.push action.post
    PostStore.emitChange()

# View
$ = require 'jquery'
React = require 'react'

Post = React.createClass
  render: ->
    <div>
      <p> { this.props.text } </p>
    </div>

PostList = React.createClass
  render: ->
    posts = @props.posts.map (post) ->
      <Post text={ post }/>

    <div>
      { posts }
    </div>

Input = React.createClass
  handleButtonClick: ->
    @props.onSubmit(@state.text)

  handleTextareaChange: (e) ->
    @setState(text: e.target.value)

  render: ->
    <div className="tweet-form ui form">
      <textarea rows="3" onChange={ this.handleTextareaChange }></textarea>
      <div className="tweet-panel">
        <button className="ui mini twitter button" onClick={ this.handleButtonClick }>POST</button>
      </div>
    </div>

Root = React.createClass
  getInitialState: ->
    posts: PostStore.loadAll()

  onSubmit: (post) ->
    Actions.add(post)

  componentDidMount: ->
    PostStore.addChangeListener(this._onChange)

  _onChange: ->
    @setState
      posts: PostStore.loadAll()

  render: ->
    <div>
      <Input onSubmit={ this.onSubmit }/>
      <PostList posts={ this.state.posts }/>
    </div>

$ ->
  React.render(
    <Root />
    ,document.getElementById('container')
  )