2100 - Breeze ICO updates. Introduced monitor and serialDisposable. Now complete

Breeze.UI/src/app/wallet/advanced/advanced.component.ts

 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { Subscription } from 'rxJs/Subscription';
 import { FormGroup, Validators, FormBuilder, AbstractControl } from '@angular/forms';
 import { NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
 
+import './monitor';
 import { AdvancedService } from './advanced.service';
 import { LoadingState } from './loadingState';
+import { SerialDisposable } from './serialDisposable';
 
 @Component({
   selector: 'app-advanced',
@@ -13,9 +14,9 @@ import { LoadingState } from './loadingState';
 })
 export class AdvancedComponent implements OnInit, OnDestroy {
     private addressCount = "";
-    private extPubKeySubs: Subscription;
-    private generateAddressesSubs: Subscription;
-    private resyncSubs: Subscription;
+    private extPubKeySubs = new SerialDisposable();
+    private generateAddressesSubs = new SerialDisposable();
+    private resyncSubs = new SerialDisposable();
     private addresses = new Array<string>();
     private resyncActioned = false;
 
@@ -42,47 +43,25 @@ export class AdvancedComponent implements OnInit, OnDestroy {
         this.loadExtPubKey();
     } 
 
-    public generateAddresses() {
-        this.addresses = new Array<string>();
-        this.generateAddressesLoadingState.loading = true;
-        if (this.generateAddressesSubs) { 
-            this.generateAddressesSubs.unsubscribe(); 
-        }
-        this.generateAddressesSubs = this.advancedService.generateAddresses(Number(this.addressCount))
-                                                         .subscribe(x => this.onGenerateAddresses(x), 
-                                                                    _ => this.generateAddressesLoadingState.errored = true);
-    }
-
-    public resync() {
-        if (this.resyncSubs) {
-            this.resyncSubs.unsubscribe();
-        }
-        this.resyncLoadingState.loading = this.resyncActioned = true;
+    resync() {
+        this.resyncActioned = true;
         const date = new Date(this.resyncDate.year, this.resyncDate.month-1, this.resyncDate.day);
-        this.resyncSubs = this.advancedService.resyncFromDate(date)
-                                              .subscribe(_ => this.onResync(),
-                                                         _ => this.resyncLoadingState.errored = true);
-    }
-
-    private loadExtPubKey() {
-        this.extPubKeyLoadingState.loading = true;
-        this.extPubKeySubs = this.advancedService.getExtPubKey()
-                                                 .subscribe(x => this.onExtPubKey(x), 
-                                                            _ => this.extPubKeyLoadingState.errored = true);
+        this.resyncSubs.disposable = this.advancedService.resyncFromDate(date)
+                                              .monitor(this.resyncLoadingState)
+                                              .subscribe();
     }
 
-    private onExtPubKey(key: string) {
-        this.extPubKey = key; 
-        this.extPubKeyLoadingState.loading = false;
+    generateAddresses() {
+        this.addresses = [];
+        this.generateAddressesSubs.disposable = this.advancedService.generateAddresses(Number(this.addressCount))
+                                                         .monitor(this.generateAddressesLoadingState)
+                                                         .subscribe(x => this.addresses = x);
     }
 
-    private onGenerateAddresses(addresses: string[]) {
-        this.generateAddressesLoadingState.loading = false;
-        this.addresses = addresses;
-    }
-
-    private onResync() {
-        this.resyncLoadingState.loading = false;
+    private loadExtPubKey() {
+        this.extPubKeySubs.disposable = this.advancedService.getExtPubKey()
+                                                 .monitor(this.extPubKeyLoadingState)
+                                                 .subscribe(x => this.extPubKey = x);
     }
 
     private registerFormControls() {
@@ -102,20 +81,13 @@ export class AdvancedComponent implements OnInit, OnDestroy {
 
     private setResyncDates() {
         const now = new Date();
-        this.maxResyncDate = {year: now.getFullYear(), month: now.getMonth()+1, day: now.getDate()}
-        this.minResyncDate = {year: now.getFullYear(), month: 1, day: 1}
+        this.maxResyncDate = { year: now.getFullYear(), month: now.getMonth()+1, day: now.getDate() }
+        this.minResyncDate = { year: now.getFullYear(), month: 1, day: 1 }
     }
 
     ngOnDestroy() {
-        if (this.extPubKeySubs) { 
-            this.extPubKeySubs.unsubscribe(); 
-        }
-        if (this.generateAddressesSubs) { 
-            this.generateAddressesSubs.unsubscribe(); 
-        }
-        if (this.resyncSubs) { 
-            this.resyncSubs.unsubscribe(); 
-        }
+        this.extPubKeySubs.dispose();
+        this.generateAddressesSubs.dispose();
+        this.resyncSubs.dispose();
     }
 }
-

Breeze.UI/src/app/wallet/advanced/monitor.ts

+import { Observable } from 'rxjs/Observable';
+
+import { LoadingState } from './loadingState';
+
+function monitor<T>(this: Observable<T>, loadingState: LoadingState): Observable<T> {
+    return Observable.create(observer => {
+        loadingState.loading = true;
+        loadingState.errored = false;
+        const subs = this.subscribe(x => {
+            loadingState.loading = false;
+            observer.next(x);
+        }, e => {
+            loadingState.loading = false;
+            loadingState.errored = true;
+            observer.error(e);
+        }, () => {
+            loadingState.loading = false;
+            observer.complete();
+        });
+        return () => subs.unsubscribe();
+    });
+  };
+
+  Observable.prototype.monitor = monitor;
+
+  declare module 'rxjs/Observable' {
+    interface Observable<T> {
+        monitor: typeof monitor;
+    }
+}

Breeze.UI/src/app/wallet/advanced/serialDisposable.ts

+import { Subscription } from 'rxJs/Subscription';
+
+export class SerialDisposable {
+    private subscription: Subscription;
+    set disposable(value: Subscription) {
+        this.dispose();
+        this.subscription = value;
+    }
+    public dispose() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+            this.subscription = null;
+        }
+    }
+}
\ No newline at end of file

Breeze.UI/src/app/wallet/history/history.component.ts

@@ -48,8 +48,9 @@ export class HistoryComponent {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            if (response.json().transactionsHistory.length > 0) {
-              historyResponse = response.json().transactionsHistory;
+            const json = response.json();
+            if (json && json.transactionsHistory) {
+              historyResponse = json.transactionsHistory;
               this.getTransactionInfo(historyResponse);
             }
           }

Breeze.UI/tsconfig.json

@@ -17,7 +17,7 @@
     },
     "types": [
       "node",
-      "jasmine"
+      "jasmine",
     ],
     "typeRoots": [
       "node_modules/@types"