feat: subscribe to new observables

test/observables/src/App.js

@@ -48,7 +48,7 @@ class App extends React.Component {
     return (
       <div>
         <button onClick={this.createTrx}>Create Trx</button>
-        {escrowObservable && <EscrowObservator escrow={escrowObservable} myCustomProperty="Test" />}
+        <EscrowObservator escrow={escrowObservable} myCustomProperty="Test" />
       </div>
     );
   }

test/observables/src/EscrowObservator.js

@@ -3,6 +3,7 @@ import observe from "./observe";
 
 const Escrow = props => {
   const { escrow, myCustomProperty } = props;
+  if(!escrow) return <p>Loading...</p>;
   return (
     <ul>
       <li>

test/observables/src/observe.js

@@ -7,40 +7,52 @@ function observe(WrappedComponent) {
         observedValues: {},
         subscriptions: {}
       }
-  
+
-      componentDidMount() {
+      subscribeToProp = prop => {
-        Object.keys(this.props).forEach(prop => {
+        if(!isObservable(this.props[prop])) return;
-          if(isObservable(this.props[prop])){
+
-            const subscription = this.props[prop].subscribe(
+        const subscription = this.props[prop].subscribe(
-              value => {
+          value => {
-                this.setState({
-                  observedValues: {
-                    ...this.state.observedValues,
-                    [prop]: value
-                  }
-                });
-              },
-              err => {
-                // TODO: pass the error to the wrapped component
-                console.err(err);
-              }
-            );
-    
             this.setState({
-              subscriptions: {
+              observedValues: {
-                ...this.state.subscriptions,
+                ...this.state.observedValues,
-                [prop]: subscription
+                [prop]: value
               }
             });
+          },
+          err => {
+            // TODO: pass the error to the wrapped component
+            console.err(err);
+          }
+        );
+
+        this.setState({
+          subscriptions: {
+            ...this.state.subscriptions,
+            [prop]: subscription
           }
         });
       }
   
+      componentDidMount() {
+        Object.keys(this.props).forEach(this.subscribeToProp);
+      }
+  
       componentWillUnmount() {
         this.state.subscriptions.forEach(subscription => {
           subscription.unsubscribe();
         });
       }
+
+      componentDidUpdate(prevProps) {
+        Object.keys(prevProps).forEach(prop => {
+          if(!prevProps[prop] && this.props[prop]){
+            this.subscribeToProp(prop);
+          }
+        });
+
+        // TODO: check if prevProps and currProps are different, and unsubscribe from prevProp
+      }
   
       render() {
         return <WrappedComponent {...this.props} {...this.state.observedValues} />;