Add polling

Breeze.UI/src/app/shared/services/api.service.ts

@@ -2,7 +2,9 @@ import { Injectable } from '@angular/core';
 import { Http, Headers, Response, RequestOptions, URLSearchParams} from '@angular/http';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/switchMap';
 import 'rxjs/add/operator/catch';
+import "rxjs/add/observable/interval";
 
 import { WalletCreation } from '../classes/wallet-creation';
 import { WalletRecovery } from '../classes/wallet-recovery';
@@ -22,6 +24,7 @@ export class ApiService {
     private mockApiUrl = 'http://localhost:3000/api';
     private webApiUrl = 'http://localhost:5000/api';
     private headers = new Headers({'Content-Type': 'application/json'});
+    private pollingInterval = 2000;
 
     /**
      * Gets available wallets at the default path
@@ -76,9 +79,14 @@ export class ApiService {
       params.set('walletName', data.walletName);
       params.set('coinType', data.coinType.toString());
 
-      return this.http
-        .get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
+      return Observable
+        .interval(this.pollingInterval)
+        .switchMap(() => this.http.get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params})))
         .map((response: Response) => response);
+
+      // return this.http
+      //   .get(this.webApiUrl + '/wallet/balance', new RequestOptions({headers: this.headers, search: params}))
+      //   .map((response: Response) => response);
     }
 
     /**
@@ -89,9 +97,14 @@ export class ApiService {
       params.set('walletName', data.walletName);
       params.set('coinType', data.coinType.toString());
 
-      return this.http
-        .get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
+      return Observable
+        .interval(this.pollingInterval)
+        .switchMap(() => this.http.get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params})))
         .map((response: Response) => response);
+
+      // return this.http
+      //   .get(this.webApiUrl + '/wallet/history', new RequestOptions({headers: this.headers, search: params}))
+      //   .map((response: Response) => response);
     }
 
     /**

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

-import { Component, OnInit, Input } from '@angular/core';
-import {NgbModal, NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';
+import { Component, OnInit, OnDestroy, Input } from '@angular/core';
+import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
@@ -8,6 +8,10 @@ import { WalletInfo } from '../../shared/classes/wallet-info';
 import { SendComponent } from '../send/send.component';
 import { ReceiveComponent } from '../receive/receive.component';
 
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/first';
+
 @Component({
   selector: 'dashboard-component',
   templateUrl: './dashboard.component.html',
@@ -20,10 +24,17 @@ export class DashboardComponent {
   private confirmedBalance: number;
   private unconfirmedBalance: number;
   private transactions: any;
+  private walletBalanceSubscription: Subscription;
+  private walletHistorySubscription: Subscription;
 
   ngOnInit() {
-      this.getWalletBalance();
-      this.getHistory();
+    this.getWalletBalance();
+    this.getHistory();
+  };
+
+  ngOnDestroy() {
+    this.walletBalanceSubscription.unsubscribe();
+    this.walletHistorySubscription.unsubscribe();
   };
 
   private openSendDialog() {
@@ -36,8 +47,9 @@ export class DashboardComponent {
 
   private getWalletBalance() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletBalance(walletInfo)
-        .subscribe(
+    this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
+      .first()
+      .subscribe(
             response =>  {
                 if (response.status >= 200 && response.status < 400) {
                     let balanceResponse = response.json();
@@ -56,7 +68,7 @@ export class DashboardComponent {
 
   private getHistory() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletHistory(walletInfo)
+    this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 
 import { ApiService } from '../../shared/services/api.service';
 import { GlobalService } from '../../shared/services/global.service';
 
 import { WalletInfo } from '../../shared/classes/wallet-info';
 
+import { Observable } from 'rxjs/Rx';
+import { Subscription } from 'rxjs/Subscription';
+
 @Component({
   selector: 'history-component',
   templateUrl: './history.component.html',
@@ -16,14 +19,19 @@ export class HistoryComponent {
 
   private transactions: any;
   private errorMessage: string;
+  private walletHistorySubscription: Subscription;
 
   ngOnInit() {
     this.getHistory();
   }
 
+  ngOnDestroy() {
+    this.walletHistorySubscription.unsubscribe();
+  }
+
   private getHistory() {
     let walletInfo = new WalletInfo(this.globalService.getWalletName(), this.globalService.getCoinType())
-    this.apiService.getWalletHistory(walletInfo)
+    this.walletHistorySubscription = this.apiService.getWalletHistory(walletInfo)
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {