Merge pull request bitpay#2051 from rastajpa/feat/error-messages

[insight-previous] FEAT: Error messages

Author: matiu

packages/insight-previous/src/components/error/error.html

@@ -0,0 +1,5 @@
+<ion-row class="error-message">
+  <ion-col col-12>
+    {{ message }}
+  </ion-col>
+</ion-row>

packages/insight-previous/src/components/error/error.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { IonicModule } from 'ionic-angular';
+import { ErrorComponent } from './error';
+
+@NgModule({
+  declarations: [ErrorComponent],
+  imports: [IonicModule],
+  exports: [ErrorComponent]
+})
+export class ErrorComponentModule {}

packages/insight-previous/src/components/error/error.scss

@@ -0,0 +1,10 @@
+error {
+  .error-message {
+    background-color: #f2dede;
+    border: 1px solid #ebccd1;
+    color: #a94442;
+    border-radius: 3px;
+    margin: 5px;
+    padding: 5px;
+  }
+}

packages/insight-previous/src/components/error/error.ts

@@ -0,0 +1,10 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'error',
+  templateUrl: 'error.html'
+})
+export class ErrorComponent {
+  @Input()
+  public message: string;
+}

packages/insight-previous/src/components/latest-blocks/latest-blocks.html

@@ -1,4 +1,5 @@
-<div>
+<error [message]="errorMessage" *ngIf="errorMessage"></error>
+<div *ngIf="!errorMessage">
   <ion-grid class="grid--table">
 
     <ion-row>

packages/insight-previous/src/components/latest-blocks/latest-blocks.module.ts

@@ -2,11 +2,17 @@ import { NgModule } from '@angular/core';
 import { MomentModule } from 'angular2-moment';
 import { IonicModule } from 'ionic-angular';
 import { LoaderComponentModule } from '../../components/loader/loader.module';
+import { ErrorComponentModule } from '../error/error.module';
 import { LatestBlocksComponent } from './latest-blocks';
 
 @NgModule({
   declarations: [LatestBlocksComponent],
-  imports: [IonicModule, MomentModule, LoaderComponentModule],
+  imports: [
+    IonicModule,
+    MomentModule,
+    LoaderComponentModule,
+    ErrorComponentModule
+  ],
   exports: [LatestBlocksComponent]
 })
 export class LatestBlocksComponentModule {}

packages/insight-previous/src/components/latest-blocks/latest-blocks.ts

@@ -25,6 +25,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
   private reloadInterval: any;
 
   public subscriber: Subscription;
+  public errorMessage: string;
 
   constructor(
     private blocksProvider: BlocksProvider,
@@ -60,6 +61,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
         this.subscriber.unsubscribe();
         clearInterval(this.reloadInterval);
         this.logger.error(err._body);
+        this.errorMessage = err;
         this.loading = false;
       }
     );
@@ -77,6 +79,7 @@ export class LatestBlocksComponent implements OnInit, OnDestroy {
       },
       err => {
         this.logger.error(err);
+        this.errorMessage = err;
         this.loading = false;
       }
     );

packages/insight-previous/src/pages/address/address.html

@@ -7,7 +7,9 @@
 
       <loader *ngIf="loading" [type]="'title'"></loader>
 
-      <div *ngIf="!loading">
+      <error [message]="errorMessage" *ngIf="!loading && errorMessage "></error>
+
+      <div *ngIf="!loading && !errorMessage">
         <h1>Address <small>{{ getConvertedNumber(address.balance) | number:'1.0-8' }}
             {{ currencyProvider.currencySymbol }}</small></h1>
         <p class="ellipsis">{{ address.addrStr }}</p>

packages/insight-previous/src/pages/address/address.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { QRCodeModule } from 'angular2-qrcode';
 import { IonicPageModule } from 'ionic-angular';
 import { CoinListComponentModule } from '../../components/coin-list/coin-list.module';
+import { ErrorComponentModule } from '../../components/error/error.module';
 import { FooterComponentModule } from '../../components/footer/footer.module';
 import { HeadNavComponentModule } from '../../components/head-nav/head-nav.module';
 import { LoaderComponentModule } from '../../components/loader/loader.module';
@@ -17,7 +18,8 @@ import { AddressPage } from './address';
     FooterComponentModule,
     HeadNavComponentModule,
     QRCodeModule,
-    LoaderComponentModule
+    LoaderComponentModule,
+    ErrorComponentModule
   ],
   exports: [AddressPage]
 })

packages/insight-previous/src/pages/address/address.ts

@@ -23,6 +23,7 @@ export class AddressPage {
   private chainNetwork: ChainNetwork;
   public address: any = {};
   public nroTransactions = 0;
+  public errorMessage: string;
 
   constructor(
     public navParams: NavParams,
@@ -67,6 +68,8 @@ export class AddressPage {
       },
       err => {
         this.logger.error(err);
+        this.errorMessage = err;
+        this.loading = false;
       }
     );
   }