Allow selection of result using keyboard

1 files changed, 12 insertions, 3 deletions

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);