Github issue #320 [Search] - when filters are hide don't take them into consideration

-- Added visual indicator to show the number of filters currently applied on the project listing

Author: Vikas Agarwal

src/components/TopBar/TopBar.jsx

@@ -3,6 +3,7 @@ require('./TopBar.scss')
 import React, {PropTypes, Component} from 'react'
 import { Link } from 'react-router'
 import cn from 'classnames'
+import _ from 'lodash'
 import { UserDropdown, Icons } from 'appirio-tech-react-components'
 
 const { ConnectLogoBeta } = Icons
@@ -94,6 +95,7 @@ class TopBar extends Component {
     if (isProjectDetails) {
       return <ProjectToolBar isPowerUser={isPowerUser} logo={logo} avatar={avatar} project={project} />
     }
+    const noOfFilters = _.keys(criteria).length - 1
 
     return (
       // <Sticky>
@@ -116,7 +118,7 @@ class TopBar extends Component {
                   href="javascript:"
                   className={cn('tc-btn tc-btn-sm', {active: isFilterVisible})}
                   onClick={this.props.onToggleFilter}
-                >Filters</a>
+                >Filters { noOfFilters > 0 && <span className="filter-indicator">{ noOfFilters }</span> }</a>
               </div>}
             </div>
             {avatar}

src/components/TopBar/TopBar.scss

@@ -76,7 +76,7 @@ $tc-body-large     		: 20px;
 
       .search-bar{
         margin: 0 auto;
-        width: 585px;
+        width: 605px;
         padding-top: 15px;
         display: flex;
         justify-content:space-between;
@@ -88,9 +88,11 @@ $tc-body-large     		: 20px;
           height: 30px;
         }
         .search-filter{
-          width: 77px;
+          width: 97px;
           .tc-btn{
-            display: block;
+            display: flex;
+            align-items: center;
+            justfiy-content: center;
             padding: 5px 0 5px 34px;
             text-align: left;
             color: $tc-gray-40;
@@ -118,6 +120,18 @@ $tc-body-large     		: 20px;
               }
             }
           }
+
+          .filter-indicator {
+            width: 15px;
+            height: 15px;
+            margin-left: $base-unit;
+            background-color: $tc-dark-blue-90;
+            border-radius: 26px;
+            color: $tc-white;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
         }
       }
       .welcome-info{

src/projects/reducers/projectSearch.js

@@ -28,7 +28,7 @@ export default function(state = initialState, action) {
     })
   case GET_PROJECTS_SEARCH_CRITERIA:
     return Object.assign({}, state, {
-      criteria: action.criteria,
+      criteria: Object.assign({}, action.criteria ),
       pageNum: action.pageNum
     })
   case CLEAR_PROJECT_SEARCH: