fix(billing): fixed current consumption + home page billing requests order (#19)

Author: Matthias Prost

ios/App/App.xcodeproj/project.pbxproj

@@ -347,7 +347,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = 8754A6XKT5;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
@@ -370,7 +370,7 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 2;
 				DEVELOPMENT_TEAM = 8754A6XKT5;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 11.0;

src/app/pages/billing/billing.page.html

@@ -19,10 +19,9 @@
     <ion-item-group>
       <ion-item-divider class="title" color="secondary">
         <div style="width: 100%">
-          <div style="float: left">Current Invoice</div>
+          <div style="float: left">Current Consumption</div>
           <div class="last-update">
-            Updated at <br />{{ currentInvoice.last_update | date:'h:mm a,
-            dd/MM/yy' }}
+            Updated at <br />{{ currentInvoice.last_update | date:'h:mm a, dd/MM/yy' }}
           </div>
         </div>
       </ion-item-divider>
@@ -50,7 +49,7 @@
 
     <ion-item-group>
       <ion-item-divider class="title" color="secondary"
-        >Older Invoices</ion-item-divider
+        >Past Invoices</ion-item-divider
       >
       <ion-item *ngFor="let billing of billings" lines="full">
         <div class="information-title">
@@ -72,7 +71,7 @@
   </div>
   <div
     class="not-found ion-text-center ion-margin-top"
-    *ngIf="billings && billings.length === 0"
+    *ngIf="billings && billings.length === 0 && !isLoading"
   >
     <img alt="no_server" src="../../../../assets/img/invoice.svg" />
     <p>No invoice available</p>

src/app/pages/billing/billing.page.ts

@@ -1,34 +1,31 @@
-import { Component } from "@angular/core";
-import { Plugins, StatusBarStyle } from "@capacitor/core";
+import {Component} from '@angular/core';
+import {Plugins, StatusBarStyle} from '@capacitor/core';
 
-import { BillingDto } from "../../services/billing/billing.dto";
-import { BillingService } from "../../services/billing/billing.service";
+import {BillingDto} from '../../services/billing/billing.dto';
+import {BillingService} from '../../services/billing/billing.service';
 
-const { StatusBar } = Plugins;
+const {StatusBar} = Plugins;
 
 @Component({
-  selector: "app-billing",
-  templateUrl: "./billing.page.html",
-  styleUrls: ["./billing.page.scss"],
+  selector: 'app-billing',
+  templateUrl: './billing.page.html',
+  styleUrls: ['./billing.page.scss'],
 })
 export class BillingPage {
-  public billings: BillingDto[];
+  public billings: BillingDto[] = [];
   public currentInvoice: BillingDto;
   public isLoading = true;
   public billingError = false;
 
-  constructor(private billingService: BillingService) {}
+  constructor(private billingService: BillingService) {
+  }
 
   ionViewDidEnter(): void {
-    StatusBar.setStyle({ style: StatusBarStyle.Light });
+    StatusBar.setStyle({style: StatusBarStyle.Light});
     this.refresh()
-      .then(() => {
-        this.isLoading = false;
-      })
       .catch(() => {
-        this.isLoading = false;
         this.billingError = true;
-      });
+      }).finally(() => this.isLoading = false);
   }
 
   public doRefresh(refresher) {
@@ -43,8 +40,9 @@ export class BillingPage {
   }
 
   private async refresh(): Promise<any> {
-    this.billings = await this.billingService.getBillingList(100)
-    this.billings = this.billings.slice(1, this.billings.length);
-    this.currentInvoice = this.billings[0];
+    const billings = await this.billingService.getBillingList(100);
+    this.currentInvoice = billings[0];
+    this.billings = billings.slice(1, billings.length);
+    console.log(this.billings)
   }
 }

src/app/pages/home/home.page.ts

@@ -75,6 +75,7 @@ export class HomePage {
   public async refreshBilling(): Promise<any> {
     try {
       this.billings = await this.billingService.getBillingList(6);
+      this.billingError = false;
     } catch (e) {
       this.billingError = true;
 
@@ -109,7 +110,8 @@ export class HomePage {
   }
 
   public async refresh(): Promise<any> {
-    await Promise.all([this.refreshBilling(), this.refreshServers()])
+    await this.refreshServers()
+    await this.refreshBilling()
   }
 
   private async autoRefresh() {

src/app/services/billing/billing.service.ts

@@ -11,12 +11,6 @@ import { BillingDto } from "./billing.dto";
 export class BillingService {
   constructor(private api: ApiService, private storage: Storage) {}
 
-  public getAllBilling(): Promise<BillingDto> {
-    const ApiUrl = this.api.getBillingApiUrl();
-
-    return this.api.get<BillingDto>(`${ApiUrl}/invoices`)
-  }
-
   public async getBillingList(value: number): Promise<any> {
     const ApiUrl = this.api.getBillingApiUrl();