fixed filters

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

@@ -9,10 +9,7 @@ var React = require('react'),
     ItemStore = require('../../stores/itemStore'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemList = require('../items/itemList'),
-    NavigationActions = require('../../actions/navigationActions'),
-
-    FilterCriteriaStore = require('../../stores/filterCriteriaStore'),
-    FilterCriteriaActions = require('../../actions/filterCriteriaActions');
+    NavigationActions = require('../../actions/navigationActions');
 
 var ByCategory = React.createClass({
   mixins: [Router.State],
@@ -21,25 +18,25 @@ var ByCategory = React.createClass({
     var items = new ItemCollection();
     return {
       category: category,
-    items: items
+    items: items,
+    filter :{}
     };
   },
+    filter: {},
     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)
+      
+      this.filter[fc.field_name] = fcv.filter_value;
+      NavigationActions.goToCategory(category, section, this.filter);
     },
     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);
-
+      delete this.filter[name];
+      var section = new Section(this.state.category.get('section'));
+      var category = this.state.category;
+      NavigationActions.goToCategory(category, section, this.filter);
     },
     render: function() {
       var self = this;
@@ -73,13 +70,12 @@ 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>
+            return (<span>
               {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
               
-              </div>)
+              </span>)
                                                               })} 
         </div>
 
@@ -91,51 +87,39 @@ var ByCategory = React.createClass({
     },
     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]});
+      for(var key in this.state.filter) {
+        if(this.state.filter.hasOwnProperty(key)) {
+          filters.push({name: key, value: this.state.filter[key]});
         }
       }
       return filters;
     },
     componentWillReceiveProps: function() {
       var categoryId = this.getParams().id;
-      ItemActions.loadByCategory(categoryId, FilterCriteriaStore.getAppliedCategoryFilters());
+
+      this.setState({
+        filter: this.filter
+      });
+      ItemActions.loadByCategory(categoryId, this.filter);
       CategoryActions.loadCategoryDetails(categoryId);
     },
     componentDidMount: function() {
       var categoryId = this.getParams().id;
-
-      //var query = this.getQuery();
-      //FilterCriteriaActions.setAppliedCategoryFilters(query);
       
-      ItemActions.loadByCategory(categoryId, this.getQuery());
+      this.filter = this.getQuery();
+      this.setState({
+        filter: this.filter
+      });
 
+      ItemActions.loadByCategory(categoryId, this.getQuery());
       CategoryActions.loadCategoryDetails(categoryId);
 
       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()) {
-        this.setState({
-          appliedCategoryFilters: FilterCriteriaStore.getAppliedCategoryFilters() 
-        });
-
-        var section = new Section(this.state.category.get('section'));
-        var category = this.state.category;
-        
-        // TODO: investigate how to do this without setTimeout call
-        setTimeout(function(){
-          NavigationActions.goToCategory(category, section, this.state.appliedCategoryFilters);
-        }.bind(this),0);
-      }
     },
     _onChange: function() {
       if(this.isMounted()) {