aboutsummaryrefslogtreecommitdiff
path: root/src/client/react
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-11 20:36:51 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-11 20:36:51 +0100
commit2cac093369ecb965ddbef60e6dc2aa6e50f0e937 (patch)
tree169888d81716b85c7406aad52bd36c848fdf1955 /src/client/react
parent00d4e5241e220f8f1df4f3d5b796bc70d5fcd3fe (diff)
Refactor Results out of Search
Diffstat (limited to 'src/client/react')
-rw-r--r--src/client/react/components/container/Results.jsx15
-rw-r--r--src/client/react/components/container/Search.jsx13
-rw-r--r--src/client/react/components/presentational/IconFromUserType.jsx2
-rw-r--r--src/client/react/components/presentational/Result.jsx2
4 files changed, 22 insertions, 10 deletions
diff --git a/src/client/react/components/container/Results.jsx b/src/client/react/components/container/Results.jsx
new file mode 100644
index 0000000..04d1f84
--- /dev/null
+++ b/src/client/react/components/container/Results.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import Result from '../presentational/Result';
+
+const Results = (({ results }) => (
+ results.map(user => (
+ <Result key={user.value} user={user} />
+ ))
+));
+
+const mapStateToProps = state => ({
+ results: state.search.results,
+});
+
+export default connect(mapStateToProps)(Results);
diff --git a/src/client/react/components/container/Search.jsx b/src/client/react/components/container/Search.jsx
index 7a2822f..7890423 100644
--- a/src/client/react/components/container/Search.jsx
+++ b/src/client/react/components/container/Search.jsx
@@ -7,8 +7,8 @@ import SearchIcon from 'react-icons/lib/md/search';
import { inputChange, focusChange } from '../../actions/search';
+import Results from './Results';
import IconFromUserType from '../presentational/IconFromUserType';
-import Result from '../presentational/Result';
const userShape = {
value: PropTypes.string.isRequired,
@@ -21,16 +21,14 @@ const Search = ({
onBlur,
hasFocus,
value,
- results,
exactMatch,
}) => (
- <div className={classnames('search', { 'search--has-focus': hasFocus, 'search--has-results': results.length > 0 })}>
+ <div className={classnames('search', { 'search--has-focus': hasFocus })}>
<div className="search__input-wrapper">
- {/* Show the icon from the exact match if there is an exact match, otherwise show the search icon. */}
<div className="search__icon-wrapper">
<IconFromUserType
userType={exactMatch ? exactMatch.type : null}
- default={<SearchIcon />}
+ defaultIcon={<SearchIcon />}
/>
</div>
<input
@@ -42,9 +40,7 @@ const Search = ({
onBlur={onBlur}
/>
</div>
- {results.map(user => (
- <Result key={user.value} user={user} />
- ))}
+ <Results />
</div>
);
@@ -54,7 +50,6 @@ Search.propTypes = {
onBlur: PropTypes.func.isRequired,
hasFocus: PropTypes.bool.isRequired,
value: PropTypes.string.isRequired,
- results: PropTypes.arrayOf(PropTypes.shape(userShape)).isRequired,
exactMatch: PropTypes.shape(userShape),
};
diff --git a/src/client/react/components/presentational/IconFromUserType.jsx b/src/client/react/components/presentational/IconFromUserType.jsx
index 6bd2a21..ee0e04b 100644
--- a/src/client/react/components/presentational/IconFromUserType.jsx
+++ b/src/client/react/components/presentational/IconFromUserType.jsx
@@ -26,7 +26,7 @@ const IconFromUserType = ({ userType, defaultIcon }) => {
IconFromUserType.propTypes = {
userType: PropTypes.string,
- defaultIcon: PropTypes.react,
+ defaultIcon: PropTypes.element,
};
IconFromUserType.defaultProps = {
diff --git a/src/client/react/components/presentational/Result.jsx b/src/client/react/components/presentational/Result.jsx
index 4876493..a4a0b8e 100644
--- a/src/client/react/components/presentational/Result.jsx
+++ b/src/client/react/components/presentational/Result.jsx
@@ -16,3 +16,5 @@ Result.propTypes = {
type: PropTypes.string.isRequired,
}).isRequired,
};
+
+export default Result;