aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-10 01:01:36 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-10 01:01:36 +0100
commit4ce420528dd747021f7fa51483710388f5733724 (patch)
treeed01c295124b07fdbfbce70463af9dd400ab1125 /src
parent0141d1f9f4c7ca1755e0a5da908e9d27cf7aa0e1 (diff)
Add Search container
Diffstat (limited to 'src')
-rw-r--r--src/client/react/App.js9
-rw-r--r--src/client/react/actions.js5
-rw-r--r--src/client/react/components/container/Search.js20
-rw-r--r--src/client/react/components/presentational/Search.js6
-rw-r--r--src/client/react/reducers.js15
5 files changed, 44 insertions, 11 deletions
diff --git a/src/client/react/App.js b/src/client/react/App.js
index b8bb301..d79826e 100644
--- a/src/client/react/App.js
+++ b/src/client/react/App.js
@@ -1,14 +1,9 @@
import React from 'react';
-import Search from './components/presentational/Search';
+import Search from './components/container/Search';
const App = () => (
<div>
- <Search
- onInput={() => {}}
- results={[
- { type: 's', name: '18561' },
- ]}
- />
+ <Search />
</div>
);
diff --git a/src/client/react/actions.js b/src/client/react/actions.js
index e69de29..a754943 100644
--- a/src/client/react/actions.js
+++ b/src/client/react/actions.js
@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export const type = typedValue => ({
+ type: 'TYPE',
+ typedValue,
+});
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,
diff --git a/src/client/react/reducers.js b/src/client/react/reducers.js
index 1afcec5..3fb884b 100644
--- a/src/client/react/reducers.js
+++ b/src/client/react/reducers.js
@@ -1,5 +1,18 @@
-const reducer = (state = [], action) => {
+const DEFAULT_STATE = {
+ searchInput: '',
+ searchResults: [],
+};
+
+const reducer = (state = DEFAULT_STATE, action) => {
switch (action.type) {
+ case 'TYPE':
+ return {
+ ...state,
+ searchInput: action.typedValue,
+ searchResults: [
+ { type: 's', name: '18561' },
+ ],
+ };
default:
return state;
}