Rewrite @client to wait for promises to resolve

ericclemmons · Jun 29, 2016 · 4168db5 · 4168db5
1 parent 6f28ea6
commit 4168db5
Showing 1 changed file with 45 additions and 5 deletions.
diff --git a/src/client.js b/src/client.js
@@ -1,26 +1,66 @@
 import React from "react";
 
+import Resolver from "./Resolver";
+
 export default function client(Loader) {
   return function clientDecorator(Component) {
     return class ClientResolver extends React.Component {
       static displayName = `ClientResolver`
 
+      static childContextTypes = {
+        resolver: React.PropTypes.instanceOf(Resolver),
+      }
+
+      static contextTypes = {
+        resolver: React.PropTypes.instanceOf(Resolver),
+      }
+
       constructor(props, context) {
         super(props, context);
 
-        this.state = { visible: process.env.NODE_ENV === "test" };
+        this.enqueue = this.enqueue.bind(this);
+        this.queue = [];
+        this.state = {
+          bypass: process.env.NODE_ENV === "test",
+          loaded: false,
+          server: true,
+        };
       }
 
       componentDidMount() {
-        this.setState({ visible: true });
+        this.setState({ server: false }, function() {
+          Promise.all(this.queue).then(() => this.setState({ loaded: true }));
+        });
+      }
+
+      enqueue(promise) {
+        this.queue.push(promise);
       }
 
       render() {
-        if (!this.state.visible) {
-          return Loader ? <Loader /> : null;
+        const { bypass, loaded, server } = this.state;
+
+        const loader =  Loader ? <Loader /> : null;
+
+        if (server) {
+          return loader;
         }
 
-        return <Component {...this.props} />;
+        if (bypass || loaded) {
+          return <Component {...this.props} />;
+        }
+
+        return (
+          <div>
+            {loader}
+
+            <div style={{ display: "none" }}>
+              <Resolver onResolve={this.enqueue}>
+                {(resolved) => <Component {...this.props} {...resolved} />}
+              </Resolver>
+            </div>
+          </div>
+        );
       }
     };
   };