diff options
Diffstat (limited to 'src/client/react/components')
-rw-r--r-- | src/client/react/components/container/Search.js | 20 | ||||
-rw-r--r-- | src/client/react/components/presentational/Search.js | 6 |
2 files changed, 23 insertions, 3 deletions
diff --git a/src/client/react/components/container/Search.js b/src/client/react/components/container/Search.js new file mode 100644 index 0000000..1b5a41d --- /dev/null +++ b/src/client/react/components/container/Search.js @@ -0,0 +1,20 @@ +import { connect } from 'react-redux'; +import { type } from '../../actions'; +import PresentationalSearch from '../presentational/Search'; + +const mapStateToProps = state => ({ + results: state.searchResults, +}); + +const mapDispatchToProps = dispatch => ({ + onType: (event) => { + dispatch(type(event.target.value)); + }, +}); + +const Search = connect( + mapStateToProps, + mapDispatchToProps, +)(PresentationalSearch); + +export default Search; diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js index 0dde8a6..ce4a09d 100644 --- a/src/client/react/components/presentational/Search.js +++ b/src/client/react/components/presentational/Search.js @@ -1,10 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Search = ({ onInput, results }) => ( +const Search = ({ onType, results }) => ( <div> <input - onInput={onInput} + onChange={onType} placeholder="Zoeken" /> <ul> @@ -14,7 +14,7 @@ const Search = ({ onInput, results }) => ( ); Search.propTypes = { - onInput: PropTypes.func.isRequired, + onType: PropTypes.func.isRequired, results: PropTypes.arrayOf(PropTypes.shape({ name: PropTypes.string.require, type: PropTypes.string.require, |