RxJS High Order Observable

1-observable.js

const dom = $('#operator');
const observable = Rx.Observable.interval(1000).take(5);

// const transform = observable.map((x) => 'hello-' + 10);
// transform.subscribe((x) => dom.append('<li>' + x + '</li>'));

// const highOrderObservable = observable.map(x => Rx.Observable.of(1,2));
// highOrderObservable.subscribe((x) => {
//   x.subscribe((y) => {
//     dom.append('<li>' + y + '</li>');
//   });
// });

const click$ = Rx.Observable.fromEvent(document, 'click');

clock$ = click$.map((c) => Rx.Observable.interval(1000));

clock$.subscribe(c => c.subscribe(x => dom.append(x)));

10-groupby.js

const dom = $('#operator');

const number$ = Rx.Observable.interval(1000).take(5);

const result$ = number$.groupBy(x => x % 2).map(innerObs => innerObs.count()).mergeAll();

/*
draw your marble diagram

0--1--2--3--4|

groupBy

+--+---------|
\  \
\   1----3---|
 0----2-----4|
 
 map
+--+---------|
\  \
\   --------2|
 -----------3|

  mergeAll

-----------(3,2)|

*/

result$.subscribe(x => dom.append('<li>' + x + '</li>'));

11-groupby.js

const dom = $('#operator');

const bus$ = Rx.Observable.of(
  {code: 'en-us', value: '-TEST-'},
  {code: 'en-us', value: 'hello'},
  {code: 'es', value: '-TEST-'},
  {code: 'en-us', value: 'amazing'},
  {code: 'pt-br', value: '-TEST-'},
  {code: 'pt-br', value: 'olá'},
  {code: 'es', value: 'hola'},
  {code: 'es', value: 'mundo'},
  {code: 'en-us', value: 'world'},
  {code: 'pt-br', value: 'mundo'},
  {code: 'es', value: 'asombroso'},
  {code: 'pt-br', value: 'maravilhoso'}
).concatMap(x => Rx.Observable.of(x).delay(500));

const result$ = bus$.groupBy(obj => obj.code)
  .map(innerObs => innerObs.skip(1).map(obj => obj.value))
  .mergeAll();

result$.subscribe(x => dom.append('<li>' + x + '</li>'));

2-switch.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');

const clock$ = click$.map((c) => Rx.Observable.interval(1000)).switch();

//flattening
// Observable<Observable<number>> => Observable<number>

clock$.subscribe(x => dom.append('<li>' + x + '</li>'));

3-mergeall.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');

const clock$ = click$.map((c) => Rx.Observable.interval(1000)).mergeAll(1);

//flattening
// Observable<Observable<number>> => Observable<number>

clock$.subscribe(x => dom.append('<li>' + x + '</li>'));

4-concatall.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');

const clock$ = click$.map((c) => Rx.Observable.interval(1000).take(3)).concatAll();

//flattening
// Observable<Observable<number>> => Observable<number>

/*
--------+---------------+---+----
        \               \
         -0-1-2|         -0-1-2|
         mergeAll(1)
----------0-1-2-----------0-1-2--0-1-2--         
*/

clock$.subscribe(x => dom.append('<li>' + x + '</li>'));

5-switchmap.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');
// const clock$ = click$.switchMap((event) => Rx.Observable.interval(1000));

function request() {
  return fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json());
}
// const clock$ = click$.switchMap((event) => Rx.Observable.fromPromise(request()));

//     Observable<event> => Observable<Promise<response>>
// or  Observable<event> => Promise<response>
const clock$ = click$.switchMap((event) => request());

// switchMap = map  + swtich

//flattening
// Observable<Event> => Observable<number>

clock$.subscribe(x => dom.append('<li>' + x.email + '</li>'));

6-mergemap.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');
// const clock$ = click$.switchMap((event) => Rx.Observable.interval(1000));

function request() {
  return fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json());
}
// const clock$ = click$.switchMap((event) => Rx.Observable.fromPromise(request()));

//     Observable<event> => Observable<Promise<response>>
// or  Observable<event> => Promise<response>
// const clock$ = click$.mergeMap((event) => request());

// If you click fast, check network of DevTool
// const clock$ = click$.mergeMap((event) => request(), (event, res) => res.email, 3);
const clock$ = click$.flatMap((event) => request(), (event, res) => res.email, 3);

// mergeMap = map  + mergeAll

//flattening
// Observable<Event> => Observable<number>

clock$.subscribe(x => dom.append('<li>' + x + '</li>'));

7-concatmap.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');
// const clock$ = click$.switchMap((event) => Rx.Observable.interval(1000));

function request() {
  return fetch('https://jsonplaceholder.typicode.com/users/1').then(res => res.json());
}

const clock$ = click$.concatMap((event) => request(), (event, res) => res.email, 3);

// concatMap = map  + concatAll  (or mergeAll(1))

//flattening
// Observable<Event> => Observable<number>

clock$.subscribe(x => dom.append('<li>' + x + '</li>'));

8-window.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');
const clock$ = Rx.Observable.interval(1000).take(20);

const result$ = clock$.window(click$).switch();

/*
--0--1--2--3--4--5--6--7--8
---c-------c-----------c----

 window
 
+--+-------+-----------+----
\  \       \           \
 -0\-1--2--3|--4--5--6--7\-8
 
 switch
 
--0--1--2--3--4--5--6--7--8 

*/

result$.subscribe(x => dom.append('<li>' + x + '</li>'));

9-windowtoggle.js

const dom = $('#operator');

const click$ = Rx.Observable.fromEvent(document, 'click');
const clock$ = Rx.Observable.interval(1000);
const down$ = Rx.Observable.fromEvent(document, 'mousedown');
const up$ = Rx.Observable.fromEvent(document, 'mouseup');

const result$ = clock$.windowToggle(down$, () => up$).switch();

/**
--0--1--2--3--4--5--6--7--8
---d-----------------d----- down$
---------------u----------- up$

 windowToggle
 
+--+-----------+-----+----
    \                \  
     -1--2--3--4|     -6--7
 
 switch
 
-----1--2--3--4-------6--7

**/

result$.subscribe(x => dom.append('<li>' + x + '</li>'));

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>GistRun</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>High Order Observable</h1>
  <div id="operator"></div>
  
  <script src="10-groupby.js"></script>
</body>
</html>

styles.css

/* todo: add styles */