TTA-115 implement a stable, slow or offline connection warning

Author: Abigail Cabascango

src/app/app.component.html

@@ -1 +1,13 @@
+<app-internet-connection-status listen="true">
+
+	<ng-container *fast>
+	</ng-container>
+
+	<ng-container *slow>
+	</ng-container>
+
+    <ng-container *offline>
+	</ng-container>
+
+</app-internet-connection-status>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -97,6 +97,12 @@ import { SearchUserComponent } from './modules/shared/components/search-user/sea
 import { TimeRangeCustomComponent } from './modules/reports/components/time-range-custom/time-range-custom.component';
 import { TimeRangeHeaderComponent } from './modules/reports/components/time-range-custom/time-range-header/time-range-header.component';
 import { TimeRangeOptionsComponent } from './modules/reports/components/time-range-custom/time-range-options/time-range-options.component';
+import { InternetConnectionStatusComponent } from './modules/internet-connection-status/internet-connection-status.component';
+import { FastDirective} from './modules/internet-connection-status/internet-connection-directives/fast.directive';
+import { SlowDirective} from './modules/internet-connection-status/internet-connection-directives/slow.directive';
+import { OfflineDirective} from './modules/internet-connection-status/internet-connection-directives/offline.directive';
+import { ConnectionDirective } from './modules/internet-connection-status/internet-connection-directives/connection.directive';
+
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -156,6 +162,11 @@ const maskConfig: Partial<IConfig> = {
     TimeRangeCustomComponent,
     TimeRangeHeaderComponent,
     TimeRangeOptionsComponent,
+    InternetConnectionStatusComponent,
+    SlowDirective,
+    FastDirective,
+    OfflineDirective,
+    ConnectionDirective
   ],
   imports: [
     NgxMaskModule.forRoot(maskConfig),

src/app/modules/internet-connection-status/internet-connection-directives/connection.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, Attribute, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+    selector: '[appConnection]'
+})
+
+export class ConnectionDirective implements OnInit {
+    constructor(
+        @Attribute('slowSrc') private slowSrc,
+        @Attribute('fastSrc') private fastSrc,
+        @Attribute('offlineSrc') private offlineSrc,
+        private host: ElementRef<HTMLImageElement>
+    ) {
+    }
+
+    ngOnInit() {
+        const { effectiveType } = navigator.connection;
+        let src;
+        if (/\fast-5g|3g|4g/.test(effectiveType)) {
+            src = this.fastSrc;
+        }else if (/\slow-2g|2g/.test(effectiveType))  {
+            src = this.slowSrc;
+        }else {
+            src = this.offlineSrc;
+        }
+        this.host.nativeElement.setAttribute('src', src);
+    }
+
+}

src/app/modules/internet-connection-status/internet-connection-directives/fast.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appFast]'
+})
+
+export class FastDirective {
+
+    constructor(public tpl: TemplateRef<any>) { }
+
+}

src/app/modules/internet-connection-status/internet-connection-directives/offline.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appOffline]'
+})
+
+export class OfflineDirective {
+
+    constructor(public tpl: TemplateRef<any>) { }
+
+}

src/app/modules/internet-connection-status/internet-connection-directives/slow.directive.ts

@@ -0,0 +1,11 @@
+import { Directive, TemplateRef } from '@angular/core';
+
+@Directive({
+    selector: '[appSlow]'
+})
+
+export class SlowDirective {
+
+    constructor(public tpl: TemplateRef<any>) { }
+
+}

src/app/modules/internet-connection-status/internet-connection-status.component.html

