plastikaweb
1/10/2017 - 2:42 PM

JS Bin RxJS - linkedin users program // source https://jsbin.com/resibu

JS Bin

RxJS - linkedin users program

// source https://jsbin.com/resibu

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="RxJS - linkedin users program">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.suggestions li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.suggestions img {
  width: 50px;
  heigth: 50px;
  padding: 5px;
  background: #ddd;
}
</style>
</head>
<body>
<div class="container">
  <div class="header">
    <h4>Who to follow</h4>
    <a href="#" class="refresh">Refresh</a>
  </div>
  
  <ul class="suggestions">
    <li class="suggestion1">
      <img>
      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
    
    <li class="suggestion2">
      <img>

      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
    
    <li class="suggestion3">
      <img>
      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
  </ul>
  
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>

</div>
<script id="jsbin-javascript">
'use strict';

console.clear();
// REFRESH
var refreshButton = document.querySelector('.refresh'),
    refresh$ = Rx.Observable.fromEvent(refreshButton, 'click');

// CLOSE BTNS
var closeBtn1 = document.querySelector('.suggestion1 .close'),
    closeBtn2 = document.querySelector('.suggestion2 .close'),
    closeBtn3 = document.querySelector('.suggestion3 .close');
var close1$ = Rx.Observable.fromEvent(closeBtn1, 'click'),
    close2$ = Rx.Observable.fromEvent(closeBtn2, 'click'),
    close3$ = Rx.Observable.fromEvent(closeBtn3, 'click');

// INIT STREAM
var startRequest$ = Rx.Observable.from(['https://api.github.com/users']),
    onRefreshRequest$ = refresh$.map(function (ev) {
    var randomOffset = Math.floor(Math.random() * 500);
    return 'https://api.github.com/users?since=' + randomOffset;
});

var request$ = onRefreshRequest$.merge(startRequest$),
    response$ = request$.flatMap(function (requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
}).shareReplay(1);

// refresh$       ---------f----------->
// request$       r--------r----------->
// response$      ----R--------R------->
// close{x}$      ----------------x---->
// suggestion{x}$ N---u----N---u--u---->

// SUGGESTIONS STREAMS

// -----u-------------u->
// startWith(N) N = null
// N----u--------------->
// -----------N----N---->
//      merge
// N----u-----N----N--u->
function getRandomUser(listUsers) {
    return listUsers[Math.floor(Math.random() * listUsers.length)];
}

function createSuggStream(responseStream, closeClickStream) {

    return responseStream.map(getRandomUser).startWith(null).merge(onRefreshRequest$.map(function (e) {
        return null;
    })).merge(closeClickStream.withLatestFrom(responseStream, function (x, R) {
        return getRandomUser(R);
    }));
}

var suggestion1$ = createSuggStream(response$, close1$),
    suggestion2$ = createSuggStream(response$, close2$),
    suggestion3$ = createSuggStream(response$, close3$);

// RENDER
function renderSuggestion(userData, selector) {
    var userEl = document.querySelector(selector),
        userImg = userEl.querySelector('img'),
        userName = userEl.querySelector('.username');
    userImg.src = userData ? userData.avatar_url : '';
    userName.textContent = userData ? userData.login : '';
    userName.href = userData ? userData.html_url : '';
}

suggestion1$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion1');
});
suggestion2$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion2');
});
suggestion3$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion3');
});
</script>

<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="RxJS - linkedin users program">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
  <div class="header">
    <h4>Who to follow</h4>
    <a href="#" class="refresh">Refresh</a>
  </div>
  
  <ul class="suggestions">
    <li class="suggestion1">
      <img>
      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
    
    <li class="suggestion2">
      <img>

      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
    
    <li class="suggestion3">
      <img>
      <a href="#" target="_blank" class="username">loading...</a>
      <a href="#" class="close">x</a>
    </li>
  </ul>
  
  <script src="https://code.jquery.com/jquery-3.1.0.js"><\/script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"><\/script>

</div>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">.suggestions li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.suggestions img {
  width: 50px;
  heigth: 50px;
  padding: 5px;
  background: #ddd;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">console.clear();
 // REFRESH
var refreshButton = document.querySelector('.refresh'),
    refresh$ = Rx.Observable.fromEvent(refreshButton, 'click');

// CLOSE BTNS
var closeBtn1 = document.querySelector('.suggestion1 .close'),
    closeBtn2 = document.querySelector('.suggestion2 .close'),
    closeBtn3 = document.querySelector('.suggestion3 .close');
var close1$ = Rx.Observable.fromEvent(closeBtn1, 'click'),
    close2$ = Rx.Observable.fromEvent(closeBtn2, 'click'),
    close3$ = Rx.Observable.fromEvent(closeBtn3, 'click');

// INIT STREAM
var startRequest$ = Rx.Observable.from(['https://api.github.com/users']),
    onRefreshRequest$ = refresh$.map(ev => {
          var randomOffset = Math.floor(Math.random()*500);
          return 'https://api.github.com/users?since=' + randomOffset;
        });


