RxJs async requests pick random user

by vintharas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>
<h1>
 Players Ready for a session of iDart!!
</h1>
<section class="players">
</section>
<button class="load-more">
load more
</button>

CSS

.players div{
  margin: 10px;
  padding: 10px;
  width: 200px;
  background-color: #ccc; 
}
.players a {
  display: inline-block;
  padding: 12px 5px;
}
.players img {
  width: 50px;
  display: inline-block;
  vertical-align: middle;
}

Babel + JSX

let btnLoadMore = document.querySelector('.load-more');

let requests$ = Rx.Observable
  .fromEvent(btnLoadMore, 'click')
  .map( _ => 'https://api.github.com/users')
  .startWith('https://api.github.com/users')

let responses$ = requests$
  .flatMap(url => Rx.Observable.fromPromise(fetch(url)))
  .flatMap(r => Rx.Observable.fromPromise(r.json()))

let randomUser$ = responses$
  .map(pickRandomItem)

randomUser$.subscribe(appendPlayerToDOM)

function pickRandomItem(arr){
  var randomIndex = Math.floor(Math.random() * arr.length)
	return arr[randomIndex]
}

function toTemplate(user){
	var a = document.createElement("a")
  a.textContent = user.login
  a.href = user.html_url
  var img = document.createElement("img")
  img.src = user.avatar_url
  var div = document.createElement("div")
  div.appendChild(img)
  div.appendChild(a)
  return div;
}

function appendPlayerToDOM(u){
  var t = toTemplate(u)
  var users = document.querySelector('.players')
  users.appendChild(t)
}