From 979ec02c9a1019152be08705986337e470eabb57 Mon Sep 17 00:00:00 2001
From: Markus Hatvan <markus_hatvan@aon.at>
Date: Tue, 14 Sep 2021 10:34:04 +0200
Subject: chore: codebase improvements (#1930)

---
 src/stores/UIStore.js | 110 -----------------------------------------------
 src/stores/UIStore.ts | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 117 insertions(+), 110 deletions(-)
 delete mode 100644 src/stores/UIStore.js
 create mode 100644 src/stores/UIStore.ts

(limited to 'src/stores')

diff --git a/src/stores/UIStore.js b/src/stores/UIStore.js
deleted file mode 100644
index be675d5ed..000000000
--- a/src/stores/UIStore.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import {
-  action, observable, computed, reaction,
-} from 'mobx';
-import { theme } from '@meetfranz/theme';
-import { nativeTheme, systemPreferences } from '@electron/remote';
-
-import Store from './lib/Store';
-import { isMac, isWindows } from '../environment';
-
-export default class UIStore extends Store {
-  @observable showServicesUpdatedInfoBar = false;
-
-  @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
-
-  constructor(...args) {
-    super(...args);
-
-    // Register action handlers
-    this.actions.ui.openSettings.listen(this._openSettings.bind(this));
-    this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
-    this.actions.ui.toggleServiceUpdatedInfoBar.listen(
-      this._toggleServiceUpdatedInfoBar.bind(this),
-    );
-
-    // Listen for theme change on MacOS
-    if (isMac) {
-      systemPreferences.subscribeNotification(
-        'AppleInterfaceThemeChangedNotification',
-        () => {
-          this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
-          this.actions.service.shareSettingsWithServiceProcess();
-        },
-      );
-    }
-
-    if (isWindows) {
-      nativeTheme.on('updated', () => {
-        this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
-        this.actions.service.shareSettingsWithServiceProcess();
-      });
-    }
-  }
-
-  setup() {
-    reaction(
-      () => (
-        this.isDarkThemeActive
-      ),
-      () => {
-        this._setupThemeInDOM();
-      },
-      { fireImmediately: true },
-    );
-  }
-
-  @computed get showMessageBadgesEvenWhenMuted() {
-    const settings = this.stores.settings.all;
-
-    return (
-      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted)
-      || !settings.app.isAppMuted
-    );
-  }
-
-  @computed get isDarkThemeActive() {
-    const isWithAdaptableInDarkMode = this.stores.settings.all.app.adaptableDarkMode
-      && this.isOsDarkThemeActive;
-    const isWithoutAdaptableInDarkMode = this.stores.settings.all.app.darkMode
-      && !this.stores.settings.all.app.adaptableDarkMode;
-    const isInDarkMode = this.stores.settings.all.app.darkMode;
-    return !!(isWithAdaptableInDarkMode
-      || isWithoutAdaptableInDarkMode
-      || isInDarkMode);
-  }
-
-  @computed get theme() {
-    const themeId = (this.isDarkThemeActive || this.stores.settings.app.darkMode) ? 'dark' : 'default';
-    const { accentColor } = this.stores.settings.app;
-    return theme(themeId, accentColor);
-  }
-
-  // Actions
-  @action _openSettings({ path = '/settings' }) {
-    const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
-    this.stores.router.push(settingsPath);
-  }
-
-  @action _closeSettings() {
-    this.stores.router.push('/');
-  }
-
-  @action _toggleServiceUpdatedInfoBar({ visible }) {
-    let visibility = visible;
-    if (visibility === null) {
-      visibility = !this.showServicesUpdatedInfoBar;
-    }
-    this.showServicesUpdatedInfoBar = visibility;
-  }
-
-  // Reactions
-  _setupThemeInDOM() {
-    const body = document.querySelector('body');
-
-    if (!this.isDarkThemeActive) {
-      body.classList.remove('theme__dark');
-    } else {
-      body.classList.add('theme__dark');
-    }
-  }
-}
diff --git a/src/stores/UIStore.ts b/src/stores/UIStore.ts
new file mode 100644
index 000000000..ec48eeb40
--- /dev/null
+++ b/src/stores/UIStore.ts
@@ -0,0 +1,117 @@
+import { action, observable, computed, reaction } from 'mobx';
+import { theme, ThemeType } from '@meetfranz/theme';
+import { nativeTheme, systemPreferences } from '@electron/remote';
+
+import Store from './lib/Store';
+import { isMac, isWindows } from '../environment';
+
+export default class UIStore extends Store {
+  actions: any;
+
+  stores: any;
+
+  @observable showServicesUpdatedInfoBar = false;
+
+  @observable isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+
+  constructor(...args) {
+    super(...args);
+
+    // Register action handlers
+    this.actions.ui.openSettings.listen(this._openSettings.bind(this));
+    this.actions.ui.closeSettings.listen(this._closeSettings.bind(this));
+    this.actions.ui.toggleServiceUpdatedInfoBar.listen(
+      this._toggleServiceUpdatedInfoBar.bind(this),
+    );
+
+    // Listen for theme change on MacOS
+    if (isMac) {
+      systemPreferences.subscribeNotification(
+        'AppleInterfaceThemeChangedNotification',
+        () => {
+          this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+          this.actions.service.shareSettingsWithServiceProcess();
+        },
+      );
+    }
+
+    if (isWindows) {
+      nativeTheme.on('updated', () => {
+        this.isOsDarkThemeActive = nativeTheme.shouldUseDarkColors;
+        this.actions.service.shareSettingsWithServiceProcess();
+      });
+    }
+  }
+
+  setup() {
+    reaction(
+      () => this.isDarkThemeActive,
+      () => {
+        this._setupThemeInDOM();
+      },
+      { fireImmediately: true },
+    );
+  }
+
+  @computed get showMessageBadgesEvenWhenMuted() {
+    const settings = this.stores.settings.all;
+
+    return (
+      (settings.app.isAppMuted && settings.app.showMessageBadgeWhenMuted) ||
+      !settings.app.isAppMuted
+    );
+  }
+
+  @computed get isDarkThemeActive() {
+    const isWithAdaptableInDarkMode =
+      this.stores.settings.all.app.adaptableDarkMode &&
+      this.isOsDarkThemeActive;
+    const isWithoutAdaptableInDarkMode =
+      this.stores.settings.all.app.darkMode &&
+      !this.stores.settings.all.app.adaptableDarkMode;
+    const isInDarkMode = this.stores.settings.all.app.darkMode;
+    return !!(
+      isWithAdaptableInDarkMode ||
+      isWithoutAdaptableInDarkMode ||
+      isInDarkMode
+    );
+  }
+
+  @computed get theme() {
+    const themeId =
+      this.isDarkThemeActive || this.stores.settings.app.darkMode
+        ? ThemeType.dark
+        : ThemeType.default;
+    const { accentColor } = this.stores.settings.app;
+    return theme(themeId, accentColor);
+  }
+
+  // Actions
+  @action _openSettings({ path = '/settings' }) {
+    const settingsPath = path !== '/settings' ? `/settings/${path}` : path;
+    this.stores.router.push(settingsPath);
+  }
+
+  @action _closeSettings() {
+    this.stores.router.push('/');
+  }
+
+  @action _toggleServiceUpdatedInfoBar({ visible }) {
+    let visibility = visible;
+    if (visibility === null) {
+      visibility = !this.showServicesUpdatedInfoBar;
+    }
+    this.showServicesUpdatedInfoBar = visibility;
+  }
+
+  // Reactions
+  _setupThemeInDOM() {
+    const body = document.querySelector('body');
+
+    if (!this.isDarkThemeActive) {
+      body?.classList.remove('theme__dark');
+    } else {
+      body?.classList.add('theme__dark');
+    }
+  }
+}
-- 
cgit v1.2.3-70-g09d2