basic marketplace caching

ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.html

@@ -12,9 +12,9 @@
 
 <ion-content class="ion-padding-bottom">
 
-  <ion-spinner *ngIf="loading; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+  <ion-spinner *ngIf="!aaService.pkgs[pkgId]" class="center" name="lines" color="warning"></ion-spinner>
 
-  <ng-template #loaded>
+  <ng-container *ngIf="aaService.pkgs[pkgId] as pkg">
     <ion-item *ngIf="error" style="margin-bottom: 16px;">
       <ion-text class="ion-text-wrap" color="danger">{{ error }}</ion-text>
     </ion-item>
@@ -157,5 +157,5 @@
       </ion-item>
     </ion-item-group>
 
-  </ng-template>
+  </ng-container>
 </ion-content>

ui/src/app/pages/apps-routes/app-available-show/app-available-show.page.ts

@@ -1,6 +1,5 @@
 import { Component } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { ApiService } from 'src/app/services/api/api.service'
 import { AlertController, ModalController, NavController, PopoverController } from '@ionic/angular'
 import { Recommendation } from 'src/app/components/recommendation-button/recommendation-button.component'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
@@ -9,10 +8,9 @@ import { InformationPopoverComponent } from 'src/app/components/information-popo
 import { Emver } from 'src/app/services/emver.service'
 import { displayEmver } from 'src/app/pipes/emver.pipe'
 import { pauseFor } from 'src/app/util/misc.util'
-import { AvailableShow } from 'src/app/services/api/api-types'
 import { PatchDbModel } from 'src/app/models/patch-db/patch-db-model'
 import { PackageState } from 'src/app/models/patch-db/data-model'
