diff --git a/src/operadores-combinacion/01-startWith-endWith.ts b/src/operadores-combinacion/01-startWith-endWith.ts new file mode 100644 index 0000000..e72442a --- /dev/null +++ b/src/operadores-combinacion/01-startWith-endWith.ts @@ -0,0 +1,9 @@ +import { of } from 'rxjs'; +import { startWith, endWith} from 'rxjs/operators'; + +const numeros$ = of(1,2,3).pipe( + startWith('a','b','c'), + endWith('x','y','z') +); + +numeros$.subscribe(console.log); \ No newline at end of file diff --git a/src/operadores-combinacion/02-lab-startWith-loadingBackground.ts b/src/operadores-combinacion/02-lab-startWith-loadingBackground.ts new file mode 100644 index 0000000..1e23075 --- /dev/null +++ b/src/operadores-combinacion/02-lab-startWith-loadingBackground.ts @@ -0,0 +1,22 @@ +import { ajax } from 'rxjs/ajax'; +import { startWith } from 'rxjs/operators'; +// Referencias +const loadingDiv = document.createElement('div'); +loadingDiv.classList.add('loading'); +loadingDiv.innerHTML = 'Cargando'; + +const body = document.body; + +// Stream +ajax.getJSON('https://reqres.in/api/users/2?delay=3').pipe( + startWith(true) +).subscribe( resp => { + + if(resp === true){ + body.append(loadingDiv); + } else { + document.querySelector('.loading').remove(); + } + + console.log(resp) +}) diff --git a/src/operadores-combinacion/03-metodo-concat.ts b/src/operadores-combinacion/03-metodo-concat.ts new file mode 100644 index 0000000..0677954 --- /dev/null +++ b/src/operadores-combinacion/03-metodo-concat.ts @@ -0,0 +1,10 @@ +import { concat, interval } from 'rxjs'; +import { take } from 'rxjs/operators'; + +const interval$ = interval(1000); + +concat( + interval$.pipe(take(3)), + interval$.pipe(take(2)), + [1,2,3,4] +).subscribe(console.log) \ No newline at end of file diff --git a/src/operadores-combinacion/04-metodo-merge.ts b/src/operadores-combinacion/04-metodo-merge.ts new file mode 100644 index 0000000..c008b0e --- /dev/null +++ b/src/operadores-combinacion/04-metodo-merge.ts @@ -0,0 +1,10 @@ +import { fromEvent, merge } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const keyup$ = fromEvent(document,'keyup'); +const click$ = fromEvent(document,'click'); + +merge( + keyup$.pipe(map(e => e.type)), + click$.pipe(map(e => e.type)) +).subscribe(console.log) \ No newline at end of file diff --git a/src/operadores-combinacion/05-metodo-combineLatest.ts b/src/operadores-combinacion/05-metodo-combineLatest.ts new file mode 100644 index 0000000..b745c48 --- /dev/null +++ b/src/operadores-combinacion/05-metodo-combineLatest.ts @@ -0,0 +1,25 @@ +import { combineLatest, fromEvent, merge } from 'rxjs'; +import { map } from 'rxjs/operators'; + +const input1 = document.createElement('input'); +const input2 = document.createElement('input'); + +input1.placeholder = 'email@gmail.com'; + +input2.placeholder = '*******'; +input2.type = 'password'; + +document.body.append(input1, input2); + +// Helper +const getInputStream = (elem: HTMLElement) => { + return fromEvent(elem, 'keyup').pipe( + map(e => e.target['value']) + ); +} + + +combineLatest([ + getInputStream(input1), + getInputStream(input2) +]).subscribe(console.log) \ No newline at end of file diff --git a/src/operadores-combinacion/06-metodo-forkJoin.ts b/src/operadores-combinacion/06-metodo-forkJoin.ts new file mode 100644 index 0000000..f9c6266 --- /dev/null +++ b/src/operadores-combinacion/06-metodo-forkJoin.ts @@ -0,0 +1,41 @@ +import { of, interval, forkJoin } from 'rxjs'; +import { delay, take } from 'rxjs/operators'; + +const numeros$ = of(1,2,3,4); +const intervalo$ = interval(1000).pipe(take(3)); +const letras$ = of('a','b','c').pipe(delay(3500)); + +// forkJoin([ +// numeros$, +// intervalo$, +// letras$ +// ]).subscribe(console.log); + + +// Dificil de leer +// +// forkJoin([ +// numeros$, +// intervalo$, +// letras$ +// ]).subscribe( resp => { +// console.log('numeros:', resp[0]) +// console.log('intervalo:', resp[1]) +// console.log('letras:', resp[2]) +// }); + +// forkJoin({ +// numeros$, +// intervalo$, +// letras$ +// }).subscribe( resp => { +// console.log(resp) +// }); + +forkJoin({ + num: numeros$, + int: intervalo$, + let: letras$ +}).subscribe( resp => { + console.log(resp) +}); diff --git a/src/operadores-combinacion/07-lab-forkJoin-peticiones.ts b/src/operadores-combinacion/07-lab-forkJoin-peticiones.ts new file mode 100644 index 0000000..9343683 --- /dev/null +++ b/src/operadores-combinacion/07-lab-forkJoin-peticiones.ts @@ -0,0 +1,14 @@ +import { forkJoin, of } from 'rxjs'; +import { ajax } from 'rxjs/ajax'; +import { catchError } from 'rxjs/operators'; + +const GITHUB_API_URL = 'https://api.github.com/users'; +const GITHUB_USER = 'alesyt0h'; + +forkJoin({ + usuario: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}`), + repos: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/repo123123s`).pipe(catchError(err => of([]))), + gists: ajax.getJSON(`${GITHUB_API_URL}/${GITHUB_USER}/gists`), +}).pipe( + catchError( err => of(err.message)) +).subscribe(console.log); \ No newline at end of file