feat(hn): adds mapper to map Drupal content types to components

package.json

@@ -12,7 +12,9 @@
   "author": "Bart Langelaan",
   "license": "MIT",
   "dependencies": {
-    "babel-runtime": "^6.25.0"
+    "babel-runtime": "^6.25.0",
+    "get-nested": "^4.0.0",
+    "prop-types": "^15.5.10"
   },
   "nyc": {
     "extension": [
@@ -36,13 +38,14 @@
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
     "babel-register": "^6.24.1",
-    "hn": "^0.1.1",
-    "next": "beta",
+    "hn": "^0.2.0",
+    "next": "^2.4.9",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
     "semantic-release": "^6.3.6"
   },
   "scripts": {
+    "start": "npm run build -- -w",
     "build": "babel src -d lib",
     "test:next": "cd tests/functional/next && npm run build && npm start",
     "semantic-release": "semantic-release pre && npm publish && semantic-release post"

src/DrupalPage.js

@@ -1,9 +1,11 @@
-import { Component } from 'react';
+import React, { Component } from 'react';
 import { parse } from 'url';
+import PropTypes from 'prop-types';
+import getNested from 'get-nested';
 import site from './site';
 
 export default class extends Component {
-  static async getInitialProps ({ asPath }) {
+  static async getInitialProps({ asPath }) {
     const location = parse(asPath, true);
     const page = await site.getPage(asPath, true);
 
@@ -12,4 +14,49 @@ export default class extends Component {
       page
     };
   }
+
+  static propTypes = {
+    layout: PropTypes.oneOfType([
+      PropTypes.func,
+      PropTypes.string,
+    ]),
+    mapper: PropTypes.oneOfType([
+      PropTypes.shape(),
+      PropTypes.func,
+    ]).isRequired,
+  };
+
+  static defaultProps = {
+    layout: 'div',
+  };
+
+  render() {
+    const mapper = this.props.mapper;
+
+    const Layout = this.props.layout;
+
+    const page = site.getData(this.props.page);
+
+    if(typeof getNested(() => page.type.target_id) !== 'string') {
+      return null;
+    }
+
+    const ContentType = (typeof mapper === 'object') ? mapper[page.type.target_id] : mapper(page.type.target_id);
+
+    if(!ContentType) {
+      console.error('Component for content type', page.type.target_id, 'not found.');
+      return null;
+    }
+
+
+    return (
+      <Layout
+        page={page}
+        location={this.props.location}
+        history={this.props.history}
+      >
+        <ContentType page={page} />
+      </Layout>
+    );
+  }
 }