simplify "db-view-mail-tab" component state initialization

vladimiry · Oct 17, 2018 · af8945f · af8945f
1 parent fc3c724
commit af8945f
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 33 deletions.
diff --git a/src/web/src/app/_accounts/account.component.ts b/src/web/src/app/_accounts/account.component.ts
@@ -123,6 +123,7 @@ export class AccountComponent extends NgChangesObservableComponent implements On
                         } else if (databaseView) {
                             state.dbViewComponentRef = await this.dbViewModuleResolve.buildComponentRef({type, login});
                             this.dbViewContainerRef.insert(state.dbViewComponentRef.hostView);
+                            state.dbViewComponentRef.changeDetectorRef.detectChanges();
                         }
 
                         this.webViewHiddenByDatabaseView = Boolean(databaseView);

diff --git a/src/web/src/app/_db-view/db-view-entry.component.html b/src/web/src/app/_db-view/db-view-entry.component.html
@@ -1,5 +1,4 @@
 <email-securely-app-db-view-mail-tab
     class="px-2 pt-2"
     [dbAccountPk]="dbAccountPk"
-    (initializedHandler)="tabComponentInitialized()"
 ></email-securely-app-db-view-mail-tab>
diff --git a/src/web/src/app/_db-view/db-view-entry.component.ts b/src/web/src/app/_db-view/db-view-entry.component.ts
@@ -1,4 +1,4 @@
-import {ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, Renderer2} from "@angular/core";
+import {ChangeDetectionStrategy, Component, ElementRef, Input, OnDestroy, OnInit, Renderer2} from "@angular/core";
 import {Deferred} from "ts-deferred";
 import {Store} from "@ngrx/store";
 
@@ -15,7 +15,7 @@ type ComponentInterface = Pick<DbViewEntryComponentInterface, Extract<keyof DbVi
     styleUrls: ["./db-view-entry.component.scss"],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DbViewEntryComponent implements ComponentInterface, OnDestroy {
+export class DbViewEntryComponent implements ComponentInterface, OnDestroy, OnInit {
     @Input()
     dbAccountPk!: DbAccountPk;
 
@@ -27,8 +27,7 @@ export class DbViewEntryComponent implements ComponentInterface, OnDestroy {
         private el: ElementRef,
     ) {}
 
-    // TODO consider dispatching "DB_VIEW_ACTIONS.MountInstance" in "ngAfterViewInit"
-    tabComponentInitialized() {
+    ngOnInit() {
         this.store.dispatch(DB_VIEW_ACTIONS.MountInstance({dbAccountPk: this.dbAccountPk, finishPromise: this.finishDeferred.promise}));
     }
 

diff --git a/src/web/src/app/_db-view/db-view-mail-tab.component.ts b/src/web/src/app/_db-view/db-view-mail-tab.component.ts
@@ -1,6 +1,7 @@
-import {ChangeDetectionStrategy, Component, EventEmitter, Input, Output} from "@angular/core";
+import {ChangeDetectionStrategy, Component, Input} from "@angular/core";
+import {EMPTY} from "rxjs";
 import {Store, select} from "@ngrx/store";
-import {filter, map, mergeMap, tap} from "rxjs/operators";
+import {concatMap, mergeMap} from "rxjs/operators";
 
 import {DB_VIEW_ACTIONS} from "src/web/src/app/store/actions/db-view";
 import {DbAccountPk, MAIL_FOLDER_TYPE, Mail, View} from "src/shared/model/database";
@@ -17,43 +18,40 @@ import {State} from "src/web/src/app/store/reducers/db-view";
 export class DbViewMailTabComponent extends NgChangesObservableComponent {
     @Input()
     dbAccountPk!: DbAccountPk;
-    @Output()
-    initializedHandler = new EventEmitter<void>();
-    initialized: boolean = false;
 
     state$ = this.ngChangesObservable("dbAccountPk").pipe(
-        filter((value) => Boolean(value)),
-        mergeMap((dbAccountPk) => {
-            if (!this.initialized) {
-                this.initializedHandler.emit();
+        mergeMap((pk) => {
+            if (!pk) {
+                return EMPTY;
             }
-            this.initialized = true;
 
             return this.store.pipe(
-                select(FEATURED.accountRecord, {pk: dbAccountPk}),
-                tap(() => FEATURED.accountRecord.release()),
-                mergeMap((instance) => instance ? [instance] : []),
-                tap(({folders, selectedMail, selectedFolderPk, foldersMeta}) => {
-                    if (selectedFolderPk) {
-                        return;
+                select(FEATURED.accountRecord(), {pk}),
+                concatMap((instance) => {
+                    if (!instance) {
+                        return EMPTY;
                     }
-                    const inbox = folders.system.find((f) => f.folderType === MAIL_FOLDER_TYPE.INBOX);
-                    if (!inbox) {
-                        throw new Error(`Failed to resolve "inbox" folder`);
+
+                    const {folders, selectedMail, selectedFolderPk, foldersMeta} = instance;
+
+                    if (!selectedFolderPk) {
+                        const inbox = folders.system.find((f) => f.folderType === MAIL_FOLDER_TYPE.INBOX);
+                        if (!inbox) {
+                            throw new Error(`Failed to resolve "inbox" folder`);
+                        }
+                        this.store.dispatch(DB_VIEW_ACTIONS.SelectFolder({dbAccountPk: this.dbAccountPk, folderPk: inbox.pk}));
+                        return EMPTY;
                     }
-                    this.store.dispatch(DB_VIEW_ACTIONS.SelectFolder({dbAccountPk: this.dbAccountPk, folderPk: inbox.pk}));
-                }),
-                filter(({selectedFolderPk}) => Boolean(selectedFolderPk)),
-                map(({folders, selectedMail, selectedFolderPk, foldersMeta}) => {
-                    const selectedFolder = [...folders.system, ...folders.custom].find(({pk}) => pk === selectedFolderPk);
 
-                    return {
+                    const selectedFolder = [...folders.system, ...folders.custom].find((f) => f.pk === selectedFolderPk);
+
+                    return [{
                         folders,
                         folderMeta: selectedFolder && selectedFolder.pk in foldersMeta ? foldersMeta[selectedFolder.pk] : undefined,
                         selectedMail,
                         selectedFolderPk,
                         rootConversationNodes: selectedFolder ? selectedFolder.rootConversationNodes : [],
-                    };
+                    }];
                 }),
             );
         }),

diff --git a/src/web/src/app/store/selectors/db-view.ts b/src/web/src/app/store/selectors/db-view.ts
@@ -6,8 +6,8 @@ import {State, featureName} from "src/web/src/app/store/reducers/db-view";
 export const STATE = createFeatureSelector<State>(featureName);
 
 export const FEATURED = {
-    accountRecord: createSelector(
+    accountRecord: () => createSelector(
         STATE,
-        (state: State, props: { pk: DbAccountPk }) => state.instances[JSON.stringify(props.pk)],
+        ({instances}: State, {pk}: { pk: DbAccountPk }) => instances[JSON.stringify(pk)],
     ),
 };