feat(Loading Screen): adds caching

adds caching for capsules, cores and dragons fix #2 - core dragons and capsules are cached, fix #7 (no need)
AndreVarandas · Oct 8, 2018 · a4fd166 · a4fd166
1 parent 84c7c48
commit a4fd166
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 41 deletions.
diff --git a/src/pages/capsules/capsules.html b/src/pages/capsules/capsules.html
@@ -15,12 +15,11 @@
 
 <ion-content>
   <ion-searchbar (ionInput)="onSearchBarInput($event)"></ion-searchbar>
-  <ion-list>
-    <button ion-item *ngFor="let capsule of capsules" (click)="capsuleTapped($event, capsule)">
+  <ion-list no-lines>
+    <button ion-item *ngFor="let capsule of searchableCapsules" (click)="capsuleTapped($event, capsule)">
       <h2>{{capsule.capsule_serial}} - {{ capsule.capsule_id }}</h2>
-      <p>
-        {{capsule.details}}
-      </p>
+      <p item-end>{{ capsule.status }}</p>
+      <p>{{capsule.details}}</p>
     </button>
   </ion-list>
 </ion-content>
diff --git a/src/pages/capsules/capsules.ts b/src/pages/capsules/capsules.ts
@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { Observable } from 'rxjs/Observable';
+import { CacheService, Cache } from 'ionic-cache-observable';
 
 import { Capsule } from '../../models/Capsule';
 import { SpaceXProvider } from '../../providers/space-x/space-x';
@@ -18,24 +20,22 @@ import { SpaceXProvider } from '../../providers/space-x/space-x';
 })
 export class CapsulesPage {
 
-  capsules: Array<Capsule>
+  capsules: Array<Capsule>;
+  searchableCapsules: Array<Capsule>;
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private spaceXProvider: SpaceXProvider) {
+  constructor(public navCtrl: NavController,
+    public navParams: NavParams,
+    private spaceXProvider: SpaceXProvider,
+    private cacheService: CacheService) {
 
-    this.getCapsules();
-
-  }
-
-  async getCapsules() {
-    this.spaceXProvider.getCapsules()
+    const capsulesObservable: Observable<Capsule[]> = this.spaceXProvider.getCapsules();
+    this.cacheService.register('capsules', capsulesObservable)
+      .mergeMap((cache: Cache<Capsule[]>) => cache.get())
       .subscribe((capsules) => {
         this.capsules = capsules;
-        console.log(this.capsules);
+        this.searchableCapsules = this.capsules;
       });
-  }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad CapsulesPage');
   }
 
   capsuleTapped(event, capsule) {
@@ -45,17 +45,14 @@ export class CapsulesPage {
   }
 
   onSearchBarInput(event) {
-    // TODO: Cache the capsules result. Use the cached ones to filter.
-    // As the getCapsules is async, the filter is always applied first, and
-    // we cant call this.getCapsules() here.
 
+    this.searchableCapsules = this.capsules;
     const value = event.target.value;
+
     if (value && value.trim() !== '') {
-      this.capsules = this.capsules.filter(capsule => {
+      this.searchableCapsules = this.capsules.filter(capsule => {
         return (capsule.capsule_serial.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
       });
-    } else {
-      this.getCapsules();
     }
   }
 

diff --git a/src/pages/cores/cores.html b/src/pages/cores/cores.html
@@ -8,12 +8,13 @@
   </ion-header>
 
   <ion-content>
-    <ion-list>
-      <button ion-item *ngFor="let core of cores" (click)="coreTapped($event, core)">
+    <ion-searchbar (ionInput)="onSearchBarInput($event)"></ion-searchbar>
+    <ion-list no-lines>
+      <button ion-item *ngFor="let core of searchableCores" (click)="coreTapped($event, core)">
         <h2>{{core.core_serial}}</h2>
-        <p>
-          {{core.details}}
-        </p>
+        <p item-end>{{ core.status }}</p>
+        <p>{{ core.original_launch | date: 'dd/MM/yyyy' }}</p>
+        <p>{{core.details}}</p>
       </button>
     </ion-list>
   </ion-content>
diff --git a/src/pages/cores/cores.ts b/src/pages/cores/cores.ts
@@ -1,9 +1,12 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
+import { Observable } from 'rxjs/Observable';
+import { CacheService, Cache } from 'ionic-cache-observable';
 
 import { SpaceXProvider } from '../../providers/space-x/space-x';
 import { Core } from '../../models/Core';
 
+
 /**
  * Generated class for the CoresPage page.
  *
@@ -18,15 +21,32 @@ import { Core } from '../../models/Core';
 export class CoresPage {
 
   cores: Array<Core>;
+  searchableCores: Array<Core>;
+
+  constructor(public navCtrl: NavController,
+    public navParams: NavParams,
+    private spaceXProvider: SpaceXProvider,
+    private cacheService: CacheService) {
 
-  constructor(public navCtrl: NavController, public navParams: NavParams, private spaceXProvider: SpaceXProvider) {
+    const coresObservable: Observable<Core[]> = this.spaceXProvider.getCores();
+    this.cacheService.register('cores', coresObservable)
+      .mergeMap((cache: Cache<Core[]>) => cache.get())
+      .subscribe((cores) => {
+        this.cores = cores;
+        this.searchableCores = this.cores;
+      });
 
-    this.spaceXProvider.getCores()
-      .subscribe((cores) => this.cores = cores);
   }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad CoresPage');
+  onSearchBarInput(event) {
+    this.searchableCores = this.cores;
+    const value = event.target.value;
+
+    if (value && value.trim() !== '') {
+      this.searchableCores = this.cores.filter(core => {
+        return (core.core_serial.toLocaleLowerCase().indexOf(value.toLocaleLowerCase()) > -1);
+      });
+    }
   }
 
   coreTapped(event, core) {

diff --git a/src/pages/dragon/dragon.ts b/src/pages/dragon/dragon.ts
@@ -1,10 +1,11 @@
 import { Component } from '@angular/core';
-import { IonicPage, NavController, NavParams } from 'ionic-angular';
+import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
 import { InAppBrowser, InAppBrowserOptions } from '@ionic-native/in-app-browser';
 
 import { Dragon } from '../../models/Dragon';
 import { SpaceXProvider } from '../../providers/space-x/space-x';
 
+
 /**
  * Generated class for the DragonPage page.
  *
@@ -25,22 +26,27 @@ export class DragonPage {
   constructor(public navCtrl: NavController,
     public navParams: NavParams,
     private iab: InAppBrowser,
-    private spaceXProvider: SpaceXProvider) {
+    private spaceXProvider: SpaceXProvider,
+    private loadingCtrl: LoadingController) {
+
+    const loader = this.loadingCtrl.create({
+      content: 'Please wait...'
+    });
 
     this.dragonId = this.navParams.get('dragonId') || null;
     this.dragon = this.navParams.get('dragon') || null;
 
     if (this.dragonId) {
+      loader.present();
       this.spaceXProvider.getDragon(this.dragonId)
-        .subscribe(dragon => this.dragon = dragon);
+        .subscribe(dragon => {
+          this.dragon = dragon
+          loader.dismiss();
+        });
     }
 
   }
 
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad DragonPage');
-  }
-
   openWikipedia(url) {
     const options: InAppBrowserOptions = {
       location: 'no',