React Component Definition Sugar

gistfile1.coffee

page "PackageDetailsPage"

state ->
  loading: true
  pkg: undefined

events
  componentDidMount: ->
    page = @
    
    if @isLoading()
      stylish.showPackage(@getParams().slug).then (pkg)->
        page.setState(pkg: pkg, loading: false)

helpers 
  isLoading: ->
    @state.loading is true

  getBody: ->
    if @isLoading() then @loadingIndicator() else @showDetails()
  
  loadingIndicator: ->
    <div className="ui loading indicator">Loading...</div>

  showDetails: ->
    pkg = @state.package

    <div className="ui package details">
      <div className="ui header">
        <h4>{pkg.name}</h4>
        <pre>
          <code>
            {JSON.stringify(pkg)}
          </code>
        </pre>
      </div>
    </div>
 
classMethods
  willTransitionTo: ->
    App.container?.enableWidthConstraint()
    $('.ui.sidebar').sidebar('hide')

view -> 
  <div className="ui page package-details">
    {@getBody()}  
  </div>

module.exports = finished()