# state.coffee 
 
import {getList} from './dataProvider'
import {simpleListBuilder} from 'simple-ducks-builders'
 
MODULE = 'myList'
 
moduleBuilder = simpleListBuilder(MODULE)
 
export reducer = moduleBuilder.reducer
export actions = {
  loadList: -> moduleBuilder.actions.loadList(getList)
}

# dataProvider.coffee 
export getList = ->
  new Promise (resolve) -> resolve [{id:1, title:'a'},{id:2, title:'2'},]

import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as myListActions} from './state'
 
class Container =
  componentDidMount: -> @props.actions.loadList()
 
  render: ->
    {isLoading, isReady, list} = @props.myListState
    return <span>loading</span> if isLoading || !isReady
    <div>
      {
        for item in list
          <div key={item.id}>{item.title}</div>
      }
    </div>
 
mapState = (state, ownProps) ->
  myListState: state.myList
 
mapActions = (dispatch, ownProps) ->
  actions: bindActionCreators myListActions, dispatch
 
export default connect(mapState, mapActions)(Container)
 

# state.coffee 
 
import {simpleFormBuilder} from 'simple-ducks-builders'
MODULE_STATE_NAME = 'myItem'
 
formBuilder = simpleFormBuilder(MODULE_STATE_NAME)
 
loadItem = (id) ->
  formBuilder.actions.loadItem getItem.bind(null, id)
saveItem = formBuilder.actions.saveItem updateItem
 
export reducer = formBuilder.reducer
export actions = {
  loadItem,
  saveItem,
  setField: formBuilder.actions.setField
}

# container.coffee 
 
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import {actions as myItemActions} from './state'
 
class Container =
  componentDidMount: ->
    @props.actions.loadItem(@props.id)
 
  render: ->
    {isLoading, isReady, inProgress, item} = @props.myItemState
    {setField, saveItem} = @props.actions
    return <span>loading</span> if isLoading || !isReady
    <div>
      <input
        value={item.title}
        onChange={(e) -> setField 'title', e.target.value}
        disabled={inProgress}
      />
      <button
        onClick={saveItem}
        disabled={!isChanged || inProgress}
      >Save</button>
    </div>
 
mapState = (state, ownProps) ->
  id: Number router.params.id
  myItemState: state.myItem
 
mapActions = (dispatch, ownProps) ->
  actions: bindActionCreators myItemActions, dispatch
 
export default connect(mapState, mapActions)(Container)