aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
authorNoah Loomans <noahloomans@gmail.com>2017-12-10 00:41:32 +0100
committerNoah Loomans <noahloomans@gmail.com>2017-12-10 00:41:32 +0100
commit0141d1f9f4c7ca1755e0a5da908e9d27cf7aa0e1 (patch)
tree8d632c5c849e71e4905a67d681bea395c23cb0d1 /src
parent503f94199f7fc730da4a1a1165c2863956d10000 (diff)
Add presentation search component
Diffstat (limited to 'src')
-rw-r--r--src/client/react/App.js15
-rw-r--r--src/client/react/components/presentational/Search.js24
-rw-r--r--src/client/react/index.js3
3 files changed, 41 insertions, 1 deletions
diff --git a/src/client/react/App.js b/src/client/react/App.js
new file mode 100644
index 0000000..b8bb301
--- /dev/null
+++ b/src/client/react/App.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import Search from './components/presentational/Search';
+
+const App = () => (
+ <div>
+ <Search
+ onInput={() => {}}
+ results={[
+ { type: 's', name: '18561' },
+ ]}
+ />
+ </div>
+);
+
+export default App;
diff --git a/src/client/react/components/presentational/Search.js b/src/client/react/components/presentational/Search.js
new file mode 100644
index 0000000..0dde8a6
--- /dev/null
+++ b/src/client/react/components/presentational/Search.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Search = ({ onInput, results }) => (
+ <div>
+ <input
+ onInput={onInput}
+ placeholder="Zoeken"
+ />
+ <ul>
+ {results.map(result => <li key={result.name}>{result.name}</li>)}
+ </ul>
+ </div>
+);
+
+Search.propTypes = {
+ onInput: PropTypes.func.isRequired,
+ results: PropTypes.arrayOf(PropTypes.shape({
+ name: PropTypes.string.require,
+ type: PropTypes.string.require,
+ })).isRequired,
+};
+
+export default Search;
diff --git a/src/client/react/index.js b/src/client/react/index.js
index 7e5f559..bb7a21b 100644
--- a/src/client/react/index.js
+++ b/src/client/react/index.js
@@ -3,12 +3,13 @@ import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducers';
+import App from './App';
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
- <div>Hello World!</div>
+ <App />
</Provider>,
document.getElementById('root'),
);