feat(#773): use stencil/store for theme

Author: peterpeterparker

remote/src/app/app-root.tsx

@@ -1,7 +1,5 @@
 import {Build, Component, h, State} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
-
 import {TimerService} from './services/timer/timer.service';
 import {AccelerometerService} from './services/accelerometer/accelerometer.service';
 import {ThemeService} from './services/theme/theme.service';
@@ -14,11 +12,8 @@ export class AppRoot {
   private timerService: TimerService;
   private accelerometerService: AccelerometerService;
 
-  private themeSubscription: Subscription;
   private themeService: ThemeService;
 
-  private domBodyClassList: DOMTokenList = document.body.classList;
-
   @State()
   private loading: boolean = true;
 
@@ -29,10 +24,6 @@ export class AppRoot {
   }
 
   async componentWillLoad() {
-    this.themeSubscription = this.themeService.watch().subscribe((dark: boolean) => {
-      this.updateDarkModePreferences(dark);
-    });
-
     await this.themeService.initDarkModePreference();
   }
 
@@ -48,14 +39,6 @@ export class AppRoot {
 
   async componentDidUnload() {
     await this.timerService.destroy();
-
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-
-  private updateDarkModePreferences(dark: boolean) {
-    dark ? this.domBodyClassList.add('dark') : this.domBodyClassList.remove('dark');
   }
 
   render() {

remote/src/app/components/app-header/app-header.tsx

@@ -1,40 +1,16 @@
-import {Component, h, State} from '@stencil/core';
+import {Component, h} from '@stencil/core';
 
-import {Subscription} from 'rxjs';
-
-import {ThemeService} from '../../services/theme/theme.service';
+import themeStore from '../../stores/theme.store';
 
 @Component({
   tag: 'app-header',
-  styleUrl: 'app-header.scss'
+  styleUrl: 'app-header.scss',
 })
 export class AppHeader {
-  private themeSubscription: Subscription;
-  private themeService: ThemeService;
-
-  @State()
-  private darkTheme: boolean;
-
-  constructor() {
-    this.themeService = ThemeService.getInstance();
-  }
-
-  async componentWillLoad() {
-    this.themeSubscription = this.themeService.watch().subscribe((dark: boolean) => {
-      this.darkTheme = dark;
-    });
-  }
-
-  componentWillUnload() {
-    if (this.themeSubscription) {
-      this.themeSubscription.unsubscribe();
-    }
-  }
-
   render() {
     return (
       <ion-header>
-        <ion-toolbar color={this.darkTheme ? 'dark' : 'primary'}>
+        <ion-toolbar color={themeStore.state.darkTheme ? 'dark' : 'primary'}>
           <slot name="start">
             <ion-buttons slot="start">
               <ion-menu-toggle>

remote/src/app/components/settings/app-general-settings/app-general-settings.tsx

@@ -1,11 +1,11 @@
-import {Component, h, State} from '@stencil/core';
+import {Component, h} from '@stencil/core';
 
-import {take} from 'rxjs/operators';
+import themeStore from '../../../stores/theme.store';
 
 import {ThemeService} from '../../../services/theme/theme.service';
 
 @Component({
-  tag: 'app-general-settings'
+  tag: 'app-general-settings',
 })
 export class AppGeneralSettings {
   private themeService: ThemeService;
@@ -14,34 +14,21 @@ export class AppGeneralSettings {
     this.themeService = ThemeService.getInstance();
   }
 
-  componentWillLoad() {
-    this.themeService
-      .watch()
-      .pipe(take(1))
-      .subscribe((dark: boolean) => {
-        this.darkTheme = dark;
-      });
-  }
-
   async toggleTheme() {
-    this.darkTheme = !this.darkTheme;
-    await this.themeService.switch(this.darkTheme);
+    await this.themeService.switch(!themeStore.state.darkTheme);
   }
 
-  @State()
-  private darkTheme: boolean;
-
   render() {
     return [
       <h1 class="ion-padding-top">Settings</h1>,
       <ion-list class="ion-padding-top ion-padding-bottom">
         <ion-item>
           <ion-label>
-            {this.darkTheme ? 'Dark' : 'Light'} theme {this.darkTheme ? '🌑' : '☀️'}
+            {themeStore.state.darkTheme ? 'Dark' : 'Light'} theme {themeStore.state.darkTheme ? '🌑' : '☀️'}
           </ion-label>
-          <ion-toggle slot="end" checked={this.darkTheme} mode="md" color="switcher" onIonChange={() => this.toggleTheme()}></ion-toggle>
+          <ion-toggle slot="end" checked={themeStore.state.darkTheme} mode="md" color="switcher" onIonChange={() => this.toggleTheme()}></ion-toggle>
         </ion-item>
-      </ion-list>
+      </ion-list>,
     ];
   }
 }

remote/src/app/services/theme/theme.service.tsx

@@ -1,12 +1,10 @@
-import {Observable, ReplaySubject} from 'rxjs';
+import themeStore from '../../stores/theme.store';
 
 import {get, set} from 'idb-keyval';
 
 export class ThemeService {
   private static instance: ThemeService;
 
-  private darkTheme: ReplaySubject<boolean> = new ReplaySubject<boolean>(1);
-
   private constructor() {
     // Private constructor, singleton
   }
@@ -18,12 +16,8 @@ export class ThemeService {
     return ThemeService.instance;
   }
 
-  watch(): Observable<boolean> {
-    return this.darkTheme.asObservable();
-  }
-
   async switch(dark: boolean) {
-    this.darkTheme.next(dark);
+    themeStore.state.darkTheme = dark;
 
     try {
       await set('deckdeckgo_dark_mode', dark);
@@ -38,17 +32,17 @@ export class ThemeService {
 
       // If user already specified once a preference, we use that as default
       if (savedDarkModePreference !== undefined) {
-        this.switch(savedDarkModePreference);
+        await this.switch(savedDarkModePreference);
         return;
       }
     } catch (err) {
-      this.switch(false);
+      await this.switch(false);
       return;
     }
 
     // Otherwise we check the prefers-color-scheme of the OS
     const darkModePreferenceFromMedia: MediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
 
-    this.switch(darkModePreferenceFromMedia.matches);
+    await this.switch(darkModePreferenceFromMedia.matches);
   }
 }

remote/src/app/stores/theme.store.ts

@@ -0,0 +1,16 @@
+import {createStore} from '@stencil/store';
+
+interface DarkThemeStore {
+  darkTheme: boolean | undefined;
+}
+
+const {state, onChange} = createStore({
+  darkTheme: undefined,
+} as DarkThemeStore);
+
+onChange('darkTheme', (dark: boolean | undefined) => {
+  const domBodyClassList: DOMTokenList = document.body.classList;
+  dark ? domBodyClassList.add('dark') : domBodyClassList.remove('dark');
+});
+
+export default {state};