feat(interceptors): added two interceptors example and refactor progress bar service

Author: Ismaestro

README.md

@@ -61,7 +61,7 @@ Live DEMO [here](http://angularexampleapp.com/)!
 * Responsive layout (flex layout module)
 * Internationalization
 * Lazy loading modules
-* Progress bar active, if a request is pending (events)
+* Interceptors and Events (Progress bar active, if a request is pending)
 * CRUD: create, update and remove heroes
 * Search bar, to look for heroes
 * Modal and toasts (snakbar)!

src/app/app.module.ts

@@ -10,10 +10,13 @@ import {CoreModule} from './core/core.module';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule} from '@angular/common/http';
 import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
 import {HttpLoaderFactory} from './app.translate.factory';
 import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
+import {ProgressBarService} from './core/progress-bar.service';
+import {ProgressInterceptor} from './shared/interceptors/progress.interceptor';
+import {TimingInterceptor} from './shared/interceptors/timing.interceptor';
 
 @NgModule({
   imports: [
@@ -37,7 +40,9 @@ import {HeroTopComponent} from './heroes/hero-top/hero-top.component';
     HeroTopComponent
   ],
   providers: [
-    {provide: APP_CONFIG, useValue: AppConfig}
+    {provide: APP_CONFIG, useValue: AppConfig},
+    {provide: HTTP_INTERCEPTORS, useClass: ProgressInterceptor, multi: true, deps: [ProgressBarService]},
+    {provide: HTTP_INTERCEPTORS, useClass: TimingInterceptor, multi: true}
   ],
   bootstrap: [AppComponent]
 })

src/app/core/progress-bar.service.spec.ts

@@ -27,7 +27,7 @@ describe('ProgressBarService', () => {
   });
 
   it('should not be requestsRunning', (() => {
-    const instance = new ProgressBarService(heroService);
+    const instance = new ProgressBarService();
     expect(instance).toBeTruthy();
   }));
 
@@ -36,14 +36,14 @@ describe('ProgressBarService', () => {
   }));
 
   it('should increase and decrease the counter of requests running', (() => {
-    heroService.request$.emit('starting');
-    heroService.request$.emit('starting');
+    progressBarService.increase();
+    progressBarService.increase();
     expect(progressBarService.requestsRunning).toBe(2);
-    heroService.request$.emit('finished');
+    progressBarService.decrease();
     expect(progressBarService.requestsRunning).toBe(1);
-    heroService.request$.emit('finished');
+    progressBarService.decrease();
     expect(progressBarService.requestsRunning).toBe(0);
-    heroService.request$.emit('finished');
+    progressBarService.decrease();
     expect(progressBarService.requestsRunning).toBe(0);
   }));
 });

src/app/core/progress-bar.service.ts

@@ -1,27 +1,32 @@
 import {EventEmitter, Injectable} from '@angular/core';
