From 0e6d7e93225c7c0151cd6f1f5956c938e6ce9c3b Mon Sep 17 00:00:00 2001
From: Simon Rozsival <simon@rozsival.com>
Date: Thu, 24 Nov 2016 23:54:44 +0100
Subject: [PATCH] search fix

---
 src/components/Search/Search.js               | 88 ++++++++++---------
 .../AddUserContainer/AddUserContainer.js      |  5 +-
 .../SearchContainer/SearchContainer.js        | 22 +++--
 .../SelectExerciseContainer.js                |  8 +-
 src/redux/modules/search.js                   |  5 +-
 5 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/src/components/Search/Search.js b/src/components/Search/Search.js
index 0021c8c03..9b53eac16 100644
--- a/src/components/Search/Search.js
+++ b/src/components/Search/Search.js
@@ -1,56 +1,62 @@
-import React, { PropTypes } from 'react';
+import React, { PropTypes, Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
-import { FormGroup, ControlLabel, FormControl, InputGroup } from 'react-bootstrap';
-import { Debounce } from 'react-throttle';
+import { Button, FormGroup, ControlLabel, FormControl, InputGroup } from 'react-bootstrap';
 import { LoadingIcon, SearchIcon, WarningIcon } from '../Icons';
 
 // some additional styling for a scrolable vertical box
 import styles from './search.less';
 
-const Search = ({
-  id = '',
-  type = 'general',
-  onChange,
-  isLoading,
-  hasFailed,
-  isReady,
-  query,
-  foundItems,
-  renderList
-}) => (
-  <div>
-    <FormGroup>
-      <ControlLabel htmlFor={id}>
-        <FormattedMessage id='app.search.title' defaultMessage='Search:' />
-      </ControlLabel>
-      <InputGroup>
-        <InputGroup.Addon>
-          {isLoading && <LoadingIcon />}
-          {hasFailed && <WarningIcon />}
-          {!isLoading && !hasFailed && <SearchIcon />}
-        </InputGroup.Addon>
-        <Debounce time={300} handler='onChange'>
-          <FormControl id={id} onChange={e => onChange(id, e.target.value)} />
-        </Debounce>
-      </InputGroup>
-    </FormGroup>
-    {query && query.length > 0 && (
+class Search extends Component {
+
+  render() {
+    const {
+      id = '',
+      onChange,
+      isLoading,
+      hasFailed,
+      query,
+      foundItems,
+      renderList
+    } = this.props;
+
+    return (
       <div>
-        <p>
-          {' '}<FormattedMessage id='app.search.query' defaultMessage='Searched query: ' />
-          <strong><em>"{query}"</em></strong>
-        </p>
+        <FormGroup>
+          <ControlLabel htmlFor={id}>
+            <FormattedMessage id='app.search.title' defaultMessage='Search:' />
+          </ControlLabel>
+          <InputGroup>
+            <FormControl id={id} onChange={e => { this.query = e.target.value; }} />
+            <InputGroup.Button>
+              <Button
+                onClick={() => onChange(this.query)}
+                disabled={false && !isLoading && !hasFailed}>
+                {isLoading && <LoadingIcon />}
+                {hasFailed && <WarningIcon />}
+                {!isLoading && !hasFailed && <SearchIcon />}
+              </Button>
+            </InputGroup.Button>
+          </InputGroup>
+        </FormGroup>
+        {query && query.length > 0 && (
+          <div>
+            <p>
+              {' '}<FormattedMessage id='app.search.query' defaultMessage='Searched query: ' />
+              <strong><em>"{query}"</em></strong>
+            </p>
 
-        {(!isLoading || foundItems.size > 0) && (
-          <div className={styles.list}>
-            {renderList(foundItems.toJS())}
+            {(!isLoading || foundItems.size > 0) && (
+              <div className={styles.list}>
+                {renderList(foundItems.toJS())}
+              </div>
+            )}
           </div>
         )}
       </div>
-    )}
-  </div>
-);
+    );
+  }
+}
 
 Search.propTypes = {
   id: PropTypes.string,
diff --git a/src/containers/AddUserContainer/AddUserContainer.js b/src/containers/AddUserContainer/AddUserContainer.js
index f31974cd5..61a4b9e63 100644
--- a/src/containers/AddUserContainer/AddUserContainer.js
+++ b/src/containers/AddUserContainer/AddUserContainer.js
@@ -22,13 +22,14 @@ const AddUserContainer = ({
 
 AddUserContainer.propTypes = {
   id: PropTypes.string.isRequired,
+  instanceId: PropTypes.string.isRequired,
   groupId: PropTypes.string.isRequired,
   search: PropTypes.func.isRequired,
   createActions: PropTypes.func
 };
 
-const mapDispatchToProps = (dispatch, { instanceId }) => ({
-  search: (id, query) => dispatch(searchPeople(instanceId)(id, query))
+const mapDispatchToProps = (dispatch, props) => ({
+  search: (query) => dispatch(searchPeople(props.instanceId)(props.id, query))
 });
 
 export default connect(undefined, mapDispatchToProps)(AddUserContainer);
diff --git a/src/containers/SearchContainer/SearchContainer.js b/src/containers/SearchContainer/SearchContainer.js
index 8a3d1996a..8841927a3 100644
--- a/src/containers/SearchContainer/SearchContainer.js
+++ b/src/containers/SearchContainer/SearchContainer.js
@@ -9,16 +9,17 @@ import { getSearchStatus, getSearchResults, getSearchQuery } from '../../redux/s
 
 const SearchContainer = ({
   id,
+  type = 'search',
   query,
   search,
   status,
-  exercises,
+  foundItems,
   renderList
 }) => (
   <Search
-    type='exercises'
+    type={type}
     id={id}
-    foundItems={exercises}
+    foundItems={foundItems}
     query={query}
     isReady={status === searchStatus.READY}
     isLoading={status === searchStatus.PENDING}
@@ -29,17 +30,20 @@ const SearchContainer = ({
 
 SearchContainer.propTypes = {
   id: PropTypes.string.isRequired,
+  type: PropTypes.string,
   search: PropTypes.func.isRequired,
   query: PropTypes.string,
   status: PropTypes.string,
-  exercises: ImmutablePropTypes.list.isRequired,
+  foundItems: ImmutablePropTypes.list.isRequired,
   renderList: PropTypes.func.isRequired
 };
 
-const mapStateToProps = (state, { id }) => ({
-  status: getSearchStatus(id)(state),
-  query: getSearchQuery(id)(state),
-  exercises: getSearchResults(id)(state)
-});
+const mapStateToProps = (state, { id }) => {
+  return {
+    status: getSearchStatus(id)(state),
+    query: getSearchQuery(id)(state),
+    foundItems: getSearchResults(id)(state)
+  };
+};
 
 export default connect(mapStateToProps)(SearchContainer);
diff --git a/src/containers/SelectExerciseContainer/SelectExerciseContainer.js b/src/containers/SelectExerciseContainer/SelectExerciseContainer.js
index ca512b4c4..be763d804 100644
--- a/src/containers/SelectExerciseContainer/SelectExerciseContainer.js
+++ b/src/containers/SelectExerciseContainer/SelectExerciseContainer.js
@@ -6,7 +6,7 @@ import SearchContainer from '../SearchContainer';
 import ExercisesList from '../../components/Exercises/ExercisesList';
 
 const SelectExerciseContainer = ({
-  groupId: id,
+  id,
   search,
   createActions
 }) => (
@@ -20,13 +20,13 @@ const SelectExerciseContainer = ({
 );
 
 SelectExerciseContainer.propTypes = {
-  groupId: PropTypes.string.isRequired,
+  id: PropTypes.string.isRequired,
   search: PropTypes.func.isRequired,
   createActions: PropTypes.func
 };
 
-const mapDispatchToProps = (dispatch) => ({
-  search: (id, query) => dispatch(searchExercises()(id, query))
+const mapDispatchToProps = (dispatch, { id }) => ({
+  search: (query) => dispatch(searchExercises()(id, query))
 });
 
 export default connect(undefined, mapDispatchToProps)(SelectExerciseContainer);
diff --git a/src/redux/modules/search.js b/src/redux/modules/search.js
index 3b91576af..5aee89fd7 100644
--- a/src/redux/modules/search.js
+++ b/src/redux/modules/search.js
@@ -31,8 +31,9 @@ export default handleActions({
   [actionTypes.SEARCH_REJECTED]: (state, { meta: { id } }) =>
     state.update(id, search => search.set('status', searchStatus.FAILED)),
 
-  [actionTypes.SEARCH_FULFILLED]: (state, { payload: results, meta: { id } }) =>
-    state.update(id, search => search.set('status', searchStatus.READY).set('results', fromJS(results)))
+  [actionTypes.SEARCH_FULFILLED]: (state, { payload: results, meta: { id } }) => {
+    return state.update(id, search => search.set('status', searchStatus.READY).set('results', fromJS(results)));
+  }
 
 }, initialState);