jorum/subscribe.js

Model layer with rx.js for React applications.

"use strict";
var __extends = (this && this.__extends) || (function () {
    var extendStatics = function (d, b) {
        extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return extendStatics(d, b);
    }
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = require("react");
var shared_data_1 = require("./shared-data");
var State = /** @class */ (function () {
    function State() {
        this.data = [];
    }
    return State;
}());
//TODO rewrite Subscribe into FC
var Subscribe = /** @class */ (function (_super) {
    __extends(Subscribe, _super);
    function Subscribe(props) {
        var _this = _super.call(this, props) || this;
        _this.state = new State();
        _this.subscriptions = [];
        return _this;
    }
    Subscribe.prototype.componentDidMount = function () {
        this.subscribeTo(this.props.to);
    };
    Subscribe.prototype.componentWillReceiveProps = function (nextProps) {
        this.unsubscribe();
        this.setState({
            data: []
        });
        this.subscribeTo(nextProps.to);
    };
    Subscribe.prototype.componentWillUnmount = function () {
        this.unsubscribe();
    };
    Subscribe.prototype.handleObservable = function (observable, index) {
        var _this = this;
        var subscription = observable.subscribe({
            next: function (v) {
                _this.setState(function (prevState) {
                    var data = prevState.data.slice();
                    data[index] = v;
                    return {
                        data: data
                    };
                });
            }
        });
        this.subscriptions.push(subscription);
    };
    Subscribe.prototype.subscribeTo = function (to) {
        if (!to)
            return;
        if (Array.isArray(to)) {
            //TODO: remove feature of subscribing to multiple observables at one time
            console.warn('Subscribing to multiple observables at one time is deprecated. Please avoid using this feature.');
            to.forEach(this.handleObservable.bind(this));
        }
        else {
            this.handleObservable(to, 0);
        }
    };
    Subscribe.prototype.unsubscribe = function () {
        for (var _i = 0, _a = this.subscriptions; _i < _a.length; _i++) {
            var subscription = _a[_i];
            subscription.unsubscribe();
        }
        this.subscriptions = [];
    };
    Subscribe.prototype.render = function () {
        var _a;
        if (!this.state.data.length) {
            return null;
        }
        else {
            return (_a = this.props).children.apply(_a, this.state.data);
        }
    };
    return Subscribe;
}(react_1.Component));
exports.Subscribe = Subscribe;
function useStream(stream, initialValue) {
    var streamStatus = shared_data_1.sharedData.streamStatus;
    var initializedRef = react_1.useRef(false);
    var _a = react_1.useState(initialValue), state = _a[0], setState = _a[1];
    if (streamStatus === null || streamStatus.isFirstRun) {
        if (initialValue !== undefined) { // with initialValue
            initializedRef.current = true;
        }
        else { // without initialValue
            if (streamStatus)
                streamStatus.waitingCount++;
        }
    }
    react_1.useEffect(function () {
        if (stream) {
            var subscription_1 = stream.subscribe(function (v) {
                if (initializedRef.current === false) {
                    initializedRef.current = true;
                    if (streamStatus)
                        streamStatus.waitingCount--;
                }
                setState(v);
            });
            return function () {
                subscription_1.unsubscribe();
            };
        }
    }, [stream]);
    return state;
}
exports.useStream = useStream;
function useSubscription(stream, next) {
    var callbackRef = react_1.useRef(next);
    callbackRef.current = next;
    react_1.useEffect(function () {
        if (stream) {
            var subscription = stream.subscribe(function (value) {
                callbackRef.current(value);
            });
            return subscription.unsubscribe.bind(subscription);
        }
    }, [stream]);
}
exports.useSubscription = useSubscription;