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;