From 503ab5c66ab524dfe36aed84a01899cd07ed2bc5 Mon Sep 17 00:00:00 2001
From: Noah Loomans <noahloomans@gmail.com>
Date: Wed, 13 Dec 2017 15:53:19 +0100
Subject: Allow selection of result using keyboard

---
 src/client/react/components/container/Results.jsx | 15 ++++++++++++---
 src/client/react/components/container/Search.jsx  | 20 +++++++++++++++++++-
 2 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'src/client/react/components/container')

diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx
index 1c38c8b..9be2639 100644
--- a/src/client/react/components/container/Results.jsx
+++ b/src/client/react/components/container/Results.jsx
@@ -4,14 +4,14 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import Result from '../presentational/Result';
 
-const Results = (({ results }) => (
+const Results = (({ results, selectedResult }) => (
   <div
     className={classnames('search__results', {
       'search__results--has-results': results.length > 0,
     })}
   >
     {results.map(user => (
-      <Result key={user.value} user={user} />
+      <Result key={user.value} user={user} selected={user === selectedResult} />
     ))}
   </div>
 ));
@@ -19,12 +19,21 @@ const Results = (({ results }) => (
 Results.propTypes = {
   results: PropTypes.arrayOf(PropTypes.shape({
     type: PropTypes.string,
-    value: PropTypes.value,
+    value: PropTypes.string,
   })).isRequired,
+  selectedResult: PropTypes.shape({
+    type: PropTypes.string,
+    value: PropTypes.string,
+  }),
+};
+
+Results.defaultProps = {
+  selectedResult: null,
 };
 
 const mapStateToProps = state => ({
   results: state.search.results,
+  selectedResult: state.search.selectedResult,
 });
 
 export default connect(mapStateToProps)(Results);
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 7e33e84..50917dd 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -5,7 +5,7 @@ import classnames from 'classnames';
 
 import SearchIcon from 'react-icons/lib/md/search';
 
-import { inputChange } from '../../actions/search';
+import { inputChange, changeSelectedResult } from '../../actions/search';
 
 import Results from './Results';
 import IconFromUserType from '../presentational/IconFromUserType';
@@ -25,6 +25,7 @@ class Search extends React.Component {
 
     this.onFocus = this.onFocus.bind(this);
     this.onBlur = this.onBlur.bind(this);
+    this.onKeyDown = this.onKeyDown.bind(this);
   }
 
   onFocus() {
@@ -39,6 +40,22 @@ class Search extends React.Component {
     });
   }
 
+  onKeyDown(event) {
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      event.preventDefault();
+      switch (event.key) {
+        case 'ArrowUp':
+          this.props.dispatch(changeSelectedResult(-1));
+          break;
+        case 'ArrowDown':
+          this.props.dispatch(changeSelectedResult(+1));
+          break;
+        default:
+          throw new Error('This should never happen... pls?');
+      }
+    }
+  }
+
   render() {
     const {
       value,
@@ -63,6 +80,7 @@ class Search extends React.Component {
           <input
             id="search__input"
             onChange={event => dispatch(inputChange(event.target.value))}
+            onKeyDown={this.onKeyDown}
             value={value}
             placeholder="Zoeken"
             onFocus={this.onFocus}
-- 
cgit v1.1