-import { ReleaseNoteModel } from '../release-notes/release-notes.model'
+import { AppAvailableService } from '../app-available.service'
 
 @Component({
   selector: 'app-available-show',
@@ -20,9 +18,7 @@ import { ReleaseNoteModel } from '../release-notes/release-notes.model'
   styleUrls: ['./app-available-show.page.scss'],
 })
 export class AppAvailableShowPage {
-  loading = true
   error = ''
-  pkg: AvailableShow
   pkgId: string
 
   PackageState = PackageState
@@ -34,7 +30,6 @@ export class AppAvailableShowPage {
 
   constructor (
     private readonly route: ActivatedRoute,
-    private readonly apiService: ApiService,
     private readonly alertCtrl: AlertController,
     private readonly modalCtrl: ModalController,
     private readonly wizardBaker: WizardBaker,
@@ -42,25 +37,21 @@ export class AppAvailableShowPage {
     private readonly popoverController: PopoverController,
     private readonly emver: Emver,
     public readonly patch: PatchDbModel,
-    public releaseNotesModel: ReleaseNoteModel,
+    public aaService: AppAvailableService,
   ) { }
 
   async ngOnInit () {
-    this.pkgId = this.route.snapshot.paramMap.get('pkgId') as string
     this.rec = history.state && history.state.installRec as Recommendation
     this.getPkg()
   }
 
   async getPkg (version?: string): Promise<void> {
-    this.loading = true
+    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
     try {
-      this.pkg = await this.apiService.getAvailableShow({ id: this.pkgId, version })
-      this.releaseNotesModel.releaseNotes = this.pkg['release-notes']
+      await this.aaService.setPkg(this.pkgId, version)
     } catch (e) {
       console.error(e)
       this.error = e.message
-    } finally {
-      this.loading = false
     }
   }
 
@@ -82,13 +73,13 @@ export class AppAvailableShowPage {
     const alert = await this.alertCtrl.create({
       header: 'Versions',
       backdropDismiss: false,
-      inputs: this.pkg.versions.sort((a, b) => -1 * this.emver.compare(a, b)).map(v => {
+      inputs: this.aaService.pkgs[this.pkgId].versions.sort((a, b) => -1 * this.emver.compare(a, b)).map(v => {
         return {
           name: v, // for CSS
           type: 'radio',
           label: displayEmver(v), // appearance on screen
           value: v, // literal SEM version value
-          checked: this.pkg.manifest.version === v,
+          checked: this.aaService.pkgs[this.pkgId].manifest.version === v,
         }
       }),
       buttons: [
@@ -108,7 +99,7 @@ export class AppAvailableShowPage {
   }
 
   async install () {
-    const { id, title, version, dependencies, alerts } = this.pkg.manifest
+    const { id, title, version, dependencies, alerts } = this.aaService.pkgs[this.pkgId].manifest
     const { cancelled } = await wizardModal(
       this.modalCtrl,
       this.wizardBaker.install({
@@ -124,7 +115,7 @@ export class AppAvailableShowPage {
   }
 
   async update (action: 'update' | 'downgrade') {
-    const { id, title, version, dependencies, alerts } = this.pkg.manifest
+    const { id, title, version, dependencies, alerts } = this.aaService.pkgs[this.pkgId].manifest
     const value = {
       id,
       title,

ui/src/app/pages/apps-routes/app-available.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core'
+import { AvailableShow } from 'src/app/services/api/api-types'
+import { ApiService } from 'src/app/services/api/api.service'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppAvailableService {
+  pkgs: { [id: string]: AvailableShow } = { }
+
+  constructor (
+    private readonly apiService: ApiService,
+  ) { }
+
+  async setPkg (id: string, version?: string): Promise<void> {
+    this.pkgs[id] = await this.apiService.getAvailableShow({ id, version })
+  }
+}
+
+

ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.module.ts

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { Routes, RouterModule } from '@angular/router'
 import { IonicModule } from '@ionic/angular'
-import { ReleaseNotes } from './release-notes.page'
+import { AppReleaseNotes } from './app-release-notes.page'
 import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-back.component.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
 
 const routes: Routes = [
   {
     path: '',
-    component: ReleaseNotes,
+    component: AppReleaseNotes,
   },
 ]
 
@@ -21,6 +21,6 @@ const routes: Routes = [
     PwaBackComponentModule,
     SharingModule,
   ],
-  declarations: [ReleaseNotes],
+  declarations: [AppReleaseNotes],
 })
 export class ReleaseNotesModule { }

ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.html

@@ -8,12 +8,12 @@
 </ion-header>
 
 <ion-content>
-  <ion-spinner *ngIf="!releaseNotesModel.releaseNotes; else loaded" class="center" name="lines" color="warning"></ion-spinner>
+  <ion-spinner *ngIf="!aaService.pkgs[pkgId]; else loaded" class="center" name="lines" color="warning"></ion-spinner>
 
   <ng-template #loaded>
-    <div *ngFor="let note of releaseNotesModel.releaseNotes | keyvalue : asIsOrder">
+    <div *ngFor="let note of aaService.pkgs[pkgId]['release-notes'] | keyvalue : asIsOrder">
       <ion-button (click)="setSelected(note.key)"  expand="full" color="light" style="height: 50px;" >
-        <p style="position: absolute; left: 10px;">{{note.key | displayEmver}}</p>
+        <p style="position: absolute; left: 10px;">{{ note.key | displayEmver }}</p>
       </ion-button>
       <ion-card *ngIf="selected === note.key" class="acc-text" color="light" >
         <ion-text id='release-notes' [innerHTML]="note.value | markdown"></ion-text>

ui/src/app/pages/apps-routes/app-release-notes/app-release-notes.page.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core'
+import { ActivatedRoute } from '@angular/router'
+import { AppAvailableService } from '../app-available.service'
+
+@Component({
+  selector: 'app-release-notes',
+  templateUrl: './app-release-notes.page.html',
+  styleUrls: ['./app-release-notes.page.scss'],
+})
+export class AppReleaseNotes {
+  error = ''
+  selected: string
+  pkgId: string
+
+  constructor (
+    private readonly route: ActivatedRoute,
+    public aaService: AppAvailableService,
+  ) { }
+
+  ngOnInit () {
+    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
+    const version = this.route.snapshot.paramMap.get('version')
+    if (!this.aaService.pkgs[this.pkgId]) {
+      this.aaService.setPkg(this.pkgId, version)
+    }
+  }
+
+  setSelected (selected: string) {
+    if (this.selected === selected) {
+      this.selected = null
+    } else {
+      this.selected = selected
+    }
+  }
+
+  asIsOrder (a: any, b: any) {
+    return 0
+  }
+}

ui/src/app/pages/apps-routes/apps-routing.module.ts

@@ -65,7 +65,7 @@ const routes: Routes = [
   },
   {
     path: 'marketplace/:pkgId/notes',
-    loadChildren: () => import('./release-notes/release-notes.module').then(m => m.ReleaseNotesModule),
+    loadChildren: () => import('./app-release-notes/app-release-notes.module').then(m => m.ReleaseNotesModule),
   },
 ]
 

ui/src/app/pages/apps-routes/release-notes/release-notes.model.ts

@@ -1,12 +0,0 @@
-import { Injectable } from '@angular/core'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class ReleaseNoteModel {
-  releaseNotes: { [version: string]: string}
-
-  constructor () { }
-}
-
-

ui/src/app/pages/apps-routes/release-notes/release-notes.page.ts

@@ -1,50 +0,0 @@
-import { Component } from '@angular/core'
-import { ActivatedRoute } from '@angular/router'
-import { ApiService } from 'src/app/services/api/api.service'
-import { ReleaseNoteModel } from './release-notes.model'
-
-@Component({
-  selector: 'release-notes',
-  templateUrl: './release-notes.page.html',
-  styleUrls: ['./release-notes.page.scss'],
-})
-export class ReleaseNotes {
-  error = ''
-  pkgId: string
-  selected: string
-
-  constructor (
-    private readonly route: ActivatedRoute,
-    private readonly apiService: ApiService,
-    public releaseNotesModel: ReleaseNoteModel,
-  ) { }
-
-  ngOnInit () {
-    this.pkgId = this.route.snapshot.paramMap.get('pkgId')
-    if (!this.releaseNotesModel.releaseNotes) {
-      this.getReleaseNotes()
-    }
-  }
-
-  async getReleaseNotes (version?: string): Promise<void> {
-    try {
-      const pkg = await this.apiService.getAvailableShow({ id: this.pkgId, version })
-      this.releaseNotesModel.releaseNotes = pkg['release-notes']
-    } catch (e) {
-      console.error(e)
-      this.error = e.message
-    }
-  }
-
-  setSelected (selected: string) {
-    if (this.selected === selected) {
-      this.selected = null
-    } else {
-      this.selected = selected
-    }
-  }
-
-  asIsOrder (a: any, b: any) {
-    return 0
-  }
-}