Start refactoring state management

src/app/components/pages/pages.component.ts

@@ -2,6 +2,10 @@ import { Component, ElementRef, ViewChild } from '@angular/core';
 import { Page } from '../../model/page';
 import { DataService } from '../../services/data.service';
 import { ModalService } from '../../services/modal.service';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
+import { Observable } from 'rxjs/internal/Observable';
+
+const USER_DATA_KEY = 'life-towers.user-data.v.2';
 
 @Component({
   selector: 'app-pages',
@@ -13,28 +17,70 @@ export class PagesComponent {
   @ViewChild('page') page: ElementRef;
   @ViewChild('bottom') bottom: ElementRef;
 
+  pages: Array<Page>;
   isDragHappening = false;
 
-  constructor(public dataService: DataService, private modalService: ModalService) {}
+  get pageNames() {
+    if (this.pages) {
+      return this.pages.map(p => p.name);
+    }
+    return [];
+  }
 
-  async selectPage(selected: string) {
-    if (!this.dataService.pageNames.includes(selected)) {
-      const page = new Page({
-        name: selected,
-        towers: [],
-        userData: {}
-      });
+  get selectedPage(): Page {
+    try {
+      return this.pages[this.pageNames.indexOf(this.selectedPageName)];
+    } catch {
+      return null;
+    }
+  }
 
-      this.dataService.push(page);
-      page.addTower();
+  private _selectedPageName: string;
+  get selectedPageName(): string {
+    return this._selectedPageName;
+  }
+
+  set selectedPageName(value: string) {
+    window.localStorage.setItem(
+      USER_DATA_KEY,
+      JSON.stringify({
+        selectedPage: value
+      })
+    );
+    this._selectedPageName = value;
+  }
+
+  private readonly _selectedPage: BehaviorSubject<Page> = new BehaviorSubject(null);
+  readonly selectedPage$: Observable<Page> = this._selectedPage.asObservable();
+
+  constructor(public dataService: DataService, private modalService: ModalService) {
+    const userData = JSON.parse(window.localStorage.getItem(USER_DATA_KEY));
+    if (userData !== null && userData.selectedPage !== undefined) {
+      this._selectedPageName = userData.selectedPage;
     }
 
-    await this.dataService.changeActiveByName(selected);
+    this.dataService.safeChildren$.subscribe(pages => {
+      if (pages) {
+        this.pages = pages;
+        if (!this.selectedPage) {
+          this.selectedPageName = this.pages.length > 0 ? this.pages[0].name : null;
+        }
+        this._selectedPage.next(this.selectedPage);
+      }
+    });
+  }
+
+  async selectPage(selected: string) {
+    if (!this.pageNames.includes(selected)) {
+      this.dataService.addPage(selected);
+    }
+    this.selectedPageName = selected;
+    this._selectedPage.next(this.selectedPage);
   }
 
   async openSettings() {
     try {
-      await this.modalService.showSettings();
+      await this.modalService.showSettings(this.selectedPage$);
     } catch {
       // pass
     }