Migrating Vue components to React and stores refactoring (#585)

Signed-off-by: Roman <ixrock@gmail.com>

Co-authored-by: Sebastian Malton <sebastian@malton.name>
Co-authored-by: Sebastian Malton <smalton@mirantis.com>
Co-authored-by: Lauri Nevala <lauri.nevala@gmail.com>
Co-authored-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/dock/terminal.store.ts

@@ -6,7 +6,6 @@ import { TerminalApi } from "../../api/terminal-api";
 import { dockStore, IDockTab, TabId, TabKind } from "./dock.store";
 import { WebSocketApiState } from "../../api/websocket-api";
 import { _i18n } from "../../i18n";
-import { themeStore } from "../../theme.store";
 
 export interface ITerminalTab extends IDockTab {
   node?: string; // activate node shell mode
@@ -16,7 +15,6 @@ export function isTerminalTab(tab: IDockTab) {
   return tab && tab.kind === TabKind.TERMINAL;
 }
 
-
 export function createTerminalTab(tabParams: Partial<ITerminalTab> = {}) {
   return dockStore.createTab({
     kind: TabKind.TERMINAL,
@@ -56,7 +54,6 @@ export class TerminalStore {
     const api = new TerminalApi({
       id: tabId,
       node: tab.node,
-      colorTheme: themeStore.activeTheme.type
     });
     const terminal = new Terminal(tabId, api);
     this.connections.set(tabId, api);

src/renderer/components/dock/terminal.ts

@@ -1,5 +1,5 @@
 import debounce from "lodash/debounce";
-import { autorun } from "mobx";
+import { reaction, toJS } from "mobx";
 import { Terminal as XTerm } from "xterm";
 import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
@@ -20,7 +20,7 @@ export class Terminal {
     Terminal.spawningPool = pool;
   }
 
-  static async preloadFonts(){
+  static async preloadFonts() {
     const fontPath = require("../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
     const fontFace = new FontFace("RobotoMono", `url(${fontPath})`);
     await fontFace.load();
@@ -33,7 +33,7 @@ export class Terminal {
   public disposers: Function[] = [];
 
   @autobind()
-  protected setTheme(colors = themeStore.activeTheme.colors) {
+  protected setTheme(colors: Record<string, string>) {
     // Replacing keys stored in styles to format accepted by terminal
     // E.g. terminalBrightBlack -> brightBlack
     const colorPrefix = "terminal"
@@ -94,19 +94,18 @@ export class Terminal {
     this.xterm.attachCustomKeyEventHandler(this.keyHandler);
 
     // bind events
-    const onResizeDisposer = dockStore.onResize(this.onResize);
-    const onData = this.xterm.onData(this.onData);
-    const onThemeChangeDisposer = autorun(() => this.setTheme(themeStore.activeTheme.colors));
+    const onDataHandler = this.xterm.onData(this.onData);
     this.viewport.addEventListener("scroll", this.onScroll);
     this.api.onReady.addListener(this.onClear, { once: true }); // clear status logs (connecting..)
     this.api.onData.addListener(this.onApiData);
     window.addEventListener("resize", this.onResize);
 
-    // add clean-up handlers to be called on destroy
     this.disposers.push(
-      onResizeDisposer,
-      onThemeChangeDisposer,
-      () => onData.dispose(),
+      reaction(() => toJS(themeStore.activeTheme.colors), this.setTheme, {
+        fireImmediately: true
+      }),
+      dockStore.onResize(this.onResize),
+      () => onDataHandler.dispose(),
       () => this.fitAddon.dispose(),
       () => this.api.removeAllListeners(),
       () => window.removeEventListener("resize", this.onResize),