aboutsummaryrefslogtreecommitdiff
path: root/src/client/react/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/react/components')
-rw-r--r--src/client/react/components/container/Results.jsx20
-rw-r--r--src/client/react/components/container/Search.jsx10
-rw-r--r--src/client/react/components/presentational/Result.jsx16
3 files changed, 18 insertions, 28 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,
};
diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index 80f65d4..0b9e024 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -1,26 +1,24 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
+import users from '../../users';
import IconFromUserType from './IconFromUserType';
-const Result = ({ user, selected }) => (
+const Result = ({ userId, isSelected }) => (
<div
className={classnames('search__result', {
- 'search__result--selected': selected,
+ 'search__result--selected': isSelected,
})}
>
- <div className="search__icon-wrapper"><IconFromUserType userType={user.type} /></div>
- <div className="search__result__text">{user.value}</div>
+ <div className="search__icon-wrapper"><IconFromUserType userType={users.byId[userId].type} /></div>
+ <div className="search__result__text">{users.byId[userId].value}</div>
</div>
);
Result.propTypes = {
- user: PropTypes.shape({
- value: PropTypes.string.isRequired,
- type: PropTypes.string.isRequired,
- }).isRequired,
- selected: PropTypes.bool.isRequired,
+ userId: PropTypes.string.isRequired,
+ isSelected: PropTypes.bool.isRequired,
};
export default Result;