-import {HeroService} from '../heroes/shared/hero.service';
 
 @Injectable()
 export class ProgressBarService {
   public updateProgressBar$: EventEmitter<any>;
 
   private requestsRunning = 0;
 
-  constructor(private heroService: HeroService) {
+  constructor() {
     this.updateProgressBar$ = new EventEmitter();
+  }
+
+  public list(): number {
+    return this.requestsRunning;
+  }
+
+  public increase(): void {
+    this.requestsRunning++;
+    if (this.requestsRunning === 1) {
+      this.updateProgressBar$.emit('query');
+    }
+  }
 
-    this.heroService.request$.subscribe((type: string) => {
-      if (type === 'starting') {
-        this.requestsRunning++;
-        if (this.requestsRunning === 1) {
-          this.updateProgressBar$.emit('query');
-        }
-      } else if (this.requestsRunning > 0) {
-        this.requestsRunning--;
-        if (this.requestsRunning === 0) {
-          this.updateProgressBar$.emit('none');
-        }
+  public decrease(): void {
+    if (this.requestsRunning > 0) {
+      this.requestsRunning--;
+      if (this.requestsRunning === 0) {
+        this.updateProgressBar$.emit('none');
       }
-    });
+    }
   }
 }

src/app/heroes/shared/hero.service.ts

@@ -1,4 +1,4 @@
-import {EventEmitter, Injectable} from '@angular/core';
+import {Injectable} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 
 import {AppConfig} from '../../config/app.config';
@@ -10,14 +10,11 @@ import {TranslateService} from '@ngx-translate/core';
 
 @Injectable()
 export class HeroService {
-  request$: EventEmitter<any>;
-
   private headers: HttpHeaders;
   private heroesUrl: string;
   private translations: any;
 
   private handleError(error: any) {
-    this.request$.emit('finished');
     if (error instanceof Response) {
       return Observable.throw(error.json()['error'] || 'backend server error');
     }
@@ -27,8 +24,6 @@ export class HeroService {
   constructor(private http: HttpClient,
               private translateService: TranslateService,
               private snackBar: MatSnackBar) {
-    this.request$ = new EventEmitter();
-
     this.heroesUrl = AppConfig.endpoints.heroes;
     this.headers = new HttpHeaders({'Content-Type': 'application/json'});
 
@@ -40,34 +35,28 @@ export class HeroService {
   }
 
   getAllHeroes(): Observable<Hero[]> {
-    this.request$.emit('starting');
     return this.http.get(this.heroesUrl)
       .map(response => {
-        this.request$.emit('finished');
         return response;
       })
       .catch(error => this.handleError(error));
   }
 
   getHeroById(heroId: string): Observable<Hero> {
-    this.request$.emit('starting');
     return this.http.get(this.heroesUrl + '/' + heroId)
       .map(response => {
-        this.request$.emit('finished');
         return response;
       })
       .catch(error => this.handleError(error));
   }
 
   createHero(hero: any): Observable<Hero> {
-    this.request$.emit('starting');
     return this.http
       .post(this.heroesUrl, JSON.stringify({
         name: hero.name,
         alterEgo: hero.alterEgo
       }), {headers: this.headers})
       .map(response => {
-        this.request$.emit('finished');
         this.showSnackBar('heroCreated');
         return response;
       })
@@ -76,12 +65,10 @@ export class HeroService {
 
   like(hero: Hero) {
     if (this.checkIfUserCanVote()) {
-      this.request$.emit('starting');
       const url = `${this.heroesUrl}/${hero.id}/like`;
       return this.http
         .post(url, {}, {headers: this.headers})
         .map((response) => {
-          this.request$.emit('finished');
           localStorage.setItem('votes', '' + (Number(localStorage.getItem('votes')) + 1));
           hero.likes += 1;
           this.showSnackBar('saved');
@@ -99,11 +86,9 @@ export class HeroService {
   }
 
   deleteHeroById(id: any): Observable<Array<Hero>> {
-    this.request$.emit('starting');
     const url = `${this.heroesUrl}/${id}`;
     return this.http.delete(url, {headers: this.headers})
       .map((response) => {
-        this.request$.emit('finished');
         this.showSnackBar('heroRemoved');
         return response;
       })

src/app/shared/interceptors/progress.interceptor.ts

@@ -0,0 +1,19 @@
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
+import {Observable} from 'rxjs/Observable';
+import {ProgressBarService} from '../../core/progress-bar.service';
+
+export class ProgressInterceptor implements HttpInterceptor {
+  constructor(private progressBarService: ProgressBarService) {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    this.progressBarService.increase();
+    return next
+      .handle(req)
+      .do(event => {
+        if (event instanceof HttpResponse) {
+          this.progressBarService.decrease();
+        }
+      });
+  }
+}

src/app/shared/interceptors/timing.interceptor.ts

@@ -0,0 +1,20 @@
+import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse} from '@angular/common/http';
+import {Observable} from 'rxjs/Observable';
+import {LoggerService} from '../../core/logger.service';
+
+export class TimingInterceptor implements HttpInterceptor {
+  constructor() {
+  }
+
+  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const started = Date.now();
+    return next
+      .handle(req)
+      .do(event => {
+        if (event instanceof HttpResponse) {
+          const elapsed = Date.now() - started;
+          LoggerService.log(`Request for ${req.urlWithParams} took ${elapsed} ms.`);
+        }
+      });
+  }
+}

src/polyfills.ts

@@ -82,6 +82,8 @@ import 'rxjs/add/observable/throw';
 
 import 'rxjs/add/operator/catch';
 import 'rxjs/add/operator/startWith';
+import 'rxjs/add/operator/do';
+
 
 /**
  * Need to import hammer for Angular Material support.