Feature/more discreet data provider warning (#589)

* Upgrade http-status-codes to version 2.2.0

* Make the data provider warning more discreet

* Update changelog

apps/client/src/app/components/home-overview/home-overview.component.ts

@@ -29,6 +29,7 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
     { label: 'Max', value: 'max' }
   ];
   public deviceType: string;
+  public hasError: boolean;
   public hasImpersonationId: boolean;
   public historicalDataItems: LineChartItem[];
   public isAllTimeHigh: boolean;
@@ -116,7 +117,8 @@ export class HomeOverviewComponent implements OnDestroy, OnInit {
       .fetchPortfolioPerformance({ range: this.dateRange })
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((response) => {
-        this.performance = response;
+        this.hasError = response.hasErrors;
+        this.performance = response.performance;
         this.isLoadingPerformance = false;
 
         this.changeDetectorRef.markForCheck();

apps/client/src/app/components/home-overview/home-overview.html

@@ -1,15 +1,5 @@
 <div
-  class="
-    align-items-center
-    container
-    d-flex
-    flex-column
-    h-100
-    justify-content-center
-    overview
-    p-0
-    position-relative
-  "
+  class="align-items-center container d-flex flex-column h-100 justify-content-center overview p-0 position-relative"
 >
   <div class="row w-100">
     <div class="chart-container col">
@@ -37,6 +27,8 @@
       <gf-portfolio-performance
         class="pb-4"
         [baseCurrency]="user?.settings?.baseCurrency"
+        [deviceType]="deviceType"
+        [hasError]="hasError"
         [isAllTimeHigh]="isAllTimeHigh"
         [isAllTimeLow]="isAllTimeLow"
         [isLoading]="isLoadingPerformance"

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.html

@@ -1,12 +1,15 @@
 <div class="container p-0">
-  <div
-    class="no-gutters row"
-    [ngClass]="{
-      'text-danger': isAllTimeLow,
-      'text-success': isAllTimeHigh
-    }"
-  >
-    <div class="flex-grow-1"></div>
+  <div class="no-gutters row">
+    <div
+      class="flex-grow-1 status text-muted text-right"
+      [title]="
+        hasError
+          ? 'Sorry! Our data provider partner is experiencing the hiccups.'
+          : ''
+      "
+    >
+      <ion-icon *ngIf="hasError" name="alert-circle-outline"></ion-icon>
+    </div>
     <div *ngIf="isLoading" class="align-items-center d-flex">
       <ngx-skeleton-loader
         animation="pulse"
@@ -20,6 +23,10 @@
     <div
       class="display-4 font-weight-bold m-0 text-center value-container"
       [hidden]="isLoading"
+      [ngClass]="{
+        'text-danger': isAllTimeLow,
+        'text-success': isAllTimeHigh
+      }"
     >
       <span #value id="value"></span>
     </div>

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.scss

@@ -1,6 +1,10 @@
 :host {
   display: block;
 
+  .status {
+    font-size: 1.33rem;
+  }
+
   .value-container {
     #value {
       font-variant-numeric: tabular-nums;

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -19,6 +19,8 @@ import { isNumber } from 'lodash';
 })
 export class PortfolioPerformanceComponent implements OnChanges, OnInit {
   @Input() baseCurrency: string;
+  @Input() deviceType: string;
+  @Input() hasError: boolean;
   @Input() isAllTimeHigh: boolean;
   @Input() isAllTimeLow: boolean;
   @Input() isLoading: boolean;
@@ -44,7 +46,11 @@ export class PortfolioPerformanceComponent implements OnChanges, OnInit {
         this.unit = this.baseCurrency;
 
         new CountUp('value', this.performance?.currentValue, {
-          decimalPlaces: 2,
+          decimalPlaces:
+            this.deviceType === 'mobile' &&
+            this.performance?.currentValue >= 100000
+              ? 0
+              : 2,
           duration: 1,
           separator: `'`
         }).start();

apps/client/src/app/core/http-response.interceptor.ts

@@ -4,8 +4,7 @@ import {
   HttpEvent,
   HttpHandler,
   HttpInterceptor,
-  HttpRequest,
-  HttpResponse
+  HttpRequest
 } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import {
@@ -43,26 +42,6 @@ export class HttpResponseInterceptor implements HttpInterceptor {
   ): Observable<HttpEvent<any>> {
     return next.handle(request).pipe(
       tap((event: HttpEvent<any>) => {
-        if (event instanceof HttpResponse) {
-          if (event.status === StatusCodes.ACCEPTED) {
-            if (!this.snackBarRef) {
-              this.snackBarRef = this.snackBar.open(
-                'Sorry! Our data provider partner is experiencing a mild case of the hiccups ;(',
-                'Try again?',
-                { duration: 6000 }
-              );
-
-              this.snackBarRef.afterDismissed().subscribe(() => {
-                this.snackBarRef = undefined;
-              });
-
-              this.snackBarRef.onAction().subscribe(() => {
-                window.location.reload();
-              });
-            }
-          }
-        }
-
         return event;
       }),
       catchError((error: HttpErrorResponse) => {

apps/client/src/app/services/data.service.ts

@@ -181,7 +181,10 @@ export class DataService {
   }
 
   public fetchPortfolioPerformance(aParams: { [param: string]: any }) {
-    return this.http.get<PortfolioPerformance>('/api/portfolio/performance', {
+    return this.http.get<{
+      hasErrors: boolean;
+      performance: PortfolioPerformance;
+    }>('/api/portfolio/performance', {
       params: aParams
     });
   }