filtering work in progress

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

@@ -9,7 +9,10 @@ var React = require('react'),
     ItemStore = require('../../stores/itemStore'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemList = require('../items/itemList'),
-    NavigationActions = require('../../actions/navigationActions');
+    NavigationActions = require('../../actions/navigationActions'),
+
+    FilterCriteriaStore = require('../../stores/filterCriteriaStore'),
+    FilterCriteriaActions = require('../../actions/filterCriteriaActions');
 
 var ByCategory = React.createClass({
   mixins: [Router.State],
@@ -22,13 +25,24 @@ var ByCategory = React.createClass({
     };
   },
     onFCClick: function(fc, fcv) {
-
       var q = {};
       q[fc.field_name] = fcv.filter_value;
       var section = new Section(this.state.category.get('section'));
       var category = this.state.category;
+
+      FilterCriteriaActions.addAppliedCategoryFilter(fc.field_name, fcv.filter_value);
       NavigationActions.goToCategory(category, section, q)
     },
+    removeAppliedFilter: function(name) {
+      FilterCriteriaActions.removeAppliedCategoryFilter(name);
+      var section = new Section(this.state.category.get('section'));
+      var category = this.state.category;
+      var q = {};
+      NavigationActions.goToCategory(category, section, q);
+
+      var categoryId = this.getParams().id;
+      ItemActions.loadByCategory(categoryId, this.getQuery());
+    },
     render: function() {
       var self = this;
       return (
@@ -62,11 +76,30 @@ var ByCategory = React.createClass({
         <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>
+        <div>
+        {this.appliedCategoryFiltersArray().map(function(acf) {
+            return (<div>
+              {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
+              
+              </div>)
+                                                              })} 
+        </div>
+
+          
         <ItemList items={this.state.items} />
         </div>
         </div>
         );
     },
+    appliedCategoryFiltersArray: function() {
+      var filters = [];
+      for(var key in this.state.appliedCategoryFilters) {
+        if(this.state.appliedCategoryFilters.hasOwnProperty(key)) {
+          filters.push({name: key, value: this.state.appliedCategoryFilters[key]});
+        }
+      }
+      return filters;
+    },
     componentWillReceiveProps: function() {
       var categoryId = this.getParams().id;
       ItemActions.loadByCategory(categoryId, this.getQuery());
@@ -80,10 +113,20 @@ var ByCategory = React.createClass({
 
       ItemStore.addChangeListener(this._onChange);
       CategoryStore.addChangeListener(this._onChange);
+      FilterCriteriaStore.addChangeListener(this._onAppliedFiltersChange);
     },
     componentWillUnmount: function() {
       ItemStore.removeChangeListener(this._onChange);
       CategoryStore.removeChangeListener(this._onChange);
+      FilterCriteriaStore.removeChangeListener(this._onAppliedFiltersChange);
+    },
+    _onAppliedFiltersChange: function() {
+      if(this.isMounted()) {
+        console.log('FILTERS CHANGING: ', FilterCriteriaStore.getAppliedCategoryFilters());
+        this.setState({
+          appliedCategoryFilters: FilterCriteriaStore.getAppliedCategoryFilters() 
+        });
+      }
     },
     _onChange: function() {
       if(this.isMounted()) {