Add filter clearing logic

client/less/map.less

@@ -149,9 +149,14 @@
   border-color: #000d00;
   color: #fff;
   cursor: pointer;
+  padding: 0;
+  span {
+    display: inline-block;
+    min-height: 30px;
+    width: 100%;
+  }
 }
 
-
 .map-wrapper {
   position: absolute;
   display: block;

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

@@ -7,13 +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 clearIcon = <i className='fa fa-times' />;
-const searchIcon = (<i className='fa fa-search' />);
+const searchIcon = <i className='fa fa-search' />;
 export default class ShowMap extends PureComponent {
   static displayName = 'Map';
   static propTypes = {
-    superBlocks: PropTypes.array,
+    clearFilter: PropTypes.func,
     filter: PropTypes.string,
+    superBlocks: PropTypes.array,
     updateFilter: PropTypes.func
   };
 
@@ -31,8 +32,10 @@ export default class ShowMap extends PureComponent {
   }
 
   render() {
-    const { superBlocks, updateFilter, filter } = this.props;
+    const { superBlocks, updateFilter, clearFilter, filter } = this.props;
-    const inputIcon = filter ? clearIcon : searchIcon;
+    const inputIcon = !filter ?
+      searchIcon :
+      <span onClick={ clearFilter }>{ clearIcon }</span>;
     const inputClass = classnames({
       'map-filter': true,
       filled: !!filter

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

@@ -6,9 +6,14 @@ import { createSelector } from 'reselect';
 
 import Map from './Map.jsx';
 import contain from '../../../utils/professor-x';
-import { fetchChallenges, updateFilter } from '../redux/actions';
+import {
+  clearFilter,
+  fetchChallenges,
+  updateFilter
+} from '../redux/actions';
 
 const bindableActions = {
+  clearFilter,
   fetchChallenges,
   updateFilter
 };
@@ -59,6 +64,7 @@ const fetchOptions = {
 export class ShowMap extends PureComponent {
   static displayName = 'ShowMap';
   static propTypes = {
+    clearFilter: PropTypes.func,
     filter: PropTypes.string,
     superBlocks: PropTypes.array,
     updateFilter: PropTypes.func

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

@@ -13,3 +13,5 @@ export const updateFilter = createAction(
   types.updateFilter,
   e => e.target.value
 );
+
+export const clearFilter = createAction(types.clearFilter);

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

@@ -16,6 +16,10 @@ export default handleActions(
     [types.updateFilter]: (state, { payload = ''}) => ({
       ...state,
       filter: payload
+    }),
+    [types.clearFilter]: (state) => ({
+      ...state,
+      filter: ''
     })
   },
   initialState

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

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