var request$ = onRefreshRequest$.merge(startRequest$),
    response$ = request$
      .flatMap( (requestUrl) => 
        Rx.Observable.fromPromise(jQuery.getJSON(requestUrl))
      )
    .shareReplay(1);

// refresh$       ---------f----------->
// request$       r--------r-----------> 
// response$      ----R--------R------->
// close{x}$      ----------------x---->
// suggestion{x}$ N---u----N---u--u---->


// SUGGESTIONS STREAMS

// -----u-------------u->
// startWith(N) N = null
// N----u--------------->
// -----------N----N---->
//      merge
// N----u-----N----N--u->
function getRandomUser(listUsers) {
  return listUsers[Math.floor(Math.random()*listUsers.length)];
}

function createSuggStream(responseStream, closeClickStream) {
    
  
    return responseStream.map(getRandomUser)
      .startWith(null)
      .merge(onRefreshRequest$.map(e => null))
      .merge(closeClickStream.withLatestFrom(responseStream,
                               (x, R) => getRandomUser(R)
                               )
      );
}

var suggestion1$ = createSuggStream(response$, close1$),
    suggestion2$ = createSuggStream(response$, close2$),
    suggestion3$ = createSuggStream(response$, close3$);

// RENDER
function renderSuggestion(userData, selector) {
  var userEl = document.querySelector(selector),
      userImg = userEl.querySelector('img'),
      userName = userEl.querySelector('.username');
  userImg.src = userData ? userData.avatar_url : '';
  userName.textContent = userData ? userData.login : '';
  userName.href = userData ? userData.html_url : '';
}

suggestion1$.subscribe(
      user => renderSuggestion(user, '.suggestion1')
    );
suggestion2$.subscribe(
      user => renderSuggestion(user, '.suggestion2')
    );
suggestion3$.subscribe(
      user => renderSuggestion(user, '.suggestion3')
    );</script></body>
</html>
jsbin.resibu.css
content_copyfile_download
.suggestions li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.suggestions img {
  width: 50px;
  heigth: 50px;
  padding: 5px;
  background: #ddd;
}
jsbin.resibu.js
content_copyfile_download
'use strict';

console.clear();
// REFRESH
var refreshButton = document.querySelector('.refresh'),
    refresh$ = Rx.Observable.fromEvent(refreshButton, 'click');

// CLOSE BTNS
var closeBtn1 = document.querySelector('.suggestion1 .close'),
    closeBtn2 = document.querySelector('.suggestion2 .close'),
    closeBtn3 = document.querySelector('.suggestion3 .close');
var close1$ = Rx.Observable.fromEvent(closeBtn1, 'click'),
    close2$ = Rx.Observable.fromEvent(closeBtn2, 'click'),
    close3$ = Rx.Observable.fromEvent(closeBtn3, 'click');

// INIT STREAM
var startRequest$ = Rx.Observable.from(['https://api.github.com/users']),
    onRefreshRequest$ = refresh$.map(function (ev) {
    var randomOffset = Math.floor(Math.random() * 500);
    return 'https://api.github.com/users?since=' + randomOffset;
});

var request$ = onRefreshRequest$.merge(startRequest$),
    response$ = request$.flatMap(function (requestUrl) {
    return Rx.Observable.fromPromise(jQuery.getJSON(requestUrl));
}).shareReplay(1);

// refresh$       ---------f----------->
// request$       r--------r----------->
// response$      ----R--------R------->
// close{x}$      ----------------x---->
// suggestion{x}$ N---u----N---u--u---->

// SUGGESTIONS STREAMS

// -----u-------------u->
// startWith(N) N = null
// N----u--------------->
// -----------N----N---->
//      merge
// N----u-----N----N--u->
function getRandomUser(listUsers) {
    return listUsers[Math.floor(Math.random() * listUsers.length)];
}

function createSuggStream(responseStream, closeClickStream) {

    return responseStream.map(getRandomUser).startWith(null).merge(onRefreshRequest$.map(function (e) {
        return null;
    })).merge(closeClickStream.withLatestFrom(responseStream, function (x, R) {
        return getRandomUser(R);
    }));
}

var suggestion1$ = createSuggStream(response$, close1$),
    suggestion2$ = createSuggStream(response$, close2$),
    suggestion3$ = createSuggStream(response$, close3$);

// RENDER
function renderSuggestion(userData, selector) {
    var userEl = document.querySelector(selector),
        userImg = userEl.querySelector('img'),
        userName = userEl.querySelector('.username');
    userImg.src = userData ? userData.avatar_url : '';
    userName.textContent = userData ? userData.login : '';
    userName.href = userData ? userData.html_url : '';
}

suggestion1$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion1');
});
suggestion2$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion2');
});
suggestion3$.subscribe(function (user) {
    return renderSuggestion(user, '.suggestion3');
});