Skip to content

Instantly share code, notes, and snippets.

@rattrayalex

rattrayalex/app.coffee

Last active September 11, 2018 23:46
Show Gist options
  • Save rattrayalex/dee40d86813bcaa9de80 to your computer and use it in GitHub Desktop.
Save rattrayalex/dee40d86813bcaa9de80 to your computer and use it in GitHub Desktop.
Download ZIP
Demo
Raw
app.coffee
Bacon = require('baconjs')
Imm = require('immutable')
React = require('react')
window.Actions =
changeFirstName: new Bacon.Bus()
changeLastName: new Bacon.Bus()
changeCountry: new Bacon.Bus()
addCountryBird: new Bacon.Bus()
addFriend: new Bacon.Bus()
changeFirstFriend: new Bacon.Bus()
Actions.Derived = {}
defaultPerson =
firstName: "John"
lastName: "Kerry"
country:
name: "USA"
friends: []
PersonStore = Bacon.update Imm.fromJS(defaultPerson),
Actions.changeFirstName, (store, firstName) ->
console.log('store, fn', store, firstName)
store.set 'firstName', firstName
Actions.changeLastName, (store, lastName) ->
console.log('store, fn', store, lastName)
store.set 'lastName', lastName
Actions.changeCountry, (store, country) ->
store.setIn ['country', 'name'], country
Actions.addCountryBird, (store, bird) ->
store.setIn ['country', 'bird'], bird
Actions.addFriend, (store, friend) ->
store.update 'friends', (friends) -> friends.push(friend)
Actions.changeFirstFriend, (store, friend) ->
store.setIn ['friends', 0], friend
MyComponent = React.createClass
componentDidMount: ->
@tokens ?= []
@tokens.push PersonStore.onValue (newPerson) =>
console.log('got new person', newPerson, newPerson.toString())
@setProps({person: newPerson})
componentWillUnmount: ->
for token in @tokens
@token()
handleChange: (e) ->
name = e.target.name
val = e.target.value
console.log('handling change', name, val)
switch name
when 'firstName'
Actions.changeFirstName.push(e.target.value)
when 'lastName'
Actions.changeLastName.push(e.target.value)
when 'country'
Actions.changeCountry.push(e.target.value)
render: ->
console.log('in render with', @props)
if not @props.person
React.DOM.div {}
else
console.log "we have a person!", @props.person.toString()
React.DOM.div {},
React.DOM.input
type: "text"
onChange: @handleChange
name: 'firstName'
React.DOM.input
type: "text"
onChange: @handleChange
name: 'lastName'
React.DOM.input
type: "text"
onChange: @handleChange
name: 'country'
React.DOM.p {},
"Hello,
#{ this.props.person.get('firstName') }
#{ @props.person.get('lastName') }
from the country named
#{ @props.person.get('country').get('name') }"
React.DOM.ul {},
@props.person.get('friends').toArray().map (friend) ->
React.DOM.li {}, friend
comp = React.render(
React.createFactory(MyComponent)({})
document.body
)
Raw
index.html
<html>
<body>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment