Add presentation search component

4 files changed, 42 insertions, 1 deletions

diff --git a/package.json b/package.json
index 95337bb..5b09abd 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "left-pad": "^1.1.1",
     "lodash": "^4.15.0",
     "morgan": "~1.7.0",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-redux": "^5.0.6",
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'),
 );