From a4fd166b1a0181d6dcb360ab19733e5b8e370d04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Varandas?= Date: Mon, 8 Oct 2018 01:38:50 +0100 Subject: [PATCH] feat(Loading Screen): adds caching adds caching for capsules, cores and dragons fix #2 - core dragons and capsules are cached, fix #7 (no need) --- src/pages/capsules/capsules.html | 9 ++++----- src/pages/capsules/capsules.ts | 33 +++++++++++++++----------------- src/pages/cores/cores.html | 11 ++++++----- src/pages/cores/cores.ts | 32 +++++++++++++++++++++++++------ src/pages/dragon/dragon.ts | 20 ++++++++++++------- 5 files changed, 64 insertions(+), 41 deletions(-) diff --git a/src/pages/capsules/capsules.html b/src/pages/capsules/capsules.html index 9e3bb51..4da7761 100644 --- a/src/pages/capsules/capsules.html +++ b/src/pages/capsules/capsules.html @@ -15,12 +15,11 @@ - - \ No newline at end of file diff --git a/src/pages/capsules/capsules.ts b/src/pages/capsules/capsules.ts index e86093f..3c15461 100644 --- 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 + capsules: Array; + searchableCapsules: Array; - 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 = this.spaceXProvider.getCapsules(); + this.cacheService.register('capsules', capsulesObservable) + .mergeMap((cache: Cache) => 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 index aa4e023..6866774 100644 --- a/src/pages/cores/cores.html +++ b/src/pages/cores/cores.html @@ -8,12 +8,13 @@ - - \ No newline at end of file diff --git a/src/pages/cores/cores.ts b/src/pages/cores/cores.ts index 04d0f2a..012209e 100644 --- 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; + searchableCores: Array; + + 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 = this.spaceXProvider.getCores(); + this.cacheService.register('cores', coresObservable) + .mergeMap((cache: Cache) => 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 index 967d7ae..de01d84 100644 --- 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',