loading best selling items for sections

front-ui/app/components/browsing/bySection.js

@@ -1,8 +1,22 @@
 var React = require('react'),
-    Router = require('react-router');
+    Router = require('react-router'),
+    ItemActions = require('../../actions/itemActions.js'),
+    ItemStore = require('../../stores/itemStore'),
+    NavigationStore = require('../../stores/navigationStore'),
+    ItemList = require('../items/itemList'),
+    ItemCollection = require('../../models/itemCollection'),
+    SectionStore = require('../../stores/sectionStore'),
+    SectionActions = require('../../actions/sectionActions.js'),
+    Section = require('../../models/section');
 
 var BySection = React.createClass({
   mixins: [Router.State],
+    getInitialState : function() {
+      return {
+        items: (new ItemCollection()),
+        section : (new Section())
+      };
+    },
     render : function() {
       return ( <div>
 
@@ -10,9 +24,41 @@ var BySection = React.createClass({
         Here goes section for refining search, by section
         </div>
         <div className='col-md-10'>
-        <h2> Welcome to section {this.getParams().id} </h2>
+        <div className='h3'>
+                 Najprodavanije u sekciji {this.state.section.get('name')} 
+</div>
+        <ItemList items={this.state.items} />
+        <div className='h3'>Kategorije</div>
+
         </div>
         </div> )
+    },
+    componentWillReceiveProps: function(nextProps) {
+      var sectionId = this.getParams().id;
+      ItemActions.loadBestSellingItemsForSection(sectionId);
+      SectionActions.loadSectionDetails(sectionId);
+    },
+    componentDidMount: function() {
+      console.log('mounting....');
+      var sectionId = this.getParams().id;
+      ItemActions.loadBestSellingItemsForSection(sectionId);
+      SectionActions.loadSectionDetails(sectionId);
+
+      SectionStore.addChangeListener(this._onSectionChange);
+      ItemStore.addChangeListener(this._onChange);
+    },
+    _onSectionChange: function() {
+      if(this.isMounted()) {
+        this.setState({
+          section: SectionStore.getSectionDetails()
+        });
+      }
+    },
+    _onChange: function() {
+      if(this.isMounted()) {
+        console.log('items store changed! by section');
+        this.setState({items: ItemStore.getBestSellingForSection()});
+      }
     }
 });