Add logic to filter input field

Add correct css to input field addon icon

client/less/lib/bootstrap/input-groups.less

@@ -63,7 +63,7 @@
 // Addon and addon wrapper for buttons
 .input-group-addon,
 .input-group-btn {
-  width: 1%;
+  min-width: 1%;
   white-space: nowrap;
   vertical-align: middle; // Match the inputs
 }

client/less/map.less

@@ -130,17 +130,11 @@
     border-color: darkgreen;
 }
 
-.input-group-addon {
-  width:40px;
+.map-filter + .input-group-addon {
+  width: 40px;
   color: darkgreen;
-  background: #fff;
+  background-color: #fff;
   border-color: darkgreen;
-  &.filled{
-    background: darkgreen;
-    border-color: #000d00;
-    color: #fff;
-    cursor: pointer;
-  }
   .fa {
     position:absolute;
     top:50%;
@@ -150,6 +144,14 @@
   }
 }
 
+.map-filter.filled + span.input-group-addon {
+  background: darkgreen;
+  border-color: #000d00;
+  color: #fff;
+  cursor: pointer;
+}
+
+
 .map-wrapper {
   position: absolute;
   display: block;

common/app/routes/map/components/Map.jsx

@@ -1,4 +1,5 @@
 import React, { PropTypes } from 'react';
+import classnames from 'classnames';
 import PureComponent from 'react-pure-render/component';
 import { Input, Button, Row } from 'react-bootstrap';
 
@@ -6,10 +7,14 @@ import SuperBlock from './Super-Block.jsx';
 import FullStack from './Full-Stack.jsx';
 import CodingPrep from './Coding-Prep.jsx';
 
+const clearIcon = (<i className='fa fa-times' />);
+const searchIcon = (<i className='fa fa-search' />);
 export default class ShowMap extends PureComponent {
   static displayName = 'Map';
   static propTypes = {
-    superBlocks: PropTypes.array
+    superBlocks: PropTypes.array,
+    filter: PropTypes.string,
+    updateFilter: PropTypes.func
   };
 
   renderSuperBlocks(superBlocks) {
@@ -26,7 +31,12 @@ export default class ShowMap extends PureComponent {
   }
 
   render() {
-    const { superBlocks } = this.props;
+    const { superBlocks, updateFilter, filter } = this.props;
+    const inputIcon = filter ? clearIcon : searchIcon;
+    const inputClass = classnames({
+      'map-filter': true,
+      filled: !!filter
+    });
     return (
       <div>
         <div className='map-wrapper'>
@@ -44,11 +54,13 @@ export default class ShowMap extends PureComponent {
             </Row>
             <Row className='map-buttons'>
               <Input
-                addonAfter={ <span><i className='fa fa-search' /></span> }
+                addonAfter={ inputIcon }
                 autocompleted='off'
-                className='map-filter'
+                className={ inputClass }
+                onChange={ updateFilter }
                 placeholder='Type a challenge name'
-                type='text' />
+                type='text'
+                value={ filter }/>
             </Row>
             <hr />
           </div>

common/app/routes/map/components/Show.jsx

@@ -6,10 +6,13 @@ import { createSelector } from 'reselect';
 
 import Map from './Map.jsx';
 import contain from '../../../utils/professor-x';
-import { fetchChallenges } from '../redux/actions';
+import { fetchChallenges, updateFilter } from '../redux/actions';
 
-const bindableActions = { fetchChallenges };
-const mapStateToProps = createSelector(
+const bindableActions = {
+  fetchChallenges,
+  updateFilter
+};
+const superBlocksSelector = createSelector(
   state => state.map.superBlocks,
   state => state.entities.superBlock,
   state => state.entities.block,
@@ -20,7 +23,7 @@ const mapStateToProps = createSelector(
         superBlocks: []
       };
     }
-    const finalBlocks = superBlocks
+    return superBlocks
       .map(superBlockName => superBlockMap[superBlockName])
       .map(superBlock => ({
         ...superBlock,
@@ -32,11 +35,20 @@ const mapStateToProps = createSelector(
               .map(dashedName => challengeMap[dashedName])
           }))
       }));
+  }
+);
+
+const mapStateToProps = createSelector(
+  superBlocksSelector,
+  state => state.map.filter,
+  (superBlocks, filter) => {
     return {
-      superBlocks: finalBlocks
+      superBlocks,
+      filter
     };
   }
 );
+
 const fetchOptions = {
   fetchAction: 'fetchChallenges',
   isPrimed({ superBlocks }) {
@@ -47,13 +59,14 @@ const fetchOptions = {
 export class ShowMap extends PureComponent {
   static displayName = 'ShowMap';
   static propTypes = {
-    superBlocks: PropTypes.array
+    filter: PropTypes.string,
+    superBlocks: PropTypes.array,
+    updateFilter: PropTypes.func
   };
 
   render() {
-    const { superBlocks } = this.props;
     return (
-      <Map superBlocks={ superBlocks } />
+      <Map { ...this.props } />
     );
   }
 }

common/app/routes/map/redux/actions.js

@@ -8,3 +8,8 @@ export const fetchChallengesCompleted = createAction(
   (_, superBlocks) => superBlocks,
   entities => ({ entities })
 );
+
+export const updateFilter = createAction(
+  types.updateFilter,
+  e => e.target.value
+);

common/app/routes/map/redux/reducer.js

@@ -3,7 +3,8 @@ import { handleActions } from 'redux-actions';
 import types from './types';
 
 const initialState = {
-  superBlocks: []
+  superBlocks: [],
+  filter: ''
 };
 
 export default handleActions(
@@ -11,6 +12,10 @@ export default handleActions(
     [types.fetchChallengesCompleted]: (state, { payload = [] }) => ({
       ...state,
       superBlocks: payload
+    }),
+    [types.updateFilter]: (state, { payload = ''}) => ({
+      ...state,
+      filter: payload
     })
   },
   initialState

common/app/routes/map/redux/types.js

@@ -2,5 +2,6 @@ import createTypes from '../../../utils/create-types';
 
 export default createTypes([
   'fetchChallenges',
-  'fetchChallengesCompleted'
+  'fetchChallengesCompleted',
+  'updateFilter'
 ], 'map');