Add possibility to filter requests that shouldn't be caught by the interceptor by providing an array of regex

Author: mpalourdio

README.MD

@@ -54,6 +54,15 @@ You can too customize the background-color and the spinner type :
 <spinner [backgroundColor]="'#ff0000'" [spinner]="Spinkit.skWave"></spinner>
 ```
 
+You can filter the requests that shouldn't be caught by the interceptor by providing an array of regex patterns :
+```xml
+<spinner 
+    [backgroundColor]="'#ff0000'"
+    [spinner]="Spinkit.skWave"
+    [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']>
+</spinner>
+```
+
 The different spinners available are referenced in [this class](src/app/spinkits.ts).
 
 ## Requirements

src/app/pending-interceptor.service.ts

@@ -20,6 +20,7 @@ import 'rxjs/add/observable/throw';
 export class PendingInterceptorService implements HttpInterceptor {
     private _pendingRequests = 0;
     private _pendingRequestsStatus: Subject<boolean> = new Subject<boolean>();
+    private _filteredUrlPatterns: RegExp[] = [];
 
     get pendingRequestsStatus(): Observable<boolean> {
         return this._pendingRequestsStatus.asObservable();
@@ -29,11 +30,25 @@ export class PendingInterceptorService implements HttpInterceptor {
         return this._pendingRequests;
     }
 
+    get filteredUrlPatterns(): RegExp[] {
+        return this._filteredUrlPatterns;
+    }
+
+    private shouldBypass(url: string): boolean {
+        return this._filteredUrlPatterns.some((e: RegExp) => {
+            return e.test(url);
+        });
+    }
+
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-        this._pendingRequests++;
+        const shouldByPass = this.shouldBypass(req.url);
+
+        if (!shouldByPass) {
+            this._pendingRequests++;
 
-        if (1 === this._pendingRequests) {
-            this._pendingRequestsStatus.next(true);
+            if (1 === this._pendingRequests) {
+                this._pendingRequestsStatus.next(true);
+            }
         }
 
         return next.handle(req).map(event => {
@@ -43,10 +58,12 @@ export class PendingInterceptorService implements HttpInterceptor {
                 return Observable.throw(error);
             })
             .finally(() => {
-                this._pendingRequests--;
+                if (!shouldByPass) {
+                    this._pendingRequests--;
 
-                if (0 === this._pendingRequests) {
-                    this._pendingRequestsStatus.next(false);
+                    if (0 === this._pendingRequests) {
+                        this._pendingRequestsStatus.next(false);
+                    }
                 }
             });
     }

src/app/spinner/spinner.component.spec.ts

@@ -141,4 +141,41 @@ describe('SpinnerComponent', () => {
                 expect(component.isSpinnerVisible).toBeFalsy();
             })
     );
+
+    it('should not show the spinner if the request is filtered',
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+                component.filteredUrlPatterns.push('fake');
+                fixture.detectChanges();
+
+                http.get('/fake').subscribe();
+                expect(component.isSpinnerVisible).toBeFalsy();
+                httpMock.expectOne('/fake').flush({});
+            })
+    );
+
+    it('should correctly filter with several requests and one pattern',
+        inject(
+            [PendingInterceptorService, HttpClient, HttpTestingController],
+            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+                component.filteredUrlPatterns.push('\\d');
+                fixture.detectChanges();
+
+                http.get('/12345').subscribe();
+                expect(component.isSpinnerVisible).toBeFalsy();
+                httpMock.expectOne('/12345').flush({});
+
+                http.get('/fake').subscribe();
+                expect(component.isSpinnerVisible).toBeTruthy();
+                httpMock.expectOne('/fake').flush({});
+                expect(component.isSpinnerVisible).toBeFalsy();
+            })
+    );
+
+    it('should throw an error if filteredUrlPatterns is not an array', () => {
+        component.filteredUrlPatterns = null;
+        expect(() => fixture.detectChanges())
+            .toThrow(new Error('`filteredUrlPatterns` must be an array.'));
+    });
 });

src/app/spinner/spinner.component.ts

@@ -7,7 +7,7 @@
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Component, Input, OnDestroy } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs/Subscription';
 import { Spinkit } from '../spinkits';
 import { PendingInterceptorService } from '../pending-interceptor.service';
@@ -27,7 +27,7 @@ import { PendingInterceptorService } from '../pending-interceptor.service';
         './spinkit-css/sk-wave.css',
     ]
 })
-export class SpinnerComponent implements OnDestroy {
+export class SpinnerComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
     private subscription: Subscription;
     public Spinkit = Spinkit;
@@ -36,6 +36,8 @@ export class SpinnerComponent implements OnDestroy {
     public backgroundColor: string;
     @Input()
     public spinner = Spinkit.skCubeGrid;
+    @Input()
+    public filteredUrlPatterns: string[] = [];
 
     constructor(private pendingRequestInterceptorService: PendingInterceptorService) {
         this.subscription = this.pendingRequestInterceptorService
@@ -45,6 +47,18 @@ export class SpinnerComponent implements OnDestroy {
             });
     }
 
+    ngOnInit(): void {
+        if (!(this.filteredUrlPatterns instanceof Array)) {
+            throw new TypeError('`filteredUrlPatterns` must be an array.');
+        }
+
+        if (!!this.filteredUrlPatterns.length) {
+            this.filteredUrlPatterns.forEach(e => {
+                this.pendingRequestInterceptorService.filteredUrlPatterns.push(new RegExp(e));
+            });
+        }
+    }
+
     ngOnDestroy(): void {
         this.subscription.unsubscribe();
     }