refactor(patch-db): use PatchDB class declaratively (#1562)

* refactor(patch-db): use PatchDB class declaratively

* chore: remove initial source before init

* chore: show spinner

* fix: show Connecting to Embassy spinner until first connection

* fix: switching marketplaces

* allow for subscription to end with take when installing a package

* update patchdb

Co-authored-by: Lucy Cifferello <12953208+elvece@users.noreply.github.com>

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.html

@@ -9,13 +9,12 @@
 
 <ion-content class="ion-padding">
   <!-- loading -->
-  <text-spinner
-    *ngIf="!patch.loaded else data"
-    text="Connecting to Embassy"
-  ></text-spinner>
+  <ng-template #loading>
+    <text-spinner text="Connecting to Embassy"></text-spinner>
+  </ng-template>
 
   <!-- not loading -->
-  <ng-template #data>
+  <ng-container *ngIf="connected$ | async else loading">
     <app-list-empty
       *ngIf="empty; else list"
       class="ion-text-center ion-padding"
@@ -40,5 +39,5 @@
         </ion-item-group>
       </ng-container>
     </ng-template>
-  </ng-template>
+  </ng-container>
 </ion-content>

frontend/projects/ui/src/app/pages/apps-routes/app-list/app-list.page.ts

@@ -18,18 +18,17 @@ export class AppListPage {
   recoveredPkgs: readonly RecoveredInfo[] = []
   order: readonly string[] = []
   reordering = false
-  loading = true
+
+  readonly connected$ = this.patch.connected$
 
   constructor(
     private readonly api: ApiService,
     private readonly destroy$: DestroyService,
-    public readonly patch: PatchDbService,
+    private readonly patch: PatchDbService,
   ) {}
 
   get empty(): boolean {
-    return (
-      !this.loading && !this.pkgs.length && isEmptyObject(this.recoveredPkgs)
-    )
+    return !this.pkgs.length && isEmptyObject(this.recoveredPkgs)
   }
 
   ngOnInit() {
@@ -43,7 +42,6 @@ export class AppListPage {
           this.pkgs = pkgs
           this.recoveredPkgs = recoveredPkgs
           this.order = order
-          this.loading = false
 
           // set order in UI DB if there were unknown packages
           if (order.length < pkgs.length) {

frontend/projects/ui/src/app/pages/developer-routes/developer-menu/developer-menu.page.ts

@@ -32,7 +32,7 @@ export class DeveloperMenuPage {
   ) {}
 
   get name(): string {
-    return this.patchDb.data.ui?.dev?.[this.projectId]?.name || ''
+    return this.patchDb.getData().ui?.dev?.[this.projectId]?.name || ''
   }
 
   ngOnInit() {

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -8,7 +8,7 @@
 
 <ion-content class="ion-padding">
   <marketplace-list-content
-    *ngIf="loaded else loading"
+    *ngIf="connected$ | async else loading"
     [localPkgs]="(localPkgs$ | async) || {}"
     [pkgs]="pkgs$ | async"
     [categories]="categories$ | async"

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts

@@ -15,6 +15,8 @@ import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
   templateUrl: './marketplace-list.page.html',
 })
 export class MarketplaceListPage {
+  readonly connected$ = this.patch.connected$
+
   readonly localPkgs$: Observable<Record<string, PackageDataEntry>> = this.patch
     .watch$('package-data')
     .pipe(
@@ -44,8 +46,4 @@ export class MarketplaceListPage {
     private readonly patch: PatchDbService,
     private readonly marketplaceService: AbstractMarketplaceService,
   ) {}
-
-  get loaded(): boolean {
-    return this.patch.loaded
-  }
 }

frontend/projects/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show-controls/marketplace-show-controls.component.ts

@@ -21,7 +21,6 @@ import { LocalStorageService } from 'src/app/services/local-storage.service'
 import { MarketplaceService } from 'src/app/services/marketplace.service'
 import { hasCurrentDeps } from 'src/app/util/has-deps'
 import { Emver } from '../../../../../../../shared/src/services/emver.service'
-import { first } from 'rxjs/operators'
 import { ErrorToastService } from '../../../../../../../shared/src/services/error-toast.service'
 import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { isEmptyObject } from '../../../../../../../shared/src/util/misc.util'
@@ -145,7 +144,6 @@ export class MarketplaceShowControlsComponent {
           id,
           'version-spec': `=${version}`,
         })
-        .pipe(first())
         .toPromise()
     } catch (e: any) {
       this.errToast.present(e)

frontend/projects/ui/src/app/pages/notifications/notifications.page.html

@@ -75,10 +75,12 @@
           <ion-label>
             <h2>
               <b>
-                <span *ngIf="not['package-id'] && patch.data['package-data']">
-                  {{ patch.data['package-data'][not['package-id']] ?
-                  patch.data['package-data'][not['package-id']].manifest.title :
-                  not['package-id'] }} -
+                <span
+                  *ngIf="not['package-id'] && patch.getData()['package-data']"
+                >
+                  {{ patch.getData()['package-data'][not['package-id']] ?
+                  patch.getData()['package-data'][not['package-id']].manifest.title
+                  : not['package-id'] }} -
                 </span>
                 <ion-text [color]="getColor(not)"> {{ not.title }} </ion-text>
               </b>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.html

@@ -1,6 +1,6 @@
 <ion-header>
   <ion-toolbar>
-    <ion-title *ngIf="patch.loaded else loading">
+    <ion-title *ngIf="connected$ | async else loading">
       {{ (ui$ | async)?.name || "Embassy-" + (server$ | async)?.id }}
     </ion-title>
     <ng-template #loading>
@@ -14,13 +14,12 @@
 
 <ion-content class="ion-padding">
   <!-- loading -->
-  <text-spinner
-    *ngIf="!patch.loaded else data"
-    text="Connecting to Embassy"
-  ></text-spinner>
+  <ng-template #spinner>
+    <text-spinner text="Connecting to Embassy"></text-spinner>
+  </ng-template>
 
   <!-- not loading -->
-  <ng-template #data>
+  <ng-container *ngIf="connected$ | async else spinner">
     <ion-item-group *ngIf="server$ | async as server">
       <div *ngFor="let cat of settings | keyvalue : asIsOrder">
         <ion-item-divider>
@@ -98,5 +97,5 @@
         </ng-container>
       </div>
     </ion-item-group>
-  </ng-template>
+  </ng-container>
 </ion-content>

frontend/projects/ui/src/app/pages/server-routes/server-show/server-show.page.ts

@@ -10,7 +10,7 @@ import { ApiService } from 'src/app/services/api/embassy-api.service'
 import { ActivatedRoute } from '@angular/router'
 import { PatchDbService } from 'src/app/services/patch-db/patch-db.service'
 import { Observable, of } from 'rxjs'
-import { filter, map, take } from 'rxjs/operators'
+import { filter, take } from 'rxjs/operators'
 import { exists, isEmptyObject, ErrorToastService } from '@start9labs/shared'
 import { EOSService } from 'src/app/services/eos.service'
 import { LocalStorageService } from 'src/app/services/local-storage.service'
@@ -28,6 +28,7 @@ export class ServerShowPage {
 
   readonly server$ = this.patch.watch$('server-info')
   readonly ui$ = this.patch.watch$('ui')
+  readonly connected$ = this.patch.connected$
 
   constructor(
     private readonly alertCtrl: AlertController,
@@ -37,8 +38,8 @@ export class ServerShowPage {
     private readonly embassyApi: ApiService,
     private readonly navCtrl: NavController,
     private readonly route: ActivatedRoute,
+    private readonly patch: PatchDbService,
     public readonly eosService: EOSService,
-    public readonly patch: PatchDbService,
     public readonly localStorageService: LocalStorageService,
   ) {}