by category page

front-ui/app/actions/itemActions.js

@@ -4,6 +4,12 @@ var ItemConstants = require('../constants/itemConstants');
 // Define action methods
 var ItemActions = {
 
+  loadByCategory: function(categoryId) {
+    AppDispatcher.handleAction({
+      actionType: ItemConstants.LOAD_BY_CATEGORY,
+      categoryId : categoryId
+    });
+  },
 
   loadFrontPageItems: function() {
      AppDispatcher.handleAction({

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

@@ -1,13 +1,61 @@
-var React = require('react');
+var React = require('react'),
+    Router = require('react-router'),
+    Category = require('../../models/category'),
+    ItemCollection = require('../../models/itemCollection'),
+    ItemActions = require('../../actions/itemActions.js'),
+    ItemStore = require('../../stores/itemStore'),
+    NavigationStore = require('../../stores/navigationStore'),
+    ItemList = require('../items/itemList'),
+    NavigationActions = require('../../actions/navigationActions');
 
 var ByCategory = React.createClass({
-  render: function() {
-    return (
-      <div>
-      <h3> Browse products by category</h3>
-      </div>
-      );
-  }
+  mixins: [Router.State],
+  getInitialState: function() {
+    var category = new Category();
+    var items = new ItemCollection();
+    return {
+      category: category,
+    items: items
+    };
+  },
+    render: function() {
+      return (
+        <div>
+<div className='col-md-2'> 
+        Here goes section for refining search, by section
+        </div>
+
+        <div className='col-md-10'>
+        
+        <h3> Browse products by category</h3>
+        Number of items in this category: {this.state.items.length}
+        <ItemList items={this.state.items} />
+        </div>
+        </div>
+        );
+    },
+    componentWillReceiveProps: function() {
+      var categoryId = this.getParams().id;
+      ItemActions.loadByCategory(categoryId);
+      // TODO: load category details
+    },
+    componentDidMount: function() {
+      var categoryId = this.getParams().id;
+      ItemActions.loadByCategory(categoryId);
+
+      ItemStore.addChangeListener(this._onChange);
+    },
+    componentWillUnmount: function() {
+      ItemStore.removeChangeListener(this._onChange);
+    },
+    _onChange: function() {
+      if(this.isMounted()) {
+        this.setState({
+          items: ItemStore.getItemsForCategory()
+        });
+      }
+    }
+
 });
 
 module.exports = ByCategory;

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

@@ -37,8 +37,11 @@ var BySection = React.createClass({
                                                                       return (
                                                                         <div style={s}>
                                                                         
+                                                                     <a onClick={self.onCategoryClick.bind(self, category, self.state.section)}>   
+                                                                     
                                                                         <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
-                                                                     <div onClick={self.onCategoryClick.bind(self, category, self.state.section)}>   {category.name}</div>
+<div>{category.name}</div>
+                                                                     </a>
                                                                      <ul>
                                                                      {category.sub_categories.map(function(sc) {
                                                                                                                  return (<li>{sc.name}</li>)
@@ -71,6 +74,10 @@ var BySection = React.createClass({
       SectionStore.addChangeListener(this._onSectionChange);
       ItemStore.addChangeListener(this._onChange);
     },
+    componentWillUnmount: function() {
+      SectionStore.removeChangeListener(this._onSectionChange);
+      ItemStore.removeChangeListener(this._onChange);
+    },
     _onSectionChange: function() {
       if(this.isMounted()) {
         this.setState({

front-ui/app/constants/itemConstants.js

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

front-ui/app/models/category.js

@@ -0,0 +1,12 @@
+var Backbone = require('backbone');
+var Globals = require('../globals');
+
+var Category = Backbone.Model.extend({
+    urlRoot : Globals.ApiUrl + '/category',
+    defaults : {
+        name: ''
+    }
+});
+
+
+module.exports = Category;

front-ui/app/stores/itemStore.js

@@ -8,7 +8,8 @@ var _ = require('underscore');
 // Define initial data points
 var _items = new ItemCollection(),
     _itemWithDetails = new ItemWithDetails(),
-    _bestSellingForSection = new ItemCollection();
+    _bestSellingForSection = new ItemCollection(),
+    _itemsByCategory = new ItemCollection();
 
 
 var loadItemsForFrontpage = function() {
@@ -50,6 +51,19 @@ var fetchItemWithDetails = function() {
     }
 }
 
+var fetchItemsByCategory = function(categoryId) {
+  var items = _itemsByCategory;
+  items.setClassificationType(2);
+  items.setClassificationId(categoryId);
+  items.setLimit(30);
+  items.setOffset(0);
+
+  items.fetch({
+    success: function() {
+      ItemStore.emitChange();
+    }});
+};
+
 var fetchBestSellingItemsForSection = function(sectionId) {
   console.log('getting section', sectionId);
     var items = _bestSellingForSection;
@@ -70,6 +84,9 @@ var fetchBestSellingItemsForSection = function(sectionId) {
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var ItemStore = _.extend({}, EventEmitter.prototype, {
 
+  getItemsForCategory: function() {
+    return _itemsByCategory;
+  },
     getBestSellingForSection: function() {
 
       return _bestSellingForSection;
@@ -122,6 +139,9 @@ AppDispatcher.register(function(payload) {
         case ItemConstants.LOAD_FOR_FRONTPAGE:
             loadItemsForFrontpage();
             break;
+        case ItemConstants.LOAD_BY_CATEGORY:
+            fetchItemsByCategory(action.categoryId);
+            break;
 
         default:
             return true;