Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
# 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')
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment