diff --git a/front-ui/app/actions/categoryActions.js b/front-ui/app/actions/categoryActions.js
new file mode 100644
index 0000000..0619927
--- /dev/null
+++ b/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;
diff --git a/front-ui/app/components/browsing/byCategory.js b/front-ui/app/components/browsing/byCategory.js
index 34c93df..a848f2b 100644
--- a/front-ui/app/components/browsing/byCategory.js
+++ b/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({
-
Browse products by category
+ Browse products by category : {this.state.category.get('name')}
Number of items in this category: {this.state.items.length}
@@ -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()
});
}
}
diff --git a/front-ui/app/constants/categoryConstants.js b/front-ui/app/constants/categoryConstants.js
new file mode 100644
index 0000000..76f70f6
--- /dev/null
+++ b/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
+});
diff --git a/front-ui/app/stores/categoryStore.js b/front-ui/app/stores/categoryStore.js
new file mode 100644
index 0000000..415ab86
--- /dev/null
+++ b/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;