text: import React, { Component, PropTypes } from 'react'
  
  export default class List extends Component {
    static propTypes = {
      loadingLabel: PropTypes.string.isRequired,
      pageCount: PropTypes.number,
      renderItem: PropTypes.func.isRequired,
      items: PropTypes.array.isRequired,
      isFetching: PropTypes.bool.isRequired,
      loadMoreCallback: PropTypes.func.isRequired,
      nextPageUrl: PropTypes.string
    }
  
    static defaultProps = {
      isFetching: true,
      loadingLabel: 'Loading...'
    }
  
    renderLoadMore() {
      const { isFetching, loadMoreCallback } = this.props
      return (
        <button style={{ fontSize: '150%' }}
                onClick={loadMoreCallback}
                disabled={isFetching}>
          {isFetching ? 'Loading...' : 'Load More'}
        </button>
      )
    }
  
    render() {
      const {
        isFetching, nextPageUrl, pageCount,
        items, renderItem, loadingLabel
      } = this.props
  
      const isEmpty = items.length === 0
      if (isEmpty && isFetching) {
        return <h2><i>{loadingLabel}</i></h2>
      }
  
      const isLastPage = !nextPageUrl
      if (isEmpty && isLastPage) {
        return <h1><i>Nothing here!</i></h1>
      }
  
      return (
        <div>
          {items.map(renderItem)}
          {pageCount > 0 && !isLastPage && this.renderLoadMore()}
        </div>
      )
    }
  }
  