Merge pull request #54 from mpalourdio/show-hide

mpalourdio · web-flow · commit c330adbe23e4 · 2018-03-20T15:01:08.000+01:00
Show / hide the spinner manually, Fixes #22 #33 #52 #53
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -1,5 +1,11 @@
 # Changelog
 
+## v0.8.0
+
+This release adds the ``SpinnerVisibilityService``, a simple injectable service that allows you to manually show/hide the spinner.
+
+See the [Manually show and hide the spinner](https://github.com/mpalourdio/ng-http-loader#manually-show-and-hide-the-spinner) section.
+
 ## v0.7.1
 
 This release is a bug fix release. It slightly improves the behavior of the ``filteredUrlPatterns`` so this parameter takes care of query strings too.
@@ -8,7 +14,7 @@ This release is a bug fix release. It slightly improves the behavior of the ``fi
 
 This release adds the ``entryComponent`` property. It allows to specify your own component instead of the built-in ones. It uses the [NgComponentOutlet](https://angular.io/api/common/NgComponentOutlet) feature.
 
-See [Defining your own spinner](https://github.com/mpalourdio/ng-http-loader#defining-your-own-spinner) section.
+See the [Defining your own spinner](https://github.com/mpalourdio/ng-http-loader#defining-your-own-spinner) section.
 
 ## v0.6.0
 
diff --git a/README.MD b/README.MD
@@ -158,6 +158,29 @@ You can also filter the http requests that shouldn't be caught by the intercepto
 <spinner [filteredUrlPatterns]="['\\d', '[a-zA-Z]', 'my-api']"></spinner>
 ```
 
+## Manually show and hide the spinner
+
+You can manually show and hide the spinner component if needed. You must use the ``SpinnerVisibilityService`` for this purpose.  
+
+```typescript
+import { SpinnerVisibilityService } from 'ng-http-loader/services/spinner-visibility.service';
+
+@Component({
+    selector: 'my-component',
+    templateUrl: './my.component.html',
+    styleUrls: ['./my.component.css'],
+})
+export class MyComponent {
+
+    constructor(private visibilityService: SpinnerVisibilityService) {
+        // show the spinner
+        visibilityService.visibilitySubject.next(true);
+        // hide the spinner
+        visibilityService.visibilitySubject.next(false);
+    }
+}
+```
+
 ## Misc
 
 Each Spinkit component defined in [SPINKIT_COMPONENTS](src/spinkits.ts#L30) can be used independently.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng-http-loader",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "scripts": {
     "prepare-deploy": "gulp inline-templates && gulp clean-dist && ngc -p tsconfig.ngc.json && gulp clean-tmp && gulp copy-all",
     "test": "ng test --watch false"
diff --git a/src/components/spinner/spinner.component.ts b/src/components/spinner/spinner.component.ts
@@ -14,6 +14,7 @@ import { PendingInterceptorService } from '../../services/pending-interceptor.se
 import { timer } from 'rxjs/observable/timer';
 import { Observable } from 'rxjs/Observable';
 import { debounce } from 'rxjs/operators';
+import { SpinnerVisibilityService } from '../../services/spinner-visibility.service';
 
 @Component({
     selector: 'spinner',
@@ -22,9 +23,10 @@ import { debounce } from 'rxjs/operators';
 })
 export class SpinnerComponent implements OnDestroy, OnInit {
     public isSpinnerVisible: boolean;
-    private subscription: Subscription;
-    public Spinkit = Spinkit;
+    private pendingSubscription: Subscription;
+    private visibilitySubscription: Subscription;
 
+    public Spinkit = Spinkit;
     @Input()
     public backgroundColor: string;
     @Input()
@@ -36,13 +38,19 @@ export class SpinnerComponent implements OnDestroy, OnInit {
     @Input()
     public entryComponent: any = null;
 
-    constructor(private pendingRequestInterceptorService: PendingInterceptorService) {
-        this.subscription = this.pendingRequestInterceptorService
+    constructor(private pendingInterceptorService: PendingInterceptorService, private spinnerVisibilityService: SpinnerVisibilityService) {
+        this.pendingSubscription = this.pendingInterceptorService
             .pendingRequestsStatus
             .pipe(debounce(this.handleDebounce.bind(this)))
-            .subscribe(hasPendingRequests => {
-                this.isSpinnerVisible = hasPendingRequests;
-            });
+            .subscribe(this.handleSpinnerVisibility().bind(this));
+
+        this.visibilitySubscription = this.spinnerVisibilityService
+            .visibilitySubject
+            .subscribe(this.handleSpinnerVisibility().bind(this));
+    }
+
+    private handleSpinnerVisibility(): (v: boolean) => void {
+        return v => this.isSpinnerVisible = v;
     }
 
     ngOnInit(): void {
@@ -54,7 +62,7 @@ export class SpinnerComponent implements OnDestroy, OnInit {
 
         if (!!this.filteredUrlPatterns.length) {
             this.filteredUrlPatterns.forEach(e => {
-                this.pendingRequestInterceptorService.filteredUrlPatterns.push(new RegExp(e));
+                this.pendingInterceptorService.filteredUrlPatterns.push(new RegExp(e));
             });
         }
     }
@@ -65,9 +73,9 @@ export class SpinnerComponent implements OnDestroy, OnInit {
         }
     }
 
-
     ngOnDestroy(): void {
-        this.subscription.unsubscribe();
+        this.pendingSubscription.unsubscribe();
+        this.visibilitySubscription.unsubscribe();
     }
 
     private handleDebounce(hasPendingRequests: boolean): Observable<number> {
diff --git a/src/services/ng-http-loader-services.module.ts b/src/services/ng-http-loader-services.module.ts
@@ -11,6 +11,7 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import { PendingInterceptorService, PendingInterceptorServiceFactoryProvider } from './pending-interceptor.service';
+import { SpinnerVisibilityServiceFactoryProvider } from './spinner-visibility.service';
 
 const PendingInterceptorServiceExistingProvider = {
     provide: HTTP_INTERCEPTORS,
@@ -25,6 +26,7 @@ const PendingInterceptorServiceExistingProvider = {
     providers: [
         PendingInterceptorServiceExistingProvider,
         PendingInterceptorServiceFactoryProvider,
+        SpinnerVisibilityServiceFactoryProvider,
     ],
 })
 export class NgHttpLoaderServicesModule {
diff --git a/src/services/spinner-visibility.service.ts b/src/services/spinner-visibility.service.ts
@@ -0,0 +1,29 @@
+/*
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { Injectable } from '@angular/core';
+import { Subject } from 'rxjs/Subject';
+
+@Injectable()
+export class SpinnerVisibilityService {
+    private _visibilitySubject: Subject<boolean> = new Subject<boolean>();
+
+    get visibilitySubject(): Subject<boolean> {
+        return this._visibilitySubject;
+    }
+}
+
+export function SpinnerVisibilityServiceFactory(): SpinnerVisibilityService {
+    return new SpinnerVisibilityService();
+}
+
+export let SpinnerVisibilityServiceFactoryProvider = {
+    provide: SpinnerVisibilityService,
+    useFactory: SpinnerVisibilityServiceFactory
+};
diff --git a/test/components/spinner/spinner.component.spec.ts b/test/components/spinner/spinner.component.spec.ts
@@ -12,11 +12,11 @@ import { SpinnerComponent } from '../../../src/components/spinner/spinner.compon
 import { By } from '@angular/platform-browser';
 import { Spinkit, SPINKIT_COMPONENTS } from '../../../src/spinkits';
 import { Observable } from 'rxjs/Observable';
-import { PendingInterceptorService } from '../../../src/services/pending-interceptor.service';
 import { HttpClient } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { NgHttpLoaderServicesModule } from '../../../src/services/ng-http-loader-services.module';
 import 'rxjs/add/observable/forkJoin';
+import { SpinnerVisibilityService } from '../../../src/services/spinner-visibility.service';
 
 describe('SpinnerComponent', () => {
     let component: SpinnerComponent;
@@ -99,8 +99,7 @@ describe('SpinnerComponent', () => {
     });
 
     it('should show and hide the spinner according to the pending http requests', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
 
             function runQuery(url: string): Observable<any> {
                 return http.get(url);
@@ -125,8 +124,7 @@ describe('SpinnerComponent', () => {
     )));
 
     it('should hide and show a the spinner for a single http request', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             http.get('/fake').subscribe();
 
             tick();
@@ -139,8 +137,7 @@ describe('SpinnerComponent', () => {
     )));
 
     it('should not show the spinner if the request is filtered', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.filteredUrlPatterns.push('fake');
             fixture.detectChanges();
 
@@ -152,8 +149,7 @@ describe('SpinnerComponent', () => {
     )));
 
     it('should take care of query strings in filteredUrlPatterns', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.filteredUrlPatterns.push('bar');
             fixture.detectChanges();
 
@@ -172,8 +168,7 @@ describe('SpinnerComponent', () => {
     )));
 
     it('should correctly filter with several requests and one pattern', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.filteredUrlPatterns.push('\\d');
             fixture.detectChanges();
 
@@ -197,28 +192,25 @@ describe('SpinnerComponent', () => {
         expect(() => fixture.detectChanges()).toThrow(new Error('`filteredUrlPatterns` must be an array.'));
     });
 
-    it('should show the spinner even if the component is created after the http request is performed',
-        fakeAsync(inject([PendingInterceptorService, HttpClient, HttpTestingController],
-            (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
-                http.get('/fake').subscribe();
+    it('should show the spinner even if the component is created after the http request is performed', fakeAsync(inject(
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
+            http.get('/fake').subscribe();
 
-                const newFixture = TestBed.createComponent(SpinnerComponent);
-                const newComponent = newFixture.componentInstance;
+            const newFixture = TestBed.createComponent(SpinnerComponent);
+            const newComponent = newFixture.componentInstance;
 
-                tick();
-                expect(newComponent.isSpinnerVisible).toBeTruthy();
-                httpMock.expectOne('/fake').flush({});
+            tick();
+            expect(newComponent.isSpinnerVisible).toBeTruthy();
+            httpMock.expectOne('/fake').flush({});
 
-                tick();
-                expect(newComponent.isSpinnerVisible).toBeFalsy();
-                httpMock.verify();
-            }
-        ))
-    );
+            tick();
+            expect(newComponent.isSpinnerVisible).toBeFalsy();
+            httpMock.verify();
+        }
+    )));
 
     it('should correctly handle the debounce delay for a single http request', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.debounceDelay = 2000;
             http.get('/fake').subscribe();
 
@@ -249,8 +241,7 @@ describe('SpinnerComponent', () => {
     )));
 
     it('should correctly handle the debounce delay for multiple http requests', fakeAsync(inject(
-        [PendingInterceptorService, HttpClient, HttpTestingController],
-        (service: PendingInterceptorService, http: HttpClient, httpMock: HttpTestingController) => {
+        [HttpClient, HttpTestingController], (http: HttpClient, httpMock: HttpTestingController) => {
             component.debounceDelay = 2000;
 
             function runQuery(url: string): Observable<any> {
@@ -296,4 +287,14 @@ describe('SpinnerComponent', () => {
             discardPeriodicTasks();
         }
     )));
+
+    it('should be possible to manually show/hide the spinner', inject(
+        [SpinnerVisibilityService], (visibilityService: SpinnerVisibilityService) => {
+            visibilityService.visibilitySubject.next(true);
+            expect(component.isSpinnerVisible).toBeTruthy();
+
+            visibilityService.visibilitySubject.next(false);
+            expect(component.isSpinnerVisible).toBeFalsy();
+        }
+    ));
 });
diff --git a/test/services/pending-interceptor.service.spec.ts b/test/services/pending-interceptor.service.spec.ts
diff --git a/test/services/spinner-visibility.service.spec.ts b/test/services/spinner-visibility.service.spec.ts

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "ng-http-loader",`
`3`		`- "version": "0.7.1",`
	`3`	`+ "version": "0.8.0",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"prepare-deploy": "gulp inline-templates && gulp clean-dist && ngc -p tsconfig.ngc.json && gulp clean-tmp && gulp copy-all",`
`6`	`6`	`"test": "ng test --watch false"`