Introduce lettable RxJS operators

- use the Observable.pipe() method
- imports each operator as named import from rxjs/operators
- rename do() and catch() (see the table in our blog article)

(cherry picked from commit 318c9a4)

----

Remove unused imports

(cherry picked from commit 1e1f4a4)

----

Use lettable operators in app component

(cherry picked from commit c48403f)
Signed-off-by: Johannes Hoppe <johannes.hoppe@haushoppe-its.de>

src/app/app.component.ts

@@ -1,11 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 import { Observable } from 'rxjs/Observable';
+import { debounceTime, map, startWith, filter } from 'rxjs/operators';
 import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/startWith';
 
 declare var window: any;
 
@@ -23,30 +20,31 @@ export class AppComponent implements OnInit {
   constructor(private r: Router) { }
 
   ngOnInit() {
-    this.r.events
-      .filter(e => e instanceof NavigationEnd)
-      .subscribe(e => {
-
-        const url: string = (<any>e).urlAfterRedirects;
-        const amountOfSlashes = (url.match(/\//g) || []).length;
-
-        if (amountOfSlashes < 2) {
-          this.repoName = 'book-monkey2';
-          this.repositoryUrl = 'https://github.com/angular-buch/book-monkey2';
-          return;
-        } else {
-          const parts = url.split('/');
-          this.repoName = parts[1] + '-' + parts[2];
-        }
-
-        this.repositoryUrl = 'https://github.com/book-monkey2-build/' + this.repoName;
-      });
-
-    Observable.fromEvent(window, 'resize')
-      .debounceTime(100)
-      .map((e: any) => e.target.innerWidth)
-      .startWith(window.innerWidth)
-      .subscribe(iw => this.mobileLayout = iw < 767);
+    this.r.events.pipe(
+      filter(e => e instanceof NavigationEnd)
+    ).subscribe(e => {
+
+      const url: string = (<any>e).urlAfterRedirects;
+      const amountOfSlashes = (url.match(/\//g) || []).length;
+
+      if (amountOfSlashes < 2) {
+        this.repoName = 'book-monkey2';
+        this.repositoryUrl = 'https://github.com/angular-buch/book-monkey2';
+        return;
+      } else {
+        const parts = url.split('/');
+        this.repoName = parts[1] + '-' + parts[2];
+      }
+
+      this.repositoryUrl = 'https://github.com/book-monkey2-build/' + this.repoName;
+    });
+
+    Observable.fromEvent(window, 'resize').pipe(
+      debounceTime(100),
+      map((e: any) => e.target.innerWidth),
+      startWith(window.innerWidth)
+    )
+    .subscribe(iw => this.mobileLayout = iw < 767);
   }
 
   toggleSidebar() {

src/app/book-monkey/iteration-3/http/shared/book-store.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import 'rxjs/add/operator/catch';
+import { retry, map, catchError } from 'rxjs/operators';
 import 'rxjs/add/observable/throw';
 
 import { Book } from './book';
@@ -18,37 +16,47 @@ export class BookStoreService {
   getAll(): Observable<Array<Book>> {
     return this.http
       .get<any[]>(`${this.api}/books`)
-      .retry(3)
-      .map(rawBooks => rawBooks
-        .map(rawBook => BookFactory.fromObject(rawBook))
-      )
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBooks => rawBooks
+          .map(rawBook => BookFactory.fromObject(rawBook)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
 
   getSingle(isbn: string): Observable<Book> {
     return this.http
       .get(`${this.api}/book/${isbn}`)
-      .retry(3)
-      .map(rawBook => BookFactory.fromObject(rawBook))
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBook => BookFactory.fromObject(rawBook)),
+        catchError(this.errorHandler)
+      );
   }
 
   create(book: Book): Observable<any> {
     return this.http
       .post(`${this.api}/book`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   update(book: Book): Observable<any> {
     return this.http
       .put(`${this.api}/book/${book.isbn}`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   remove(isbn: string): Observable<any> {
     return this.http
       .delete(`${this.api}/book/${isbn}`, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   private errorHandler(error: Error | any): Observable<any> {

src/app/book-monkey/iteration-3/rxjs/search/search.component.ts

@@ -1,8 +1,5 @@
 import { Component, EventEmitter, Output, OnInit } from '@angular/core';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/switchMap';
+import { debounceTime, distinctUntilChanged, tap, switchMap } from 'rxjs/operators';
 
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -23,12 +20,13 @@ export class SearchComponent implements OnInit {
 
   ngOnInit() {
 
-    this.keyup
-      .debounceTime(500)
-      .distinctUntilChanged()
-      .do(() => this.isLoading = true)
-      .switchMap(searchTerm => this.bs.getAllSearch(searchTerm))
-      .do(() => this.isLoading = false)
-      .subscribe(books => this.foundBooks = books);
+    this.keyup.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.isLoading = true),
+      switchMap(searchTerm => this.bs.getAllSearch(searchTerm)),
+      tap(() => this.isLoading = false)
+    )
+    .subscribe(books => this.foundBooks = books);
   }
 }

src/app/book-monkey/iteration-3/rxjs/shared/book-store.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import 'rxjs/add/operator/catch';
+import { retry, map, catchError } from 'rxjs/operators';
 import 'rxjs/add/observable/throw';
 
 import { Book } from './book';
@@ -18,37 +16,47 @@ export class BookStoreService {
   getAll(): Observable<Array<Book>> {
     return this.http
       .get<any[]>(`${this.api}/books`)
-      .retry(3)
-      .map(rawBooks => rawBooks
-        .map(rawBook => BookFactory.fromObject(rawBook))
-      )
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBooks => rawBooks
+          .map(rawBook => BookFactory.fromObject(rawBook)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
 
   getSingle(isbn: string): Observable<Book> {
     return this.http
       .get(`${this.api}/book/${isbn}`)
-      .retry(3)
-      .map(rawBook => BookFactory.fromObject(rawBook))
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBook => BookFactory.fromObject(rawBook)),
+        catchError(this.errorHandler)
+      );
   }
 
   create(book: Book): Observable<any> {
     return this.http
       .post(`${this.api}/book`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   update(book: Book): Observable<any> {
     return this.http
       .put(`${this.api}/book/${book.isbn}`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   remove(isbn: string): Observable<any> {
     return this.http
       .delete(`${this.api}/book/${isbn}`, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   private errorHandler(error: Error | any): Observable<any> {
@@ -59,10 +67,12 @@ export class BookStoreService {
   getAllSearch(searchTerm: string): Observable<Array<Book>> {
     return this.http
       .get<any[]>(`${this.api}/books/search/${searchTerm}`)
-      .retry(3)
-      .map(rawBooks => rawBooks
-        .map(rawBook => BookFactory.fromObject(rawBook))
-      )
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBooks => rawBooks
+          .map(rawBook => BookFactory.fromObject(rawBook)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
 }

src/app/book-monkey/iteration-4/custom-validation/search/search.component.ts

@@ -1,8 +1,5 @@
 import { Component, EventEmitter, Output, OnInit } from '@angular/core';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/switchMap';
+import { debounceTime, distinctUntilChanged, tap, switchMap } from 'rxjs/operators';
 
 import { Book } from '../shared/book';
 import { BookStoreService } from '../shared/book-store.service';
@@ -23,12 +20,13 @@ export class SearchComponent implements OnInit {
 
   ngOnInit() {
 
-    this.keyup
-      .debounceTime(500)
-      .distinctUntilChanged()
-      .do(() => this.isLoading = true)
-      .switchMap(searchTerm => this.bs.getAllSearch(searchTerm))
-      .do(() => this.isLoading = false)
-      .subscribe(books => this.foundBooks = books);
+    this.keyup.pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+      tap(() => this.isLoading = true),
+      switchMap(searchTerm => this.bs.getAllSearch(searchTerm)),
+      tap(() => this.isLoading = false)
+    )
+    .subscribe(books => this.foundBooks = books);
   }
 }

src/app/book-monkey/iteration-4/custom-validation/shared/book-store.service.ts

@@ -1,9 +1,7 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/retry';
-import 'rxjs/add/operator/catch';
+import { retry, map, catchError } from 'rxjs/operators';
 import 'rxjs/add/observable/throw';
 
 import { Book } from './book';
@@ -18,43 +16,55 @@ export class BookStoreService {
   getAll(): Observable<Array<Book>> {
     return this.http
       .get<any[]>(`${this.api}/books`)
-      .retry(3)
-      .map(rawBooks => rawBooks
-        .map(rawBook => BookFactory.fromObject(rawBook))
-      )
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBooks => rawBooks
+          .map(rawBook => BookFactory.fromObject(rawBook)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
 
   getSingle(isbn: string): Observable<Book> {
     return this.http
       .get(`${this.api}/book/${isbn}`)
-      .retry(3)
-      .map(rawBook => BookFactory.fromObject(rawBook))
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBook => BookFactory.fromObject(rawBook)),
+        catchError(this.errorHandler)
+      );
   }
 
   check(isbn: string): Observable<Boolean> {
     return this.http
       .get(`${this.api}/book/${isbn}/check`)
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   create(book: Book): Observable<any> {
     return this.http
       .post(`${this.api}/book`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   update(book: Book): Observable<any> {
     return this.http
       .put(`${this.api}/book/${book.isbn}`, book, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   remove(isbn: string): Observable<any> {
     return this.http
       .delete(`${this.api}/book/${isbn}`, { responseType: 'text' })
-      .catch(this.errorHandler);
+      .pipe(
+        catchError(this.errorHandler)
+      );
   }
 
   private errorHandler(error: Error | any): Observable<any> {
@@ -64,10 +74,12 @@ export class BookStoreService {
   getAllSearch(searchTerm: string): Observable<Array<Book>> {
     return this.http
       .get<any[]>(`${this.api}/books/search/${searchTerm}`)
-      .retry(3)
-      .map(rawBooks => rawBooks
-        .map(rawBook => BookFactory.fromObject(rawBook))
-      )
-      .catch(this.errorHandler);
+      .pipe(
+        retry(3),
+        map(rawBooks => rawBooks
+          .map(rawBook => BookFactory.fromObject(rawBook)),
+        ),
+        catchError(this.errorHandler)
+      );
   }
 }