loading best selling items for sections

front-ui/app/actions/itemActions.js

@@ -8,15 +8,21 @@ var ItemActions = {
   loadFrontPageItems: function() {
      AppDispatcher.handleAction({
       actionType: ItemConstants.LOAD_FOR_FRONTPAGE
-    })
+    });
   },
 
   loadItemWithDetails: function() {
      AppDispatcher.handleAction({
       actionType: ItemConstants.LOAD_ITEM_WITH_DETAILS,
-    })
-  }
+    });
+  },
 
+  loadBestSellingItemsForSection: function(sectionId) {
+    AppDispatcher.handleAction({
+      actionType : ItemConstants.LOAD_BSI_FOR_SECTION,
+      sectionId: sectionId
+    });
+  }
 };
 
-module.exports = ItemActions;
+module.exports = ItemActions;

front-ui/app/actions/sectionActions.js

@@ -15,15 +15,22 @@ var SectionActions = {
     AppDispatcher.handleAction({
       actionType: SectionConstants.SET_SECTION_HOVER,
       section: section
-    })
+    });
   },
 
   unsetSectionHover: function() {
     AppDispatcher.handleAction({
       actionType: SectionConstants.UNSET_SECTION_HOVER
-    })
+    });
+  },
+
+  loadSectionDetails: function(sectionId) {
+    AppDispatcher.handleAction({
+      actionType: SectionConstants.LOAD_SECTION_DETAILS,
+      sectionId: sectionId
+    });
   }
 
 };
 
-module.exports = SectionActions;
+module.exports = SectionActions;

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()});
+      }
     }
 });
 

front-ui/app/constants/itemConstants.js

@@ -2,5 +2,6 @@ var keyMirror = require('react/lib/keyMirror');
 
 // Define action constants
 module.exports = keyMirror({
-  LOAD_FOR_FRONTPAGE: null
-});
+  LOAD_FOR_FRONTPAGE: null,
+  LOAD_BSI_FOR_SECTION: null
+});

front-ui/app/constants/sectionConstants.js

@@ -4,5 +4,6 @@ var keyMirror = require('react/lib/keyMirror');
 module.exports = keyMirror({
   LOAD_SECTIONS: null,
   SET_SECTION_HOVER: null,
-  UNSET_SECTION_HOVER: null
-});
+  UNSET_SECTION_HOVER: null,
+  LOAD_SECTION_DETAILS: null
+});

front-ui/app/models/itemCollection.js

@@ -18,7 +18,7 @@ var ItemCollection = Backbone.Collection.extend({
     	this.classificationType = type;
     } , 
 
-    setClassificatonId: function(id) {
+    setClassificationId: function(id) {
     	this.classificationId = id;
     }, 
 

front-ui/app/stores/itemStore.js

@@ -7,7 +7,8 @@ var _ = require('underscore');
 
 // Define initial data points
 var _items = new ItemCollection(),
-    _itemWithDetails = new ItemWithDetails();
+    _itemWithDetails = new ItemWithDetails(),
+    _bestSellingForSection = new ItemCollection();
 
 
 var loadItemsForFrontpage = function() {
@@ -49,10 +50,30 @@ var fetchItemWithDetails = function() {
     }
 }
 
+var fetchBestSellingItemsForSection = function(sectionId) {
+  console.log('getting section', sectionId);
+    var items = _bestSellingForSection;
+    items.setClassificationType(1);
+    items.setClassificationId(sectionId);
+    items.setLimit(30);
+    items.setOffset(0);
+    
+
+    items.fetch({
+      success: function() {
+        ItemStore.emitChange();
+      }
+    });
+};
+
 
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var ItemStore = _.extend({}, EventEmitter.prototype, {
 
+    getBestSellingForSection: function() {
+
+      return _bestSellingForSection;
+    },
     // item with details
     getLoadedItemWithDetails: function() {
         return _itemWithDetails;
@@ -94,6 +115,9 @@ AppDispatcher.register(function(payload) {
             fetchItemWithDetails();
             break;
 
+        case ItemConstants.LOAD_BSI_FOR_SECTION:
+            fetchBestSellingItemsForSection(action.sectionId);
+            break;
 
         case ItemConstants.LOAD_FOR_FRONTPAGE:
             loadItemsForFrontpage();
@@ -109,4 +133,4 @@ AppDispatcher.register(function(payload) {
 
 });
 
-module.exports = ItemStore;
+module.exports = ItemStore;

front-ui/app/stores/sectionStore.js

@@ -1,27 +1,38 @@
 var AppDispatcher = require('../dispatcher/appDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var SectionCollection = require('../models/sectionCollection');
+var Section = require('../models/section');
 var SectionConstants = require('../constants/sectionConstants');
 var _ = require('underscore');
 
-
+var _sectionDetails = new Section();
 var sectionState = {
-        sections : [],
-    hoveredSection : ''
+  sections : [],
+  hoveredSection : ''
 };
 
 
 var loadSections = function() { 
-      var sections = new SectionCollection();
-      sections.fetch({success: function() {
-        sectionState.sections = sections.models;
-        // change will be called automatically when
-        // action is run but we need to emit it again
-        // when the data arive 
-        // it's a bit "unfluxy" but convenient.
-        // "true philosophy" would be to run another "data arrived" action
-        SectionStore.emitChange(); 
-      }});
+  var sections = new SectionCollection();
+  sections.fetch({success: function() {
+    sectionState.sections = sections.models;
+    // change will be called automatically when
+    // action is run but we need to emit it again
+    // when the data arive 
+    // it's a bit "unfluxy" but convenient.
+    // "true philosophy" would be to run another "data arrived" action
+    SectionStore.emitChange(); 
+  }});
+};
+
+var loadSectionDetails = function(sectionId) {
+  var section = new Section({id : sectionId});
+  section.fetch({
+    success: function() {
+      _sectionDetails = section;
+      SectionStore.emitChange();
+    }
+  });
 };
 
 var setHovered  = function(id) {
@@ -36,23 +47,24 @@ var SectionStore = _.extend({}, EventEmitter.prototype, {
   getState: function() {
     return sectionState;
   },
+    getSectionDetails: function() {
+      return _sectionDetails;
+    },
+    // Emit Change event
+    emitChange: function() {
+      console.log("Emmiting Section change!");
+      this.emit('change');
+    },
 
-  // Emit Change event
-  emitChange: function() {
-    console.log("Emmiting Section change!");
-    this.emit('change');
-  },
-
-  // Add change listener
-  addChangeListener: function(callback) {
-    this.on('change', callback);
-  },
-
-  // Remove change listener
-  removeChangeListener: function(callback) {
-    this.removeListener('change', callback);
-  }
+    // Add change listener
+    addChangeListener: function(callback) {
+      this.on('change', callback);
+    },
 
+    // Remove change listener
+    removeChangeListener: function(callback) {
+      this.removeListener('change', callback);
+    }
 });
 
 
@@ -76,6 +88,10 @@ AppDispatcher.register(function(payload) {
       setHovered('');
       break;
 
+    case SectionConstants.LOAD_SECTION_DETAILS:
+      loadSectionDetails(action.sectionId);
+      break;
+
     default:
       return true;
   }