From 8e3557cf2e86f7620d376db01b5c2473d3c00c76 Mon Sep 17 00:00:00 2001
From: Edin Dazdarevic <edin.dazdarevic@gmail.com>
Date: Sun, 29 Mar 2015 16:34:42 +0200
Subject: [PATCH] minor refactoring of filters

---
 .../components/browsing/appliedFiltersList.js | 21 ++++++++++++
 .../app/components/browsing/byCategory.js     | 33 +++++--------------
 .../browsing/filterCriteriaSelector.js        | 28 ++++++++++++++++
 3 files changed, 57 insertions(+), 25 deletions(-)
 create mode 100644 front-ui/app/components/browsing/appliedFiltersList.js
 create mode 100644 front-ui/app/components/browsing/filterCriteriaSelector.js

diff --git a/front-ui/app/components/browsing/appliedFiltersList.js b/front-ui/app/components/browsing/appliedFiltersList.js
new file mode 100644
index 0000000..8639327
--- /dev/null
+++ b/front-ui/app/components/browsing/appliedFiltersList.js
@@ -0,0 +1,21 @@
+var React = require('react'),
+    Router = require('react-router');
+
+var AppliedFiltersList = React.createClass({
+    render : function() {
+        var self = this;
+        return (<div>
+            
+           {this.props.filters.map(function(acf) {
+                                                              return (<span>
+                                                                {acf.name} : {acf.value} <button onClick={self.props.onRemove.bind(self, acf.name)}>X</button>
+
+                                                                </span>)
+                                                            })} 
+            
+            </div>)
+          
+    }
+});
+
+module.exports = AppliedFiltersList;
diff --git a/front-ui/app/components/browsing/byCategory.js b/front-ui/app/components/browsing/byCategory.js
index fa5541a..92b7148 100644
--- a/front-ui/app/components/browsing/byCategory.js
+++ b/front-ui/app/components/browsing/byCategory.js
@@ -13,8 +13,11 @@ var React = require('react'),
      LinkBanner = require('../linkBanner/linkBanner'),
     Globals = require('../../globals');
 
+var FilterCriteriaSelector = require('./filterCriteriaSelector');
+var AppliedFiltersList = require('./appliedFiltersList');
+
 var ByCategory = React.createClass({
-  mixins: [Router.State],
+    mixins: [Router.State],
     getInitialState: function() {
       var category = new Category();
       var items = new ItemCollection();
@@ -50,11 +53,6 @@ var ByCategory = React.createClass({
     },
     render: function() {
       var self = this;
-
-      
-
-      
-
       return (
           <div>
           <div className='col-md-2'> 
@@ -66,19 +64,8 @@ var ByCategory = React.createClass({
                                                                               })}
           </ul>
 
-          {this.state.category.get('filter_criterias').map(function(fc) {
-                                                                          return (<div>
-
-                                                                            <div className='h4' style={{color: '#cd3071'}}>{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>)
-                                                                        })}
+          <FilterCriteriaSelector filterCriterias={this.state.category.get('filter_criterias')} onFCClick={this.onFCClick} />
+          
       </div>
 
         <div className='col-md-10'>
@@ -88,12 +75,8 @@ var ByCategory = React.createClass({
         <h3> Kategorija - {this.state.category.get('name')}</h3>
         Number of items in this category: {this.state.items.length}
       <div>
-      {this.appliedCategoryFiltersArray().map(function(acf) {
-                                                              return (<span>
-                                                                {acf.name} : {acf.value} <button onClick={self.removeAppliedFilter.bind(self, acf.name)}>X</button>
-
-                                                                </span>)
-                                                            })} 
+          <AppliedFiltersList filters={this.appliedCategoryFiltersArray()} onRemove={self.removeAppliedFilter} />
+       
       </div>
 
 
diff --git a/front-ui/app/components/browsing/filterCriteriaSelector.js b/front-ui/app/components/browsing/filterCriteriaSelector.js
new file mode 100644
index 0000000..9c2e185
--- /dev/null
+++ b/front-ui/app/components/browsing/filterCriteriaSelector.js
@@ -0,0 +1,28 @@
+var React = require('react'),
+    Router = require('react-router');
+
+var FilterCriteriaSelector = React.createClass({
+    render : function() {
+        var self = this;
+        return (<div>
+            
+          {this.props.filterCriterias.map(function(fc) {
+                                                                          return (<div>
+
+                                                                            <div className='h4' style={{color: '#cd3071'}}>{fc.title}</div>
+                                                                            <ul>
+                                                                            {fc.filter_criteria_values.map(function(fcv) {
+                                                                                                                           return (<li>
+                                                                                                                             <a onClick={self.props.onFCClick.bind(self,fc, fcv)}>{fcv.filter_text}</a>
+                                                                                                                             </li>)
+                                                                                                                         })}
+                                                                            </ul>
+                                                                            </div>)
+                                                                        })}  
+            
+            </div>)
+          
+    }
+});
+
+module.exports = FilterCriteriaSelector;