5 files changed, 36 insertions, 33 deletions

diff --git a/src/client/react/components/container/HelpBox.js b/src/client/react/components/container/HelpBox.js
index 30b2942..d10c26b 100644
--- a/src/client/react/components/container/HelpBox.js
+++ b/src/client/react/components/container/HelpBox.js
@@ -22,7 +22,7 @@ import { connect } from 'react-redux';
 import HelpBox from '../presentational/HelpBox';
 
 const mapStateToProps = state => ({
-  isVisible: state.search.results.length === 0 && state.search.text === '',
+  isVisible: !state.search || (state.search.results.length === 0 && state.search.text === ''),
 });
 
 export default connect(mapStateToProps)(HelpBox);
diff --git a/src/client/react/components/container/Results.js b/src/client/react/components/container/Results.js
index 0d761d1..398adaa 100644
--- a/src/client/react/components/container/Results.js
+++ b/src/client/react/components/container/Results.js
@@ -19,27 +19,17 @@
  */
 
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import users from '../../users';
-import { userFromMatch } from '../../lib/url';
 import { setUser } from '../../store/actions';
 
 import Results from '../presentational/Results';
 
-const mapStateToProps = (state, { match }) => {
-  const user = userFromMatch(match);
-  const searchText = state.search.text;
-
-  return {
-    isExactMatch: user != null && searchText === users.byId[user].value,
-    results: state.search.results,
-    selectedResult: state.search.selected,
-  };
-};
+const mapStateToProps = state => ({
+  results: state.search ? state.search.results : undefined,
+  selectedResult: state.search && state.search.selected,
+});
 
 const mapDispatchToProps = dispatch => ({
   setUser: user => dispatch(setUser(user)),
 });
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Results));
+export default connect(mapStateToProps, mapDispatchToProps)(Results);
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index b680fc6..73919d3 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -28,21 +28,32 @@ import users from '../../users';
 
 const mapStateToProps = (state, { location }) => {
   const currentUser = userFromLocation(location);
-  const searchText = state.search.text;
-  const isExactMatch = currentUser != null && searchText === users.byId[currentUser].value;
+  const selectedUser = state.search && state.search.selected;
+  let searchText;
+  let isExactMatch;
+
+  if (state.search) {
+    searchText = state.search.text;
+    isExactMatch = false;
+  } else if (currentUser) {
+    searchText = users.byId[currentUser].value;
+    isExactMatch = true;
+  } else {
+    searchText = '';
+    isExactMatch = false;
+  }
 
   return {
     currentUser,
+    selectedUser,
+    searchText,
     isExactMatch,
-    selectedUser: state.search.selected,
-    results: state.search.results,
-    searchText: state.search.text,
   };
 };
 
 const mapDispatchToProps = dispatch => ({
   setUser: user => dispatch(setUserAction(user)),
-  onInputChange: searchText => dispatch({
+  changeInput: searchText => dispatch({
     type: 'SEARCH/INPUT_CHANGE',
     searchText,
   }),
diff --git a/src/client/react/components/presentational/Results.js b/src/client/react/components/presentational/Results.js
index 173c644..4abd507 100644
--- a/src/client/react/components/presentational/Results.js
+++ b/src/client/react/components/presentational/Results.js
@@ -27,34 +27,35 @@ import './Results.scss';
 
 class Results extends React.Component {
   static propTypes = {
-    results: PropTypes.arrayOf(PropTypes.string).isRequired,
+    results: PropTypes.arrayOf(PropTypes.string),
     selectedResult: PropTypes.string,
-    isExactMatch: PropTypes.bool.isRequired,
     setUser: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
     selectedResult: null,
+    results: [],
   };
 
   render() {
     const {
       results,
       selectedResult,
-      isExactMatch,
       setUser,
     } = this.props;
 
+    const hasResults = results.length > 0;
+
     return (
       <div
         className={classnames('Results', {
-          hasResults: !isExactMatch && results.length > 0,
+          hasResults,
         })}
         style={{
-          minHeight: isExactMatch ? 0 : results.length * 54,
+          minHeight: hasResults ? results.length * 54 : 0,
         }}
       >
-        {!isExactMatch && results.map(userId => (
+        {results.map(userId => (
           <Result
             key={userId}
             userId={userId}
diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
index c39b441..e7f49d6 100644
--- a/src/client/react/components/presentational/Search.js
+++ b/src/client/react/components/presentational/Search.js
@@ -37,8 +37,9 @@ class Search extends React.Component {
     selectedUser: PropTypes.string,
     searchText: PropTypes.string.isRequired,
     isExactMatch: PropTypes.bool.isRequired,
-    onInputChange: PropTypes.func.isRequired,
+
     setUser: PropTypes.func.isRequired,
+    changeInput: PropTypes.func.isRequired,
     changeSelectedUser: PropTypes.func.isRequired,
   };
 
@@ -106,9 +107,9 @@ class Search extends React.Component {
   render() {
     const {
       searchText,
-      selectedUser,
+      currentUser,
       isExactMatch,
-      onInputChange,
+      changeInput,
     } = this.props;
 
     const {
@@ -121,13 +122,13 @@ class Search extends React.Component {
           <div className="inputWrapper">
             <div className="iconWrapper">
               <IconFromUserType
-                userType={isExactMatch ? users.byId[selectedUser].type : null}
+                userType={isExactMatch ? users.byId[currentUser].type : null}
                 defaultIcon={<SearchIcon />}
               />
             </div>
             <input
               id="searchInput"
-              onChange={event => onInputChange(event.target.value)}
+              onChange={event => changeInput(event.target.value)}
               onKeyDown={event => this.handleKeyDown(event)}
               value={searchText}
               placeholder="Zoeken"