fix(view): duplicate of colors and buckets on page revisits

Author: lokesh-coder

src/app/pages/home/home.component.ts

@@ -1,17 +1,19 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { BoardService } from '../../services/board.service';
 import { Store } from '@ngxs/store';
 import { LoadBoard } from '../../store/actions/board.actions';
 import { filter, map } from 'rxjs/operators';
 import { InkBoard, InkBoardMeta } from '../../models';
 import { LocalDatabase } from '../../services/localdb.service';
+import { ClearBuckets } from '../../store/actions/bucket.action';
+import { ClearInkColors } from '../../store/actions/ink.action';
 
 @Component({
   selector: 'inkapp-home-page',
   templateUrl: './home.component.html',
   styles: []
 })
-export class HomePage implements OnInit {
+export class HomePage implements OnInit, OnDestroy {
   boards: InkBoardMeta[];
   constructor(private _boardService: BoardService, private _store: Store, private _localDatabase: LocalDatabase) {}
 
@@ -31,4 +33,9 @@ export class HomePage implements OnInit {
         console.log('got settings collection,', col);
       });
   }
+
+  ngOnDestroy() {
+    this._store.dispatch(new ClearBuckets());
+    this._store.dispatch(new ClearInkColors());
+  }
 }

src/app/pages/settings/settings.component.html

@@ -9,8 +9,8 @@ <h5>Colors view</h5>
       </div>
       <div class="action">
         <select name="" class="custom-select" (change)="onViewChange($event.target.value)">
-          <option value="default">Default</option>
-          <option value="thin">Thin</option>
+          <option value="default" [selected]="view.value=='default'">Default</option>
+          <option value="thin" [selected]="view.value=='thin'">Thin</option>
         </select>
       </div>
     </inkapp-settings-item>

src/app/pages/settings/settings.component.ts

@@ -3,13 +3,15 @@ import { LocalDatabase } from '../../services/localdb.service';
 import { SettingsService } from '../../services/settings.service';
 import { Store } from '@ngxs/store';
 import { UpdateSettings, LoadSettings } from '../../store/actions/settings.action';
+import { InkAppSettings, InkAppSettingsItem } from '../../models';
 
 @Component({
   selector: 'inkapp-settings-page',
   templateUrl: './settings.component.html',
   styles: []
 })
 export class SettingsPage implements OnInit {
+  view: InkAppSettingsItem;
   constructor(
     private _store: Store,
     private _localDatabase: LocalDatabase,
@@ -18,6 +20,7 @@ export class SettingsPage implements OnInit {
 
   ngOnInit() {
     this._settingsService.getAll().then(doc => {
+      this.view = doc.filter(d => d.key === 'view')[0];
       this._store.dispatch(new LoadSettings(doc));
     });
   }

src/app/store/actions/bucket.action.ts

@@ -18,3 +18,8 @@ export class RenameBucket {
   static readonly type = '[Bucket] Change name';
   constructor(public id: string, public name: string) {}
 }
+
+export class ClearBuckets {
+  static readonly type = '[Bucket] clear all';
+  constructor() {}
+}

src/app/store/actions/ink.action.ts

@@ -14,3 +14,7 @@ export class LoadInkColorsInBucket {
   static readonly type = '[Ink] get colors in bucket';
   constructor(public colors: InkColorMeta[]) {}
 }
+export class ClearInkColors {
+  static readonly type = '[Ink] clear all';
+  constructor() {}
+}

src/app/store/states/bucket.state.ts

@@ -1,6 +1,6 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { InkAppSettings, InkBucket } from '../../models';
-import { CreateBucket, UpdateBucket, LoadBuckets, RenameBucket } from '../actions/bucket.action';
+import { CreateBucket, UpdateBucket, LoadBuckets, RenameBucket, ClearBuckets } from '../actions/bucket.action';
 import { DBService } from '../../services/db.service';
 import { LoadInitialData } from '../actions/general.action';
 import { UtilService } from '../../services/util.service';
@@ -42,4 +42,8 @@ export class BucketState {
     state.filter(b => b._id === action.id).map(b => (b.name = action.name));
     ctx.setState([...state]);
   }
+  @Action(ClearBuckets)
+  clearBuckets(ctx: StateContext<InkBucket>, action: ClearBuckets) {
+    ctx.setState([]);
+  }
 }

src/app/store/states/ink.state.ts

@@ -1,6 +1,6 @@
 import { State, Action, StateContext } from '@ngxs/store';
 import { Ink } from '../../models';
-import { UpdateInkColor, AddInkColor, LoadInkColorsInBucket } from '../actions/ink.action';
+import { UpdateInkColor, AddInkColor, LoadInkColorsInBucket, ClearInkColors } from '../actions/ink.action';
 import { LoadInitialData } from '../actions/general.action';
 import { DBService } from '../../services/db.service';
 import { UtilService } from '../../services/util.service';
@@ -34,4 +34,8 @@ export class InkState {
     const state: any = ctx.getState();
     ctx.setState([...state, ...action.colors]);
   }
+  @Action(ClearInkColors)
+  clearBuckets(ctx: StateContext<Ink>, action: ClearInkColors) {
+    ctx.setState([]);
+  }
 }