Split search

2 files changed, 3 insertions, 180 deletions

diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js
index 3e599e7..8308d67 100644
--- a/src/client/react/components/container/Search.js
+++ b/src/client/react/components/container/Search.js
@@ -18,145 +18,10 @@
  *
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 import { withRouter } from 'react-router-dom';
-
-import SearchIcon from 'react-icons/lib/md/search';
-
-import { userFromMatch } from '../../lib/url';
-import { setUser as setUserAction } from '../../store/actions';
-
-import users from '../../users';
-import Menu from './Menu';
-import Results from './Results';
-import IconFromUserType from '../presentational/IconFromUserType';
-
-import './Search.scss';
-
-class Search extends React.Component {
-  static propTypes = {
-    selectedResult: PropTypes.string,
-    searchText: PropTypes.string.isRequired,
-    match: PropTypes.object.isRequired,
-    setUser: PropTypes.func.isRequired,
-    onInputChange: PropTypes.func.isRequired,
-    changeSelectedResult: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    selectedResult: null,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      hasFocus: false,
-    };
-
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-    this.onKeyDown = this.onKeyDown.bind(this);
-  }
-
-  onFocus() {
-    this.setState({
-      hasFocus: true,
-    });
-  }
-
-  onBlur() {
-    this.setState({
-      hasFocus: false,
-    });
-  }
-
-  onKeyDown(event) {
-    const {
-      selectedResult,
-      match,
-      setUser,
-      changeSelectedResult,
-    } = this.props;
-
-    const urlUser = userFromMatch(match);
-
-    switch (event.key) {
-      case 'ArrowUp':
-        event.preventDefault();
-        changeSelectedResult(-1);
-        break;
-
-      case 'ArrowDown':
-        event.preventDefault();
-        changeSelectedResult(+1);
-        break;
-
-      case 'Escape':
-        event.preventDefault();
-        setUser(urlUser);
-        break;
-
-      case 'Enter':
-        event.preventDefault();
-        if (selectedResult) {
-          setUser(selectedResult);
-        }
-        break;
-
-      default:
-        // Do nothing
-    }
-  }
-
-  render() {
-    const {
-      searchText,
-      match,
-      onInputChange,
-    } = this.props;
-
-    const {
-      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}
-                defaultIcon={<SearchIcon />}
-              />
-            </div>
-            <input
-              id="searchInput"
-              onChange={event => onInputChange(event.target.value)}
-              onKeyDown={this.onKeyDown}
-              value={searchText}
-              placeholder="Zoeken"
-              onFocus={this.onFocus}
-              onBlur={this.onBlur}
-              autoComplete="off"
-            />
-            <Menu />
-          </div>
-          <Results />
-        </div>
-      </div>
-    );
-  }
-}
+import Search from '../presentational/Search';
+import { setUser } from '../../store/actions';
 
 const mapStateToProps = state => ({
   results: state.search.results,
@@ -165,7 +30,7 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  setUser: user => dispatch(setUserAction(user)),
+  setUser: user => dispatch(setUser(user)),
   onInputChange: searchText => dispatch({
     type: 'SEARCH/INPUT_CHANGE',
     searchText,
diff --git a/src/client/react/components/container/Search.scss b/src/client/react/components/container/Search.scss
deleted file mode 100644
index ef629c2..0000000
--- a/src/client/react/components/container/Search.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.Search {
-  height: 54px;
-  position: relative;
-
-  .overflow {
-    border-radius: 2px;
-    background-color: white;
-    position: absolute;
-    width: 100%;
-    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
-
-    &.hasFocus {
-      box-shadow: 0 3px 8px 0 rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08);
-    }
-
-    .inputWrapper {
-      display: flex;
-      height: 54px;
-
-      .iconWrapper {
-        height: 54px;
-        padding: 15px;
-
-        svg {
-          height: 24px;
-          width: 24px;
-        }
-      }
-
-      input {
-        border: 0;
-        background-color: transparent;
-        flex-grow: 1;
-        height: inherit;
-        padding: 16px;
-        padding-left: 0px;
-        font-size: 16px;
-        outline: none;
-      }
-    }
-  }
-}