by category page

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({