fix(ThemePicker): ThemePicker now using PreferenceState for storage

libs/core/src/lib/state/app.state.ts

@@ -70,14 +70,14 @@ export class AppState {
   }
 
   @Action(Online)
-  enableNotifications({ patchState }: StateContext<AppStateModel>) {
+  makeOnline({ patchState }: StateContext<AppStateModel>) {
     patchState({
       online: true,
     });
   }
 
   @Action(Offline)
-  disableNotifications({ patchState }: StateContext<AppStateModel>) {
+  makeOffline({ patchState }: StateContext<AppStateModel>) {
     patchState({
       online: false,
     });

libs/core/src/lib/state/preference.state.ts

@@ -1,4 +1,4 @@
-import { Action, State, StateContext, Store } from '@ngxs/store';
+import { Action, Selector, State, StateContext, Store } from '@ngxs/store';
 
 export type Language = 'en' | 'es' | 'de' | 'fr' | 'cn';
 
@@ -74,21 +74,26 @@ export class DisableNotifications {
 
 export interface PreferenceStateModel {
   language: Language;
-  theme: ThemeName;
+  activeThemeName: ThemeName;
   enableNotifications: boolean;
 }
 
 @State<PreferenceStateModel>({
   name: 'preference',
   defaults: {
     language: 'en',
-    theme: ThemeName.PINK_BLUEGREY,
+    activeThemeName: ThemeName.INDIGO_PINK,
     enableNotifications: false,
   },
 })
 export class PreferenceState {
   constructor(private store: Store) {}
 
+  @Selector()
+  static activeThemeName(state: PreferenceStateModel) {
+    return state.activeThemeName;
+  }
+
   @Action(ChangeLanguage)
   changeLanguage({ patchState }: StateContext<PreferenceStateModel>, { payload }: ChangeLanguage) {
     patchState({
@@ -99,7 +104,7 @@ export class PreferenceState {
   @Action(ChangeTheme)
   changeTheme({ patchState }: StateContext<PreferenceStateModel>, { payload }: ChangeTheme) {
     patchState({
-      theme: payload,
+      activeThemeName: payload,
     });
   }
 

libs/dashboard/src/lib/containers/settings/settings.component.ts

@@ -67,7 +67,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
   buildForm() {
     this.settingsForm = this.fb.group({
       selectedLanguage: [this.preferences.language],
-      selectedTheme: [this.preferences.theme],
+      selectedTheme: [this.preferences.activeThemeName],
       enableNotifications: this.preferences.enableNotifications,
     });
   }

libs/theme-picker/src/lib/theme-picker.component.html

@@ -5,11 +5,11 @@
 <!-- TODO: replace use of `mat-menu` here with a custom overlay -->
 <mat-menu class="default-theme-picker-menu" #themeMenu="matMenu" x-position="before">
   <mat-grid-list cols="2">
-    <mat-grid-tile *ngFor="let theme of themes">
-      <div mat-menu-item (click)="installTheme(theme)">
+    <mat-grid-tile *ngFor="let item of allThemes | keyvalue">
+      <div mat-menu-item (click)="changeTheme(item.key)">
         <div class="default-theme-picker-swatch">
-          <mat-icon class="default-theme-chosen-icon" *ngIf="currentTheme === theme">check_circle</mat-icon>
-          <div class="default-theme-picker-primary" [style.background]="theme.primary"></div>
+          <mat-icon class="default-theme-chosen-icon" *ngIf="currentTheme === item.key">check_circle</mat-icon>
+          <div class="default-theme-picker-primary" [style.background]="item.value.primary"></div>
         </div>
       </div>
     </mat-grid-tile>

libs/theme-picker/src/lib/theme-picker.component.ts

@@ -1,6 +1,8 @@
-import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, OnInit, OnDestroy } from '@angular/core';
 import { StyleManagerService } from './style-manager.service';
-import { ThemeStorageService, DocsSiteTheme } from './theme-storage.service';
+import { Select, Store } from '@ngxs/store';
+import { themes, PreferenceState, ThemeName, ChangeTheme } from '@ngx-starter-kit/core';
+import { untilDestroy } from '@ngx-starter-kit/ngx-utils';
 
 @Component({
   selector: 'theme-picker',
@@ -10,61 +12,37 @@ import { ThemeStorageService, DocsSiteTheme } from './theme-storage.service';
   encapsulation: ViewEncapsulation.None,
   // host: { 'aria-hidden': 'true' }
 })
-export class ThemePickerComponent {
-  @HostBinding('attr.aria-hidden')
-  ariaHidden = true;
-  currentTheme;
+export class ThemePickerComponent implements OnInit, OnDestroy {
+  @HostBinding('attr.aria-hidden') ariaHidden = true;
+  allThemes = themes;
+  @Select(PreferenceState.activeThemeName) activeThemeName$;
+  currentTheme: ThemeName;
 
-  themes = [
-    {
-      primary: '#673AB7',
-      accent: '#FFC107',
-      href: 'deeppurple-amber.css',
-      isDark: false,
-    },
-    {
-      primary: '#3F51B5',
-      accent: '#E91E63',
-      href: 'indigo-pink.css',
-      isDark: false,
-      isDefault: true,
-    },
-    {
-      primary: '#E91E63',
-      accent: '#607D8B',
-      href: 'pink-bluegrey.css',
-      isDark: true,
-    },
-    {
-      primary: '#9C27B0',
-      accent: '#4CAF50',
-      href: 'purple-green.css',
-      isDark: true,
-    },
-  ];
+  constructor(private store: Store, public styleManager: StyleManagerService) {}
 
-  constructor(public styleManager: StyleManagerService, private _themeStorage: ThemeStorageService) {
-    const currentTheme = this._themeStorage.getStoredTheme();
-    if (currentTheme) {
-      this.installTheme(currentTheme);
-    }
+  changeTheme(themeName: ThemeName) {
+    this.store.dispatch(new ChangeTheme(themeName));
   }
 
-  installTheme(theme: DocsSiteTheme) {
-    this.currentTheme = this._getCurrentThemeFromHref(theme.href);
+  ngOnInit(): void {
+    // this.installTheme(this.store.selectSnapshot(PreferenceState.activeThemeName));
+    this.activeThemeName$.pipe(untilDestroy(this)).subscribe(themeName => {
+      this.installTheme(themeName);
+    });
+  }
 
-    if (theme.isDefault) {
-      this.styleManager.removeStyle('theme');
-    } else {
-      this.styleManager.setStyle('theme', `assets/themes/${theme.href}`);
-    }
+  ngOnDestroy(): void {}
 
-    if (this.currentTheme) {
-      this._themeStorage.storeTheme(this.currentTheme);
+  installTheme(themeName: ThemeName) {
+    console.log(`installing ${themeName}`);
+    if (themeName) {
+      this.currentTheme = themeName;
+      const theme = this.allThemes.get(themeName);
+      if (theme.isDefault) {
+        this.styleManager.removeStyle('theme');
+      } else {
+        this.styleManager.setStyle('theme', `assets/themes/${theme.href}`);
+      }
     }
   }
-
-  private _getCurrentThemeFromHref(href: string): DocsSiteTheme {
-    return this.themes.find(theme => theme.href === href);
-  }
 }