From e70f9bae2a37f4e5e8b90601cbfe3ab3811627b1 Mon Sep 17 00:00:00 2001
From: tiddlygit-test <linonetwo012@gmail.com>
Date: Sat, 20 Mar 2021 19:12:20 +0800
Subject: [PATCH] feat: add Observable to theme service

---
 src/services/theme/hooks.ts     | 9 +++++++++
 src/services/theme/index.ts     | 8 ++++++++
 src/services/theme/interface.ts | 7 +++++++
 3 files changed, 24 insertions(+)
 create mode 100644 src/services/theme/hooks.ts

diff --git a/src/services/theme/hooks.ts b/src/services/theme/hooks.ts
new file mode 100644
index 00000000..9d616e22
--- /dev/null
+++ b/src/services/theme/hooks.ts
@@ -0,0 +1,9 @@
+import { useObservable } from 'beautiful-react-hooks';
+import { useState } from 'react';
+import { ITheme } from './interface';
+
+export function useThemeObservable(): ITheme | undefined {
+  const [theme, themeSetter] = useState<ITheme | undefined>();
+  useObservable<ITheme | undefined>(window.observables.theme.theme$, themeSetter);
+  return theme;
+}
diff --git a/src/services/theme/index.ts b/src/services/theme/index.ts
index 13fa6568..ce8786e3 100644
--- a/src/services/theme/index.ts
+++ b/src/services/theme/index.ts
@@ -1,3 +1,4 @@
+import { BehaviorSubject } from 'rxjs';
 import { nativeTheme } from 'electron';
 import { injectable } from 'inversify';
 
@@ -12,9 +13,16 @@ import { IViewService } from '@services/view/interface';
 export class ThemeService implements IThemeService {
   @lazyInject(serviceIdentifier.Preference) private readonly preferenceService!: IPreferenceService;
   @lazyInject(serviceIdentifier.View) private readonly viewService!: IViewService;
+  public theme$: BehaviorSubject<ITheme>;
 
   constructor() {
     this.init();
+    this.theme$ = new BehaviorSubject<ITheme>({ shouldUseDarkColors: this.shouldUseDarkColors() });
+    this.theme$.subscribe((theme: ITheme) => console.log(theme));
+  }
+
+  private updateThemeSubject(newTheme: ITheme): void {
+    this.theme$.next(newTheme);
   }
 
   private init(): void {
diff --git a/src/services/theme/interface.ts b/src/services/theme/interface.ts
index 8b1aea7b..23b8dcbe 100644
--- a/src/services/theme/interface.ts
+++ b/src/services/theme/interface.ts
@@ -1,15 +1,22 @@
+import { BehaviorSubject } from 'rxjs';
 import { ProxyPropertyType } from '@/helpers/electron-ipc-proxy/common';
 import { ThemeChannel } from '@/constants/channels';
 
+export interface ITheme {
+  shouldUseDarkColors: boolean;
+}
+
 /**
  * Wrap call to electron api, so we won't need remote module in renderer process
  */
 export interface IThemeService {
+  theme$: BehaviorSubject<ITheme>;
   shouldUseDarkColors(): boolean;
 }
 export const ThemeServiceIPCDescriptor = {
   channel: ThemeChannel.name,
   properties: {
+    theme$: ProxyPropertyType.Value$,
     shouldUseDarkColors: ProxyPropertyType.Function,
   },
 };