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;