Fin de sección 5- Uso de Operadores

assets/css/style.css

@@ -1,11 +1,12 @@
 @import url('https://fonts.googleapis.com/css?family=Roboto:100,400&display=swap');
-
-*, html, body {
+*,
+html,
+body {
     font-family: 'Roboto', sans-serif;
     color: white;
 }
 
-body{
+body {
     text-align: center !important;
     background-color: #18202F;
 }
@@ -14,7 +15,8 @@ h1 {
     font-weight: lighter;
 }
 
-input, button {
+input,
+button {
     width: 35%;
     padding: 10px;
     color: black;
@@ -23,7 +25,8 @@ input, button {
     border-radius: 10px;
 }
 
-button, video{
+button,
+video {
     margin-right: 10px;
 }
 
@@ -46,7 +49,6 @@ ol {
     background-color: #9034AA;
 }
 
-
 .loading {
     position: fixed;
     top: 0px;
@@ -57,37 +59,33 @@ ol {
     background-color: rgba(0, 0, 0, 0.3);
     color: white;
     font-size: 2rem;
-
     display: flex;
     justify-content: center;
     align-content: center;
     flex-direction: column;
-
     animation-duration: 1s;
     animation-name: fadeIn;
 }
 
 @-webkit-keyframes fadeIn {
     from {
-      opacity: 0;
+        opacity: 0;
     }
-
     to {
-      opacity: 1;
+        opacity: 1;
     }
 }
-  
+
 @keyframes fadeIn {
     from {
-      opacity: 0;
+        opacity: 0;
     }
-
     to {
-      opacity: 1;
+        opacity: 1;
     }
 }
-  
-  .fadeIn {
+
+.fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn;
-}
+}

src/index.ts

@@ -1,10 +0,0 @@
-import { } from "rxjs";
-
-
-/**
- * 
- =====================================================================================================================
-   Notas 
-    -  
-==============================================================================================================================
-**/

src/operadores/01-map-pluck-mapTo.ts

@@ -0,0 +1,40 @@
+import { range, fromEvent } from 'rxjs';
+import { map, pluck, mapTo } from "rxjs/operators";
+
+range(1,5).pipe(
+    // map<number,number>( val => val * 10 )
+     map<number,string>( val => (val * 10).toString() )
+  )
+  .subscribe( console.log);
+
+
+
+  const keyup$ = fromEvent<KeyboardEvent>( document, 'keyup'); // va estar pendiente del html
+
+
+  const keyupCode$ = keyup$.pipe(
+    map(event  => event.code)
+  )
+
+  const keyupPluck$ = keyup$.pipe(
+    pluck('target','baseURI')
+  )
+
+  const keyupMapTo$ = keyup$.pipe(
+    mapTo('Tecla Presionada')
+  )
+
+  // Salidas
+  keyup$.subscribe(console.log);
+  keyupCode$.subscribe( code => console.log('map:', code));
+  keyupPluck$.subscribe( code => console.log('pluck:', code));
+  keyupMapTo$.subscribe( code => console.log('mapTo:', code));
+
+/**
+ * 
+ =====================================================================================================================
+   Notas 
+    -  Espesificamos el tipo de dato
+    -  Debemos espesificar el fromEvent
+==============================================================================================================================
+**/

src/operadores/02-filter.ts

@@ -0,0 +1,68 @@
+import { range, from, fromEvent } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
+
+// range(1,10).pipe(
+//   // Solo muestra impares
+//   filter( value => value % 2 === 1)
+
+// ).subscribe( console.log );
+
+/**===================================================================================================================== **/
+range(20, 30).pipe(
+  // Solo muestra impares
+  filter<number>((val, i) => {
+    console.log("index:", i);
+    return val % 2 === 1;
+  })
+); //.subscribe( console.log );
+
+/**===================================================================================================================== **/
+// Definir una interfaz
+interface Personaje {
+  tipo: string;
+  nombre: string;
+}
+
+const personajes: Personaje[] = [
+  {
+    tipo: "heroe",
+    nombre: "Batman"
+  },
+  {
+    tipo: "heroe",
+    nombre: "Robin"
+  },
+  {
+    tipo: "Villano",
+    nombre: "Joker"
+  }
+];
+
+const personajes$ = from(personajes)
+  .pipe(filter(p => p.tipo === "heroe"))
+  .subscribe(console.log);
+/**===================================================================================================================== **/
+
+const keyup$ = fromEvent<KeyboardEvent>( document, 'keyup').pipe(
+
+  map( event => event.code), // recibe keyboardEvent y sale string
+  filter( key => key === 'Enter') // recibe string y sale string
+
+);
+
+
+keyup$.subscribe( console.log);
+
+
+
+
+
+
+
+/**
+ * 
+ =====================================================================================================================
+   Notas 
+    -  
+==============================================================================================================================
+**/

src/operadores/03-tap.ts

@@ -0,0 +1,27 @@
+import { range } from 'rxjs';
+import { tap, map } from 'rxjs/operators';
+
+const numeros$ = range(1,5);
+
+numeros$.pipe(
+  tap( x => {
+            console.log('antes: ',x);
+            return 100; // no cambia el flujo de la info
+          }),
+          map( val => val * 10),
+          // tap(x => console.log('despúes',x ))
+          tap({
+            next: valor => console.log('despúes:',valor),
+            complete:() => console.log('Se termino todo')
+          })
+
+).subscribe( val => console.log('subs:', val))
+
+
+/**
+ * 
+ =====================================================================================================================
+   Notas 
+    -  
+==============================================================================================================================
+**/

src/operadores/04-map-lab.ts

@@ -0,0 +1,69 @@
+
+import { map, tap } from 'rxjs/operators';
+import { fromEvent } from 'rxjs';
+
+const texto = document.createElement('div');
+
+texto.innerHTML=`
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan a eros et porttitor. Duis posuere dui felis, at porta nisl volutpat eu. Nunc velit nunc, pellentesque porttitor malesuada id, auctor porta augue. Etiam a dolor a nisi pharetra fermentum in vel metus. Nulla ac tempus sapien. Integer sodales ligula non ligula elementum ultrices. Phasellus tincidunt sit amet magna non gravida. Maecenas blandit varius metus at congue.
+<br/><br/>
+Fusce hendrerit dui eu augue aliquam imperdiet. Ut mattis sem tellus, quis porttitor risus elementum at. Proin mattis enim ac interdum convallis. In nibh mi, vestibulum nec leo ac, elementum convallis felis. Cras non laoreet magna. Nullam non justo nisl. Morbi eu augue tempor erat vehicula pharetra. Sed tristique sem accumsan purus bibendum, et elementum eros cursus.
+<br/><br/>
+Curabitur aliquam quam a lorem euismod, non convallis erat pretium. Praesent enim orci, sagittis quis varius eget, auctor quis lacus. Duis rutrum, augue quis tempus egestas, diam nibh iaculis turpis, consectetur tincidunt risus neque ut dolor. Sed suscipit volutpat viverra. In pulvinar eu lectus vitae dignissim. Ut facilisis sed neque sed vulputate. Nam non ullamcorper magna. Vivamus elit neque, facilisis vitae euismod a, scelerisque in purus. Proin volutpat pulvinar ultricies. In magna purus, interdum quis posuere id, mattis ac felis.
+<br/><br/>
+Morbi pharetra sollicitudin neque, quis ultrices est finibus in. Etiam id dolor id purus dignissim venenatis ac ac nisl. Cras eget sapien dapibus, viverra neque sit amet, suscipit dui. Morbi bibendum vel magna at pulvinar. Sed aliquet nunc et ex porttitor consequat. Praesent sed varius enim. Nunc vulputate enim eu urna aliquet, nec egestas tellus vestibulum. Curabitur at erat id orci facilisis gravida. Vivamus ut pulvinar ante. Proin non vestibulum dolor. Integer quis sapien sed ipsum laoreet sagittis. In hac habitasse platea dictumst. Duis non lacus vulputate, ullamcorper sapien vel, volutpat risus. Nullam et felis quis dolor blandit congue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+<br/><br/>
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec erat blandit, lacinia tortor ut, pulvinar augue. Morbi id massa et tortor auctor egestas. Donec ultricies sem orci, quis vehicula metus aliquam at. Ut luctus pellentesque bibendum. Nunc ut convallis ligula. Curabitur rutrum finibus ex, et porta lacus consequat eu. Vestibulum lacus eros, tempor non laoreet at, sagittis in lorem. In sollicitudin lorem sed urna molestie pharetra. Ut sapien massa, vehicula eget suscipit ac, placerat nec ante. Donec et lorem nisi. Fusce molestie risus eu dolor rhoncus, non sagittis erat tincidunt. Nullam id ipsum consequat, auctor erat quis, fermentum erat. Nam placerat, nibh et viverra convallis, tortor sapien lobortis felis, at dignissim purus arcu sit amet arcu.
+`;
+
+// Referencia al body
+
+const body = document.querySelector('body');
+
+body.append ( texto );
+
+
+const progressBar = document.createElement('div');
+progressBar.setAttribute('class','progress-bar');
+body.append(progressBar);
+
+
+// Función que haga el calculo 
+const calcularPorcentajeScroll = (event) => {
+  // console.log(event);
+  // destructuración e6
+  const {
+    scrollTop,
+    scrollHeight,
+    clientHeight
+  } = event.target.documentElement;
+
+  return ( scrollTop / ( scrollHeight - clientHeight ) ) * 100; 
+}
+
+// Streams
+const scroll$ = fromEvent( document, 'scroll');
+// scroll$.subscribe( console.log );
+
+// Procedimiento que me calcule el parcentaje
+const progress = scroll$.pipe(
+  // map( event => calcularPorcentajeScroll(event))
+  map(calcularPorcentajeScroll),
+  tap( console.log )
+
+);
+
+
+
+
+progress.subscribe( porcentaje =>{
+  progressBar.style.width = `${porcentaje}%`;
+});
+
+/**
+ * 
+ =====================================================================================================================
+   Notas 
+    -  
+==============================================================================================================================
+**/

src/operadores/05-reduce.ts

@@ -0,0 +1,23 @@
+import { interval } from 'rxjs';
+import { take, reduce, tap } from 'rxjs/operators';
+
+
+const numbers = [1,2,3,4,5];
+
+const totalReducer = ( acumulador:number, valorActual:number) =>{
+    return acumulador + valorActual;
+}
+
+const total = numbers.reduce( totalReducer,0);
+console.log('total arr',total);
+
+
+interval( 500 ).pipe(
+  take(6), // cantidad del acumulado queremos del acumulado
+  tap(console.log), // depuramos para ver el flujo
+  reduce( totalReducer) // el segundo argumento si se omite es 0
+)
+.subscribe({
+  next: val => console.log('next',val),
+  complete: () =>console.log('Complete')
+});

src/operadores/06-scan.ts

@@ -0,0 +1,52 @@
+import { from } from 'rxjs';
+import { reduce, scan, map } from 'rxjs/operators';
+
+
+const numeros= [1,2,3,4,5];
+
+// const totalAcumulador = ( acc:number, cur:number) =>{
+//     return acc + cur;
+// }
+
+const totalAcumador = (acc,cur) => acc+ cur;
+
+// reduce : muestra el total acumulado
+from( numeros ).pipe(
+  reduce(totalAcumador,0)
+).subscribe(console.log);
+
+
+// scan : emite cada uno de los valores
+from( numeros ).pipe(
+  scan(totalAcumador,0)
+).subscribe(console.log);
+
+
+// Redux : manejar el estado global de la app en un solo objeto
+interface Usuario {
+  id?: string,
+  autenticado?: boolean,
+  token?: string,
+  edad?:number
+}
+
+const user : Usuario[]=[
+  { id:'ped', autenticado:false, token:null },
+  { id:'ped', autenticado:true, token:'ABC' },
+  { id:'ped', autenticado:true, token:'ABC123' }
+];
+
+const state$ = from ( user ).pipe(
+  // Mantener todas las modificaciones de mi estado
+  scan<Usuario>( ( acc,cur) => {
+    // destructuración
+    return {...acc,...cur}
+  },{edad:33})
+);
+
+
+const id$ = state$.pipe(
+  map( state => state.id)
+);
+
+id$.subscribe(console.log);