New filter functionality for 'status'

src/app/actions/SearchActions.js

@@ -8,4 +8,10 @@ export default {
             criteria: _criteria,
         });
     },
+    changeStatus(_status) {
+        AppDispatcher.dispatch({
+            actionType: SearchConstants.CHANGE_STATUS,
+            status: _status,
+        });
+    },
 };

src/app/components/SearchComponent.jsx

@@ -1,11 +1,42 @@
 import React, { Component } from 'react';
+import _ from 'underscore';
 import SearchActions from '../actions/SearchActions';
+import ItemsStore from '../stores/ItemsStore';
 
 export default class SearchComponent extends Component {
 
+    constructor(props) {
+        super(props);
+        this.state = { status: ItemsStore.statusList() };
+    }
+
+    componentDidMount() {
+        ItemsStore.addChangeResultListener(this.onChangeResultHandler.bind(this));
+    }
+
+    componentWillUnmount() {
+        ItemsStore.removeChangeResultListener(this.onChangeResultHandler.bind(this));
+    }
+
+    onChangeResultHandler() {
+        this.setState({ status: ItemsStore.statusList() });
+    }
+
+    status() {
+        return _.map(this.state.status, (status, key) => (
+            <option key={key} value={status}>{status}</option>
+        ));
+    }
+
     render() {
         return (
-            <input type="search" placeholder="Search" className="uk-input uk-width-1-4@s" onChange={(event) => { SearchActions.changeCriteria(event.target.value) }} />
+            <div>
+                <input type="search" placeholder="Search" className="uk-input uk-width-1-4@s" onChange={(event) => { SearchActions.changeCriteria(event.target.value) }} />
+                <select className="uk-select uk-width-1-4@s" onChange={(event) => { SearchActions.changeStatus(event.target.value) }} >
+                    <option value="">Please select...</option>
+                    { this.status() }
+                </select>
+            </div>
         );
     }
 

src/app/constants/SearchConstants.js

@@ -1,3 +1,4 @@
 export default {
     CHANGE_CRITERIA: 'CHANGE_CRITERIA',
+    CHANGE_STATUS: 'CHANGE_STATUS',
 };

src/app/stores/ItemsStore.js

@@ -18,13 +18,20 @@ const state = {
         // url: 'items.json',
     },
     criteria: '',
+    status: '',
 };
 
-let results = [];
+const results = {
+    items: [],
+    status: [],
+};
 
 const ItemsStore = Object.assign({}, EventEmitter.prototype, {
     result() {
-        return results;
+        return results.items;
+    },
+    statusList() {
+        return results.status;
     },
     emitChangeResult() {
         this.emit(EVENTS.CHANGE_RESULT);
@@ -43,15 +50,25 @@ const groupByCategories = (items) => {
     });
 };
 
-const search = (criteria) => {
+const updateResultStatus = (items) => {
+    const status = _.groupBy(items, (item) => {
+        return item.status;
+    });
+
+    results.status = _.keys(status);
+};
+
+const search = () => {
     itemsLoader.load(state.endpoint, (items) => {
-        const rx = new RegExp(criteria, 'i');
+        updateResultStatus(items);
 
-        results = _.filter(items, (item) => {
-            return rx.test(item.name) || rx.test(item.description);
+        const criteriaRegExp = new RegExp(state.criteria, 'i');
+
+        results.items = _.filter(items, (item) => {
+            return (criteriaRegExp.test(item.name) || criteriaRegExp.test(item.description)) && (state.status !== '' ? item.status === state.status : true);
         });
 
-        results = groupByCategories(results);
+        results.items = groupByCategories(results.items);
 
         ItemsStore.emitChangeResult();
     });
@@ -61,7 +78,11 @@ AppDispatcher.register((action) => {
     switch (action.actionType) {
     case SearchConstants.CHANGE_CRITERIA:
         state.criteria = action.criteria;
-        search(action.criteria);
+        search();
+        break;
+    case SearchConstants.CHANGE_STATUS:
+        state.status = action.status;
+        search();
         break;
     default:
         // no op