diff --git a/test/observables/src/App.js b/test/observables/src/App.js
index 4f01c1e..bfac40b 100644
--- a/test/observables/src/App.js
+++ b/test/observables/src/App.js
@@ -48,7 +48,7 @@ class App extends React.Component {
return (
- {escrowObservable && }
+
);
}
diff --git a/test/observables/src/EscrowObservator.js b/test/observables/src/EscrowObservator.js
index b3428cb..74bb683 100644
--- a/test/observables/src/EscrowObservator.js
+++ b/test/observables/src/EscrowObservator.js
@@ -3,6 +3,7 @@ import observe from "./observe";
const Escrow = props => {
const { escrow, myCustomProperty } = props;
+ if(!escrow) return Loading...
;
return (
-
diff --git a/test/observables/src/observe.js b/test/observables/src/observe.js
index 9869866..2f44dd9 100644
--- a/test/observables/src/observe.js
+++ b/test/observables/src/observe.js
@@ -7,40 +7,52 @@ function observe(WrappedComponent) {
observedValues: {},
subscriptions: {}
}
-
- componentDidMount() {
- Object.keys(this.props).forEach(prop => {
- if(isObservable(this.props[prop])){
- const subscription = this.props[prop].subscribe(
- value => {
- this.setState({
- observedValues: {
- ...this.state.observedValues,
- [prop]: value
- }
- });
- },
- err => {
- // TODO: pass the error to the wrapped component
- console.err(err);
- }
- );
-
+
+ subscribeToProp = prop => {
+ if(!isObservable(this.props[prop])) return;
+
+ const subscription = this.props[prop].subscribe(
+ value => {
this.setState({
- subscriptions: {
- ...this.state.subscriptions,
- [prop]: subscription
+ observedValues: {
+ ...this.state.observedValues,
+ [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 ;