RX Github Repos

by Cristian Trifan

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div class="container">
    <div class="row">
        <div class="col-md-9">
            <input id="username" type="text" class="form-control" style="margin-bottom:10px" value="crissdev">
        </div>
        <div class="col-md-3">
            <button class="btn btn-default" id="fetch-repos">Fetch</button>
        </div>
    </div>
    <div class="row">
        <pre id="output"></pre>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/3.1.2/rx.all.min.js"></script>

CSS

body {
    padding-top: 40px;
}
#output {
    margin-top: 15px;
}

Babel + JSX

var $button = document.querySelector('#fetch-repos');
var $output = document.querySelector('#output');
var $username = document.querySelector('#username');

try {
    console.clear();
    Rx.Observable.fromEvent($button, 'click')
    	.debounce(300)
    	.flatMapLatest(() => getRepositories($username.value || 'crissdev'))
    	.subscribe(
        	function(repos) {
                $output.innerHTML = '';
        		writeOutput(repos.map((item) => item.name).sort().join('\n'));
    		},
    		function(error) {
                writeOutput(error);
            },
    function() { console.log('done')});
 	
} catch (e) {
    writeOutput(e);
}

function writeOutput(text) {
    $output.insertAdjacentHTML('beforeend', (text || '').toString());
    $output.insertAdjacentHTML('beforeend', '\n');
}

function getRepositories(username) {
	return new Promise(function(resolve, reject) {
		var data = localStorage.getItem(`${username}-github-repos`);

		if (typeof data === 'string') {
			data = JSON.parse(data);
			resolve(data);
			return;
		}

		window.fetch(`https://api.github.com/users/${username}/repos`)
        	.then((response) => response.json())
			.then(function(repos) {
				localStorage.setItem(`${username}-github-repos`, JSON.stringify(repos));
				resolve(repos);
			})
            .catch(reject);
	});
}