flummox.cjsx

###

# Flummox using CoffeeScript --

# build:

cjsx -b -c flummox.cjsx && browserify --exports=require flummox.js -o flummox0.js

###

log = (s...) -> console.log(s...)
log("flummox.cjsx")

{Actions, Store, Flux}  = require('flummox')

class MessageActions extends Actions
    createMessage: (messageContent) ->
        content : messageContent
        date    : Date.now()
    clearMessages: () ->
        log "clearMessages"
        return {}

class MessageStore extends Store
    constructor: (flux) ->
        super()
        messageActionIds = flux.getActionIds('messages')
        @register(messageActionIds.createMessage, @handleNewMessage)
        @register(messageActionIds.clearMessages, @clearMessages)
        @state =
            messages: []

    handleNewMessage: (message) ->
        log("appending new message")
        @setState
            messages: @state.messages.concat([message])
        log("now state=",@state)

    clearMessages: ->
        log("clearing messages")
        @setState
            messages: []

class AppFlux extends Flux
    constructor: () ->
        log("AppFlux constructor")
        super()

flux = new AppFlux()
flux.createActions('messages', MessageActions)
flux.createStore('messages', MessageStore, flux)

# for debugging
flux.addListener 'dispatch', (payload) ->
    log('Dispatch: ', payload)

# for debugging
window.flux = flux
window.React = React = require('react')
rtypes = React.PropTypes

class App extends React.Component
    propTypes:
        title : rtypes.string

    message_list: ->
        if @props.messages?
            for m, i in @props.messages
                <div key={i}>{m}</div>

    render : ->
        #log("App render with props=", @props)
        <div>
            <h1>{@props.title}</h1>
            <form onSubmit={@submit_handler}>
                <button type="submit">Send a new message</button>
                {@message_list()}
            </form>
            <form onSubmit={@clear_handler}>
                <button type="submit">Clear messages</button>
            </form>
        </div>

    submit_handler : (event) ->
        event.preventDefault()
        log("new message button pushed")
        # send a message action
        flux.getActions('messages').createMessage("the button was pushed -- #{Math.random()}")

    clear_handler: (event) ->
        event.preventDefault()
        log("clear button pushed")
        flux.getActions('messages').clearMessages()


FluxComponent = require('flummox/component')
window.FluxComponent = FluxComponent
log("FluxComponent=", FluxComponent)

page = () ->
    <FluxComponent flux={flux} connectToStores={['messages']}>
        <App title="Demo"/>
    </FluxComponent>

log("render")
React.render page(), document.getElementById('app')