Use id's instead of user objects

2 files changed, 11 insertions, 19 deletions

diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx
index 9be2639..911ea27 100644
--- a/src/client/react/components/container/Results.jsx
+++ b/src/client/react/components/container/Results.jsx
@@ -4,27 +4,22 @@ import { connect } from 'react-redux';
 import classnames from 'classnames';
 import Result from '../presentational/Result';
 
-const Results = (({ results, selectedResult }) => (
+const Results = (({ results, isExactMatch, selectedResult }) => (
   <div
     className={classnames('search__results', {
-      'search__results--has-results': results.length > 0,
+      'search__results--has-results': !isExactMatch && results.length > 0,
     })}
   >
-    {results.map(user => (
-      <Result key={user.value} user={user} selected={user === selectedResult} />
+    {!isExactMatch && results.map(userId => (
+      <Result key={userId} userId={userId} isSelected={userId === selectedResult} />
     ))}
   </div>
 ));
 
 Results.propTypes = {
-  results: PropTypes.arrayOf(PropTypes.shape({
-    type: PropTypes.string,
-    value: PropTypes.string,
-  })).isRequired,
-  selectedResult: PropTypes.shape({
-    type: PropTypes.string,
-    value: PropTypes.string,
-  }),
+  results: PropTypes.arrayOf(PropTypes.string).isRequired,
+  isExactMatch: PropTypes.bool.isRequired,
+  selectedResult: PropTypes.string,
 };
 
 Results.defaultProps = {
@@ -33,6 +28,7 @@ Results.defaultProps = {
 
 const mapStateToProps = state => ({
   results: state.search.results,
+  isExactMatch: state.search.isExactMatch,
   selectedResult: state.search.selectedResult,
 });
 
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 50917dd..babe0c4 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -7,14 +7,10 @@ import SearchIcon from 'react-icons/lib/md/search';
 
 import { inputChange, changeSelectedResult } from '../../actions/search';
 
+import users from '../../users';
 import Results from './Results';
 import IconFromUserType from '../presentational/IconFromUserType';
 
-const userShape = {
-  value: PropTypes.string.isRequired,
-  type: PropTypes.string.isRequired,
-};
-
 class Search extends React.Component {
   constructor(props) {
     super(props);
@@ -73,7 +69,7 @@ class Search extends React.Component {
         <div className="search__input-wrapper">
           <div className="search__icon-wrapper">
             <IconFromUserType
-              userType={isExactMatch ? selectedResult.type : null}
+              userType={isExactMatch ? users.byId[selectedResult].type : null}
               defaultIcon={<SearchIcon />}
             />
           </div>
@@ -95,7 +91,7 @@ class Search extends React.Component {
 
 Search.propTypes = {
   value: PropTypes.string.isRequired,
-  selectedResult: PropTypes.shape(userShape),
+  selectedResult: PropTypes.string,
   isExactMatch: PropTypes.bool.isRequired,
   dispatch: PropTypes.func.isRequired,
 };