Switch to using organization as reactive data service

src/app/layouts/navbar.component.html

@@ -17,8 +17,8 @@
         <li class="nav-item" routerLinkActive="active">
           <a class="nav-link" routerLink="/reports">{{ "reports" | i18n }}</a>
         </li>
-        <li *ngIf="organizations.length >= 1" class="nav-item" routerLinkActive="active">
+        <li *ngIf="(organizations$ | async).length >= 1" class="nav-item" routerLinkActive="active">
-          <a class="nav-link" [routerLink]="['/organizations', organizations[0].id]">{{
+          <a class="nav-link" [routerLink]="['/organizations', (organizations$ | async)[0].id]">{{
             "organizations" | i18n
           }}</a>
         </li>

src/app/layouts/navbar.component.ts

@@ -1,6 +1,6 @@
-import { Component, NgZone, OnInit } from "@angular/core";
+import { Component, OnInit } from "@angular/core";
+import { Observable, map } from "rxjs";
 
-import { BroadcasterService } from "jslib-common/abstractions/broadcaster.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { MessagingService } from "jslib-common/abstractions/messaging.service";
 import { OrganizationService } from "jslib-common/abstractions/organization.service";
@@ -23,7 +23,7 @@ export class NavbarComponent implements OnInit {
   name: string;
   email: string;
   providers: Provider[] = [];
-  organizations: Organization[] = [];
+  organizations$ = new Observable<Organization[]>();
 
   constructor(
     private messagingService: MessagingService,
@@ -32,9 +32,7 @@ export class NavbarComponent implements OnInit {
     private providerService: ProviderService,
     private syncService: SyncService,
     private organizationService: OrganizationService,
-    private i18nService: I18nService,
+    private i18nService: I18nService
-    private broadcasterService: BroadcasterService,
-    private ngZone: NgZone
   ) {
     this.selfHosted = this.platformUtilsService.isSelfHost();
   }
@@ -52,26 +50,17 @@ export class NavbarComponent implements OnInit {
     }
     this.providers = await this.providerService.getAll();
 
-    this.organizations = await this.buildOrganizations();
+    this.organizations$ = await this.buildOrganizations();
-
-    this.broadcasterService.subscribe(this.constructor.name, async (message: any) => {
-      this.ngZone.run(async () => {
-        switch (message.command) {
-          case "organizationCreated":
-            if (this.organizations.length < 1) {
-              this.organizations = await this.buildOrganizations();
-            }
-            break;
-        }
-      });
-    });
   }
 
   async buildOrganizations() {
-    const allOrgs = await this.organizationService.getAll();
+    return this.organizations$.pipe(
-    return allOrgs
+      map((orgs) => {
-      .filter((org) => OrgNavigationPermissionsService.canAccessAdmin(org))
+        return orgs
-      .sort(Utils.getSortFunction(this.i18nService, "name"));
+          .filter((org) => OrgNavigationPermissionsService.canAccessAdmin(org))
+          .sort(Utils.getSortFunction(this.i18nService, "name"));
+      })
+    );
   }
 
   lock() {

src/app/settings/organization-plans.component.ts

@@ -300,7 +300,6 @@ export class OrganizationPlansComponent implements OnInit {
       this.formPromise = doSubmit();
       const organizationId = await this.formPromise;
       this.onSuccess.emit({ organizationId: organizationId });
-      this.messagingService.send("organizationCreated", organizationId);
     } catch (e) {
       this.logService.error(e);
     }