@@ -0,0 +1,88 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { InternetConnectionStatusComponent } from './internet-connection-status.component';
+import { ToastrService } from 'ngx-toastr';
+import { of } from 'rxjs';
+
+describe('InternetConnectionStatusComponent', () => {
+  let component: InternetConnectionStatusComponent;
+  let fixture: ComponentFixture<InternetConnectionStatusComponent>;
+  const toastrServiceStub = {
+    error: () => {
+      return 'test error';
+    },
+    warning: () => {
+      return 'warning error';
+    },
+    success: () => {
+      return 'success error';
+    }
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InternetConnectionStatusComponent ],
+      providers: [{ provide: ToastrService, useValue: toastrServiceStub }]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InternetConnectionStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should show a stable connection warning', () => {
+    component.connection$ = of('4g');
+    fixture.detectChanges();
+    component.ngOnInit();
+    expect(component.isFast).toBe(true);
+  });
+
+  it('should show a slow connection warning', () => {
+    component.connection$ = of('2g');
+    fixture.detectChanges();
+    component.ngOnInit();
+    expect(component.isFast).toBe(false);
+  });
+
+  it('should show offline warning', () => {
+    component.connection$ = of('Offline');
+    fixture.detectChanges();
+    component.ngOnInit();
+    expect(component.isFast).toBe(false);
+  });
+
+  it('should change the network type', () => {
+    component.connection$ = of('5g');
+    fixture.detectChanges();
+    component.ngOnInit();
+    component.connection$.subscribe((networkType: string) => {
+      expect(networkType).toEqual('5g');
+    });
+
+    jasmine.clock().install();
+    jasmine.clock().tick(300);
+
+    component.connection$ = of('2g');
+    fixture.detectChanges();
+    console.log(window.navigator);
+    component.connection$.subscribe((networkType: string) => {
+      expect(networkType).toEqual('2g');
+    });
+
+    jasmine.clock().uninstall();
+  });
+
+  it('should return when window.navigator.connection is undefined', () => {
+    const attributeCustome = '__defineGetter__';
+    window.navigator[attributeCustome]('connection', () => {
+      return undefined;
+    });
+    fixture = TestBed.createComponent(InternetConnectionStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    const statusInit = component.ngOnInit();
+    expect(statusInit).toEqual(undefined);
+  });
+});

src/app/modules/internet-connection-status/internet-connection-status.component.scss

@@ -0,0 +1,85 @@
+import { Component, OnInit, ContentChild, Attribute, OnDestroy} from '@angular/core';
+import { FastDirective} from '../../modules/internet-connection-status/internet-connection-directives/fast.directive';
+import { SlowDirective} from '../../modules/internet-connection-status/internet-connection-directives/slow.directive';
+import { OfflineDirective} from '../../modules/internet-connection-status/internet-connection-directives/offline.directive';
+import { Observable, of, Subscription } from 'rxjs';
+import { take, map } from 'rxjs/operators';
+import { ToastrService } from 'ngx-toastr';
+
+type Connection = {
+  effectiveType: string;
+};
+
+declare global {
+  interface Navigator {
+    connection: {
+      effectiveType: string;
+      addEventListener: (a: any, b: any) => {};
+      removeEventListener: (a: any, b: any) => {};
+    };
+  }
+}
+
+
+@Component({
+  selector: 'app-internet-connection-status',
+  templateUrl: './internet-connection-status.component.html',
+  styleUrls: ['./internet-connection-status.component.scss']
+})
+export class InternetConnectionStatusComponent implements OnInit {
+  isFast = true;
+  connectionType: string;
+  networkType: string;
+  @ContentChild(FastDirective) fast: FastDirective;
+  @ContentChild(SlowDirective) slow: SlowDirective;
+  @ContentChild(OfflineDirective) offline: OfflineDirective;
+
+  private subscription: Subscription;
+
+  constructor(@Attribute('listen') private withChanges: boolean, private toastrService: ToastrService) {
+  }
+
+  connection$ = new Observable((observer) => {
+    const { effectiveType } = navigator.connection;
+    observer.next(effectiveType);
+
+    const onConnectionChange = () => {
+      this.networkType = navigator.connection.effectiveType;
+      observer.next(this.networkType);
+    };
+
+    navigator.connection.addEventListener('change', onConnectionChange);
+
+    return () => {
+      navigator.connection.removeEventListener('change', onConnectionChange);
+      observer.complete();
+    };
+  });
+
+  ngOnInit() {
+    const connection = navigator.connection;
+    console.log('navigator component', connection);
+    if (!connection || !connection.effectiveType) {
+      return;
+    }
+
+    this.subscription = this.connection$
+      .pipe(take(this.withChanges ? Number.POSITIVE_INFINITY : 1))
+      .subscribe((effectiveType: string) => {
+
+        this.connectionType = effectiveType;
+
+        if (/\fast-5g|3g|4g/.test(effectiveType)){
+          this.toastrService.success('You have a good connection');
+          this.isFast = true;
+        }else if (/\slow-2g|2g/.test(effectiveType)) {
+            this.toastrService.warning('Caution your connection is slow');
+            this.isFast = false;
+        } else {
+          this.toastrService.error('You are offline');
+          this.isFast = false;
+        }
+      });
+  }
+
+}