loading category details on category browsing page

front-ui/app/actions/categoryActions.js

@@ -0,0 +1,12 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var CategoryConstants = require('../constants/categoryConstants');
+
+var CategoryActions = {
+  loadCategoryDetails: function(categoryId) {
+    AppDispatcher.handleAction({
+      actionType : CategoryConstants.LOAD_CATEGORY_DETAILS,
+      categoryId: categoryId
+    });
+  }
+};
+module.exports = CategoryActions;

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

@@ -3,6 +3,8 @@ var React = require('react'),
     Category = require('../../models/category'),
     ItemCollection = require('../../models/itemCollection'),
     ItemActions = require('../../actions/itemActions.js'),
+    CategoryActions = require('../../actions/categoryActions.js'),
+    CategoryStore = require('../../stores/categoryStore'),
     ItemStore = require('../../stores/itemStore'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemList = require('../items/itemList'),
@@ -27,7 +29,7 @@ var ByCategory = React.createClass({
 
         <div className='col-md-10'>
         
-        <h3> Browse products by category</h3>
+        <h3> Browse products by category  : {this.state.category.get('name')}</h3>
         Number of items in this category: {this.state.items.length}
         <ItemList items={this.state.items} />
         </div>
@@ -37,21 +39,25 @@ var ByCategory = React.createClass({
     componentWillReceiveProps: function() {
       var categoryId = this.getParams().id;
       ItemActions.loadByCategory(categoryId);
-      // TODO: load category details
+      CategoryActions.loadCategoryDetails(categoryId);
     },
     componentDidMount: function() {
       var categoryId = this.getParams().id;
       ItemActions.loadByCategory(categoryId);
+      CategoryActions.loadCategoryDetails(categoryId);
 
       ItemStore.addChangeListener(this._onChange);
+      CategoryStore.addChangeListener(this._onChange);
     },
     componentWillUnmount: function() {
       ItemStore.removeChangeListener(this._onChange);
+      CategoryStore.removeChangeListener(this._onChange);
     },
     _onChange: function() {
       if(this.isMounted()) {
         this.setState({
-          items: ItemStore.getItemsForCategory()
+          items: ItemStore.getItemsForCategory(),
+          category: CategoryStore.getCategoryDetails()
         });
       }
     }

front-ui/app/constants/categoryConstants.js

@@ -0,0 +1,6 @@
+var keyMirror = require('react/lib/keyMirror');
+
+// Define action constants
+module.exports = keyMirror({
+    LOAD_CATEGORY_DETAILS: null
+});

front-ui/app/stores/categoryStore.js

@@ -0,0 +1,98 @@
+var AppDispatcher = require('../dispatcher/appDispatcher');
+var EventEmitter = require('events').EventEmitter;
+
+var CategoryCollection = require('../models/categoryCollection');
+var Category = require('../models/category');
+
+var CategoryConstants = require('../constants/categoryConstants');
+var _ = require('underscore');
+
+var _categoryDetails = new Category();
+
+//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 loadCategoryDetails = function(categoryId) {
+  var category = new Category({id : categoryId});
+  category.fetch({
+    success: function() {
+      _categoryDetails = category;
+      CategoryStore.emitChange();
+    }
+  });
+};
+
+//var setHovered  = function(id) {
+  //sectionState.hoveredSection = id;
+//}
+
+
+// Extend SectionStore with EventEmitter to add eventing capabilities
+var CategoryStore = _.extend({}, EventEmitter.prototype, {
+
+    getCategoryDetails: function() {
+      return _categoryDetails;
+    },
+    // 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);
+    }
+});
+
+
+// Register callback with AppDispatcher
+AppDispatcher.register(function(payload) {
+  var action = payload.action;
+  var text;
+
+  switch(action.actionType) {
+
+    // Respond to SELECT_ITEM action
+    //case SectionConstants.LOAD_SECTIONS:
+      //loadSections();      
+      //break;
+
+    //case SectionConstants.SET_SECTION_HOVER:
+      //setHovered(action.section.get('id'));
+      //break;
+
+    //case SectionConstants.UNSET_SECTION_HOVER:
+      //setHovered('');
+      //break;
+
+    case CategoryConstants.LOAD_CATEGORY_DETAILS:
+      loadCategoryDetails(action.categoryId);
+      break;
+
+    default:
+      return true;
+  }
+
+  // If action was responded to, emit change event
+  CategoryStore.emitChange();
+  return true;
+
+});
+
+module.exports = CategoryStore;