example.cjsx

module.exports = React.createClass
  mixins: [UITheme]
  getInitialState: ->
    items: []
    isInfiniteLoading: false
    filter: null
    firstTimeFetch: true
    hasNoMore: false
  componentWillMount: ->
    FilterStore.listen (filter) =>
      filter.init()
      @setState
        firstTimeFetch: true
        items: []
        filter: filter
        hasNoMore: false
        isInfiniteLoading: false
    FoodStore.listen (event) =>
      switch event.name
        when 'fetched'
          items = @state.items.concat event.value
          @setState { firstTimeFetch: false, items }
        when 'created'
          @setState { items: [event.value].concat @state.items }
        when 'changed'
          items = @state.items
          items[event.key] = event.value
          @setState { items }
        when 'no_more'
          @setState { hasNoMore: true }
  fetch: -> @state.filter.fn @state.items.length
  handleInfiniteLoad: -> if @state.isInfiniteLoading then @fetch()
  render: ->
    items = _.map @state.items, (value, idx) =>
      <FoodCard key={idx} model={value} />
    loader =
      if (@state.isInfiniteLoading || @state.firstTimeFetch)
        <ProgressBar />
      else if (not @hasNoMore)
        <ShowMore onClick={=> @setState { isInfiniteLoading: true} }/>
      else
        <div>No more result</div>
    <div className="limit-width food-card-container">
      <InfiniteScroll loadMore={@handleInfiniteLoad}
                      hasMore={[email protected]} loader={loader}
                      threshold={100}>
        {items}
      </InfiniteScroll>
    </div>