client/Search: Refactor

2 files changed, 41 insertions, 41 deletions

diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 8308d67..b680fc6 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -18,24 +18,35 @@
  *
  */
 
+
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 import Search from '../presentational/Search';
-import { setUser } from '../../store/actions';
+import { setUser as setUserAction } from '../../store/actions';
+import { userFromLocation } from '../../lib/url';
+import users from '../../users';
 
-const mapStateToProps = state => ({
-  results: state.search.results,
-  searchText: state.search.text,
-  selectedResult: state.search.selected,
-});
+const mapStateToProps = (state, { location }) => {
+  const currentUser = userFromLocation(location);
+  const searchText = state.search.text;
+  const isExactMatch = currentUser != null && searchText === users.byId[currentUser].value;
+
+  return {
+    currentUser,
+    isExactMatch,
+    selectedUser: state.search.selected,
+    results: state.search.results,
+    searchText: state.search.text,
+  };
+};
 
 const mapDispatchToProps = dispatch => ({
-  setUser: user => dispatch(setUser(user)),
+  setUser: user => dispatch(setUserAction(user)),
   onInputChange: searchText => dispatch({
     type: 'SEARCH/INPUT_CHANGE',
     searchText,
   }),
-  changeSelectedResult: relativeChange => dispatch({
+  changeSelectedUser: relativeChange => dispatch({
     type: 'SEARCH/CHANGE_SELECTED_RESULT',
     relativeChange,
   }),
diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
index 8c90efb..c39b441 100644
--- a/src/client/react/components/presentational/Search.js
+++ b/src/client/react/components/presentational/Search.js
@@ -24,8 +24,6 @@ import classnames from 'classnames';
 
 import SearchIcon from 'react-icons/lib/md/search';
 
-import { userFromMatch } from '../../lib/url';
-
 import users from '../../users';
 import Menu from '../container/Menu';
 import Results from '../container/Results';
@@ -35,16 +33,18 @@ import './Search.scss';
 
 class Search extends React.Component {
   static propTypes = {
-    selectedResult: PropTypes.string,
+    currentUser: PropTypes.string,
+    selectedUser: PropTypes.string,
     searchText: PropTypes.string.isRequired,
-    match: PropTypes.object.isRequired,
-    setUser: PropTypes.func.isRequired,
+    isExactMatch: PropTypes.bool.isRequired,
     onInputChange: PropTypes.func.isRequired,
-    changeSelectedResult: PropTypes.func.isRequired,
+    setUser: PropTypes.func.isRequired,
+    changeSelectedUser: PropTypes.func.isRequired,
   };
 
   static defaultProps = {
-    selectedResult: null,
+    currentUser: null,
+    selectedUser: null,
   };
 
   constructor(props) {
@@ -53,10 +53,6 @@ class Search extends React.Component {
     this.state = {
       hasFocus: false,
     };
-
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   onFocus() {
@@ -71,36 +67,34 @@ class Search extends React.Component {
     });
   }
 
-  onKeyDown(event) {
+  handleKeyDown(event) {
     const {
-      selectedResult,
-      match,
+      currentUser,
+      selectedUser,
       setUser,
-      changeSelectedResult,
+      changeSelectedUser,
     } = this.props;
 
-    const urlUser = userFromMatch(match);
-
     switch (event.key) {
       case 'ArrowUp':
         event.preventDefault();
-        changeSelectedResult(-1);
+        changeSelectedUser(-1);
         break;
 
       case 'ArrowDown':
         event.preventDefault();
-        changeSelectedResult(+1);
+        changeSelectedUser(+1);
         break;
 
       case 'Escape':
         event.preventDefault();
-        setUser(urlUser);
+        setUser(currentUser);
         break;
 
       case 'Enter':
         event.preventDefault();
-        if (selectedResult) {
-          setUser(selectedResult);
+        if (selectedUser) {
+          setUser(selectedUser);
         }
         break;
 
@@ -112,7 +106,8 @@ class Search extends React.Component {
   render() {
     const {
       searchText,
-      match,
+      selectedUser,
+      isExactMatch,
       onInputChange,
     } = this.props;
 
@@ -120,30 +115,24 @@ class Search extends React.Component {
       hasFocus,
     } = this.state;
 
-    const urlUser = userFromMatch(match);
-
-    const isExactMatch = (
-      urlUser != null && searchText === users.byId[urlUser].value
-    );
-
     return (
       <div className="Search">
         <div className={classnames('overflow', { hasFocus })}>
           <div className="inputWrapper">
             <div className="iconWrapper">
               <IconFromUserType
-                userType={isExactMatch ? users.byId[urlUser].type : null}
+                userType={isExactMatch ? users.byId[selectedUser].type : null}
                 defaultIcon={<SearchIcon />}
               />
             </div>
             <input
               id="searchInput"
               onChange={event => onInputChange(event.target.value)}
-              onKeyDown={this.onKeyDown}
+              onKeyDown={event => this.handleKeyDown(event)}
               value={searchText}
               placeholder="Zoeken"
-              onFocus={this.onFocus}
-              onBlur={this.onBlur}
+              onFocus={() => this.onFocus()}
+              onBlur={() => this.onBlur()}
               autoComplete="off"
             />
             <Menu />