var React = require('react');
var ItemList = require('./itemList');
var ItemStore = require('../../stores/itemStore.js');
var ItemActions = require('../../actions/itemActions.js');
var ItemCollection = require('../../models/itemCollection');

var AllItems = React.createClass({

  render: function() {  
    if(this.state) { 
      return (
        <ItemList items={this.state.items} />
        );
    } 
    else {
      return (
        <div> Not Loaded ! </div>
        );

    }
  },

    // Add change listeners to stores
    componentDidMount: function() {
      ItemActions.loadFrontPageItems();
      ItemStore.addChangeListener(this._onChange);
    },

    _onChange: function () {
      if (this.isMounted()) {
        this.setState({
          items: ItemStore.getItems()
        });
      }
    },
});

module.exports = AllItems;