Merge pull request #120 from stratisproject/ui

- Wait on API to load UI
- Add basic error handling to API calls

Breeze.UI/main.ts

@@ -9,6 +9,8 @@ const path = require('path');
 const url = require('url');
 const os = require('os');
 
+var apiProcess;
+
 let serve;
 const args = process.argv.slice(1);
 serve = args.some(val => val === "--serve");
@@ -66,6 +68,7 @@ app.on('window-all-closed', function () {
   // On OS X it is common for applications and their menu bar
   // to stay active until the user quits explicitly with Cmd + Q
   if (process.platform !== 'darwin') {
+    //apiProcess.kill();
     app.quit();
   }
 });
@@ -79,16 +82,15 @@ app.on('activate', function () {
 });
 
 function startApi() {
-  var apiProcess;
-  const spawn = require('child_process').spawn;
+  const exec = require('child_process').exec;
 
   //Start Breeze Daemon
-  let apipath = path.join(__dirname, '..//..//daemon//Breeze.Daemon');
+  let apipath = path.join(__dirname, './/assets//daemon//Breeze.Daemon');
   if (os.platform() === 'win32') {
       apipath = path.join(__dirname, '.\\assets\\daemon\\Breeze.Daemon.exe');
   }
 
-  apiProcess = spawn(apipath + ' light -testnet', {
+  apiProcess = exec(apipath + ' light -testnet', {
       detached: true
   });
 

Breeze.UI/src/app/app.component.html

-<router-outlet></router-outlet>
\ No newline at end of file
+<div *ngIf="loading">Loading...</div>
+<router-outlet *ngIf="!loading"></router-outlet>

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

@@ -3,6 +3,9 @@ import { Router } from '@angular/router';
 
 import { ApiService } from './shared/services/api.service';
 
+import 'rxjs/add/operator/retryWhen';
+import 'rxjs/add/operator/delay';
+
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -13,8 +16,14 @@ export class AppComponent implements OnInit {
   constructor(private router: Router, private apiService: ApiService) {}
   private errorMessage: any;
   private responseMessage: any;
+  private loading: boolean = true;
 
   ngOnInit() {
+    this.apiService.getWalletFiles().retryWhen(errors => errors.delay(2000)).subscribe(() => this.startApp());
+  }
+
+  startApp() {
+    this.loading = false;
     this.router.navigate(['/login']);
   }
 }

Breeze.UI/src/app/login/login.component.ts

@@ -104,10 +104,10 @@ export class LoginComponent implements OnInit {
           }
         },
         error => {
-          let errorMessage = <any>error;
-          if (error.status >= 400) {
-            alert(errorMessage);
-            console.log(errorMessage);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
           }
         }
       )
@@ -125,12 +125,10 @@ export class LoginComponent implements OnInit {
           }
         },
         error => {
-          let errorMessage = <any>error;
-          if (error.status === 403 && error.json().errors[0].message === "Wrong password, please try again.") {
-            alert("Wrong password, try again.");
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
           } else if (error.status >= 400) {
-            alert(errorMessage);
-            console.log(errorMessage);
+            alert(error);
           }
         }
       )

Breeze.UI/src/app/setup/create/create.component.ts

@@ -98,9 +98,10 @@ export class CreateComponent {
           }
         },
         error => {
-          if (error.status >= 400) {
-            let errorMessage = error;
-            console.log(errorMessage);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
           }
         }
       )

Breeze.UI/src/app/setup/recover/recover.component.ts

@@ -112,9 +112,10 @@ export class RecoverComponent implements OnInit {
           }
         },
         error => {
-          if (error.status >= 400) {
-            this.errorMessage = error;
-            console.log(this.errorMessage);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
           }
         }
       );

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

@@ -6,8 +6,6 @@
       <div class="p">Unconfirmed Balance: {{unconfirmedBalance | coinNotation }}</div>
     </div>
     <div class="d-flex flex-column">
-      <!--<div>Current Value</div>
-      <div>Over 9000</div>-->
     </div>
     <div class="d-flex flex-column ml-auto">
       <div>
@@ -28,8 +26,6 @@
           <th>Timestamp</th>
         </thead>
         <tr *ngFor="let transaction of transactions; let i=index">
-          <!--<td *ngIf="{{ transaction.amount }} < 0">SENT</td>
-          <td *ngIf="{{ transaction.amount }} > 0">RECEIVED</td>-->
           <td *ngIf="i<5">{{ transaction.type }}</td>
           <td *ngIf="i<5">{{ transaction.amount | coinNotation }}</td>
           <td *ngIf="i<5">{{ transaction.id }}</td>

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

@@ -50,17 +50,18 @@ export class DashboardComponent {
     this.walletBalanceSubscription = this.apiService.getWalletBalance(walletInfo)
       .subscribe(
         response =>  {
-            if (response.status >= 200 && response.status < 400) {
-                let balanceResponse = response.json();
-                this.confirmedBalance = balanceResponse.balances[0].amountConfirmed;
-                this.unconfirmedBalance = balanceResponse.balances[0].amountUnconfirmed;
-            }
+          if (response.status >= 200 && response.status < 400) {
+              let balanceResponse = response.json();
+              this.confirmedBalance = balanceResponse.balances[0].amountConfirmed;
+              this.unconfirmedBalance = balanceResponse.balances[0].amountUnconfirmed;
+          }
         },
         error => {
-            if (error.status >= 400) {
-                let errorMessage = <any>error;
-                console.log(errorMessage);
-            }
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
+          }
         }
       )
     ;
@@ -78,9 +79,10 @@ export class DashboardComponent {
           }
         },
         error => {
-          if (error.status >= 400) {
-            let errorMessage = <any>error;
-            console.log(errorMessage);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
           }
         }
       )

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

@@ -41,9 +41,10 @@ export class HistoryComponent {
           }
         },
         error => {
-          if (error.status >= 400) {
-            this.errorMessage = <any>error;
-            console.log(this.errorMessage);
+          if (error.status === 0) {
+            alert("Something went wrong while connecting to the API. Please restart the application.");
+          } else if (error.status >= 400) {
+            alert(error);
           }
         }
       )