started to work on filters on the frontend

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

@@ -1,6 +1,7 @@
 var React = require('react'),
     Router = require('react-router'),
     Category = require('../../models/category'),
+    Section = require('../../models/section'),
     ItemCollection = require('../../models/itemCollection'),
     ItemActions = require('../../actions/itemActions.js'),
     CategoryActions = require('../../actions/categoryActions.js'),
@@ -20,17 +21,49 @@ var ByCategory = React.createClass({
     items: items
     };
   },
+    onFCClick: function(fc, fcv) {
+
+      alert(fc.field_name);
+      var q = {};
+      q[fc.field_name] = fcv.filter_value;
+      // TODO: fix this, clean this up
+      var s = new Section({name: 'meho'});
+var c = this.state.category;
+      NavigationActions.goToCategory({id: c.get('id'), name: c.get('name')}, s, q)
+    },
     render: function() {
+      var self = this;
       return (
         <div>
 <div className='col-md-2'> 
-        Here goes section for refining search, by section
+<div className='h4'>{this.state.category.get('name')}</div>
+<div>Podkategorije</div>
+        <ul>
+        {(this.state.category.get('sub_categories') || []).map(function(sc) {
+          return (<li> <a>{sc.name}</a></li>)
+                                                             })}
+        </ul>
+
+        {this.state.category.get('filter_criterias').map(function(fc) {
+          return (<div>
+            
+        <div className='h4'>{fc.title}</div>
+        <ul>
+        {fc.filter_criteria_values.map(function(fcv) {
+          return (<li>
+              <a onClick={self.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
+            </li>)
+                                                     })}
+        </ul>
+            </div>)
+                                                                      })}
         </div>
 
         <div className='col-md-10'>
         
         <h3> Browse products by category  : {this.state.category.get('name')}</h3>
         Number of items in this category: {this.state.items.length}
+        <div>need to filter brand: {this.getQuery().brand}</div>
         <ItemList items={this.state.items} />
         </div>
         </div>