fix(entity-mapper): fix ssr

Author: Ian Wensink

src/DrupalPage/index.js

@@ -11,7 +11,6 @@ class DrupalPage extends Component {
   };
 
   state = {
-    ready: false,
     loadingData: true,
     dataUrl: null,
     pageUuid: null,
@@ -24,15 +23,18 @@ class DrupalPage extends Component {
    * multiple renders.
    */
   async asyncBootstrap() {
-    await this.loadData(this.props);
-    this.context.hnContext.state = this.state;
+    this.context.hnContext.state = {
+      drupalPage: await this.loadData(this.props),
+      entities: {},
+    };
+    return true;
   }
 
   /**
    * The first time this element is rendered, we always make sure the component and the Drupal page is loaded.
    */
   componentWillMount() {
-    const state = getNested(() => this.context.hnContext.state);
+    const state = getNested(() => this.context.hnContext.state.drupalPage);
     if (state) {
       this.setState(state);
     } else {
@@ -87,8 +89,12 @@ class DrupalPage extends Component {
     // Check if this is still the last request.
     if(this.lastRequest !== lastRequest) return;
 
+    const newState = { ...this.state, ...{ pageUuid, loadingData: false, dataUrl: url }};
+
     // Mark this component as ready. This mounts the Layout and new ContentType.
-    this.setState({ pageUuid, loadingData: false, dataUrl: url });
+    this.setState(newState);
+
+    return newState;
   }
 
   render() {

src/EntityMapper.js

@@ -7,6 +7,10 @@ import site from './site';
 class EntityMapper extends Component {
   static entityComponents = new Map();
 
+  static contextTypes = {
+    hnContext: PropTypes.object,
+  };
+
   /**
    * This makes sure the data for this url is ready to be rendered.
    * @param uuid
@@ -62,8 +66,30 @@ class EntityMapper extends Component {
     };
   }
 
-  componentDidMount() {
-    this.loadComponent(this.props);
+  /**
+   * If this component exists in a tree that is invoked with the waitForHnData function, this function is invoked.
+   * Only after the promise is resolved, the component will be mounted. To keep the data fetched here, we assign the
+   * state to the hnContext provided by the DrupalPageContextProvider. This way, the state will be preserved trough
+   * multiple renders.
+   */
+  async asyncBootstrap() {
+    const { mapper, asyncMapper } = this.props;
+    const { uuid, entityProps } = this.state;
+    this.context.hnContext.state.entities[uuid] = await this.loadComponent({ uuid, mapper, asyncMapper, entityProps });
+    return true;
+  }
+
+  /**
+   * The first time this element is rendered, we always make sure the component and the Drupal page is loaded.
+   */
+  componentWillMount() {
+    const { uuid } = this.props;
+    const state = getNested(() => this.context.hnContext.state.entities[uuid]);
+    if (state) {
+      this.setState(state);
+    } else {
+      this.loadComponent(this.props);
+    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -75,7 +101,11 @@ class EntityMapper extends Component {
   async loadComponent({ uuid, mapper, asyncMapper, entityProps }) {
     this.setState({ ready: false });
     const entityComponentSymbol = await EntityMapper.assureComponent({ uuid, mapper, asyncMapper });
-    this.setState({ uuid, entityComponentSymbol, ready: true, entityProps });
+
+    const newState = { ...this.state, ...{ uuid, entityComponentSymbol, ready: true, entityProps } };
+    this.setState(newState);
+
+    return newState;
   }
 
   isReady() {