Rx Test

Just trying out Rx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/2.5.3/rx.lite.min.js"></script>
reddit username: <input id="url" type="text" />
<div id="status"></div>
<hr/>
<div id="result"></div>
<hr/>
<div id="errors"></div>

JavaScript

var nameIn = document.querySelector('#url');
var resultOut = document.querySelector('#result');
var errorOut = document.querySelector('#errors');
var statusOut = document.querySelector('#status');

var nameSource = Rx.Observable.fromEvent(nameIn, 'keyup', function(args) {
    return args[0].currentTarget.value
});

var reddit = nameSource
    .filter(function(x) { return x.length > 0; })
    .debounce(400)
    .flatMap(function(url) {
        console.log("filter"); 
        return Rx.Observable.fromPromise(
            fetch('https://www.reddit.com/user/' + url + '/about.json')
        );
    })
    .flatMap(function(res) {
        return Rx.Observable.fromPromise(res.json());
    })
    .map(function(res) {
        return res.data.name + ' joined reddit on ' + (new Date(1000*res.data.created));
    });

var subscription = reddit
    .retry()
    .subscribe(
        function(x) { resultOut.textContent = x },
        function(e) { errorOut.textContent = e },
        function() { statusOut.textContent = 'Completed ' + Date.now().toString(16) }
    );