dock/dock-store fixes & refactoring

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

src/renderer/components/dock/dock-tab.tsx

@@ -7,7 +7,7 @@ import { dockStore, IDockTab } from "./dock.store";
 import { Tab, TabProps } from "../tabs";
 import { Icon } from "../icon";
 import { Menu, MenuItem } from "../menu";
-import { observable, makeObservable } from "mobx";
+import { makeObservable, observable } from "mobx";
 
 export interface DockTabProps extends TabProps<IDockTab> {
   moreActions?: React.ReactNode;
@@ -32,7 +32,7 @@ export class DockTab extends React.Component<DockTabProps> {
   }
 
   renderMenu() {
-    const { closeTab, closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore;
+    const { closeAllTabs, closeOtherTabs, closeTabsToTheRight, tabs, getTabIndex } = dockStore;
     const closeAllDisabled = tabs.length === 1;
     const closeOtherDisabled = tabs.length === 1;
     const closeRightDisabled = getTabIndex(this.tabId) === tabs.length - 1;
@@ -47,7 +47,7 @@ export class DockTab extends React.Component<DockTabProps> {
         close={() => this.menuVisible = false}
         toggleEvent="contextmenu"
       >
-        <MenuItem onClick={() => closeTab(this.tabId)}>
+        <MenuItem onClick={() => dockStore.closeTab(this.tabId)}>
           Close
         </MenuItem>
         <MenuItem onClick={() => closeAllTabs()} disabled={closeAllDisabled}>

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

@@ -1,6 +1,6 @@
 import MD5 from "crypto-js/md5";
 import { action, computed, IReactionOptions, makeObservable, observable, reaction } from "mobx";
-import { autobind, createStorage, StorageHelper } from "../../utils";
+import { createStorage, StorageHelper } from "../../utils";
 import throttle from "lodash/throttle";
 
 export type TabId = string;
@@ -30,6 +30,8 @@ export interface DockStorageState {
 
 export class DockStore implements DockStorageState {
   constructor() {
+    makeObservable(this);
+
     this.storage = createStorage<DockStorageState>("dock", {
       height: 300,
       tabs: [
@@ -37,8 +39,7 @@ export class DockStore implements DockStorageState {
       ],
     });
 
-    makeObservable(this);
-    this.init();
+    this.bindEvents();
   }
 
   private storage: StorageHelper<DockStorageState>;
@@ -85,7 +86,7 @@ export class DockStore implements DockStorageState {
     return this.tabs.find(tab => tab.id === this.selectedTabId);
   }
 
-  private init() {
+  private bindEvents() {
     // adjust terminal height if window size changes
     window.addEventListener("resize", throttle(this.adjustHeight, 250));
   }
@@ -113,8 +114,7 @@ export class DockStore implements DockStorageState {
     return reaction(() => this.selectedTabId, callback, options);
   }
 
-  @autobind()
-  hasTabs() {
+  @computed get hasTabs(): boolean {
     return this.tabs.length > 0;
   }
 
@@ -127,18 +127,16 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action.bound
   close() {
     this.isOpen = false;
   }
 
-  @action.bound
   toggle() {
     if (this.isOpen) this.close();
     else this.open();
   }
 
-  @action.bound
+  @action
   toggleFillSize() {
     if (!this.isOpen) this.open();
     this.fullSize = !this.fullSize;
@@ -148,7 +146,7 @@ export class DockStore implements DockStorageState {
     return this.tabs.find(tab => tab.id === tabId);
   }
 
-  getTabIndex(tabId: TabId) {
+  getTabIndex(tabId: TabId): number {
     return this.tabs.findIndex(tab => tab.id === tabId);
   }
 
@@ -166,7 +164,7 @@ export class DockStore implements DockStorageState {
     }
   }
 
-  @action.bound
+  @action
   createTab(anonTab: IDockTab, addNumber = true): IDockTab {
     const tabId = MD5(Math.random().toString() + Date.now()).toString();
     const tab: IDockTab = { id: tabId, ...anonTab };
@@ -183,7 +181,7 @@ export class DockStore implements DockStorageState {
     return tab;
   }
 
-  @action.bound
+  @action
   async closeTab(tabId: TabId) {
     const tab = this.getTabById(tabId);
 

src/renderer/components/dock/dock.tsx

@@ -31,18 +31,18 @@ interface Props {
 @observer
 export class Dock extends React.Component<Props> {
   onKeydown = (evt: React.KeyboardEvent<HTMLElement>) => {
-    const { close, closeTab, selectedTab } = dockStore;
+    const { selectedTab } = dockStore;
 
     if (!selectedTab) return;
     const { code, ctrlKey, shiftKey } = evt.nativeEvent;
 
     if (shiftKey && code === "Escape") {
-      close();
+      dockStore.close();
     }
 
     if (ctrlKey && code === "KeyW") {
-      if (selectedTab.pinned) close();
-      else closeTab(selectedTab.id);
+      if (selectedTab.pinned) dockStore.close();
+      else dockStore.closeTab(selectedTab.id);
     }
   };
 
@@ -60,19 +60,20 @@ export class Dock extends React.Component<Props> {
 
     return (
       <div className="tab-content" style={{ flexBasis: height }}>
-        {isCreateResourceTab(tab) && <CreateResource tab={tab} />}
-        {isEditResourceTab(tab) && <EditResource tab={tab} />}
-        {isInstallChartTab(tab) && <InstallChart tab={tab} />}
-        {isUpgradeChartTab(tab) && <UpgradeChart tab={tab} />}
-        {isTerminalTab(tab) && <TerminalWindow tab={tab} />}
-        {isLogsTab(tab) && <Logs tab={tab} />}
+        {isCreateResourceTab(tab) && <CreateResource tab={tab}/>}
+        {isEditResourceTab(tab) && <EditResource tab={tab}/>}
+        {isInstallChartTab(tab) && <InstallChart tab={tab}/>}
+        {isUpgradeChartTab(tab) && <UpgradeChart tab={tab}/>}
+        {isTerminalTab(tab) && <TerminalWindow tab={tab}/>}
+        {isLogsTab(tab) && <Logs tab={tab}/>}
       </div>
     );
   }
 
   render() {
     const { className } = this.props;
-    const { isOpen, toggle, tabs, toggleFillSize, selectedTab, hasTabs, fullSize } = dockStore;
+    const { isOpen, tabs, selectedTab, hasTabs, fullSize } = dockStore;
+    const toggleDock = () => dockStore.toggle();
 
     return (
       <div
@@ -81,17 +82,17 @@ export class Dock extends React.Component<Props> {
         tabIndex={-1}
       >
         <ResizingAnchor
-          disabled={!hasTabs()}
+          disabled={!hasTabs}
           getCurrentExtent={() => dockStore.height}
           minExtent={dockStore.minHeight}
           maxExtent={dockStore.maxHeight}
           direction={ResizeDirection.VERTICAL}
           onStart={dockStore.open}
-          onMinExtentSubceed={dockStore.close}
-          onMinExtentExceed={dockStore.open}
+          onMinExtentSubceed={() => dockStore.close()}
+          onMinExtentExceed={() => dockStore.open()}
           onDrag={extent => dockStore.height = extent}
         />
-        <div className="tabs-container flex align-center" onDoubleClick={prevDefault(toggle)}>
+        <div className="tabs-container flex align-center" onDoubleClick={prevDefault(toggleDock)}>
           <DockTabs
             tabs={tabs}
             selectedTab={selectedTab}
@@ -111,17 +112,17 @@ export class Dock extends React.Component<Props> {
                 </MenuItem>
               </MenuActions>
             </div>
-            {hasTabs() && (
+            {hasTabs && (
               <>
                 <Icon
                   material={fullSize ? "fullscreen_exit" : "fullscreen"}
                   tooltip={fullSize ? "Exit full size mode" : "Fit to window"}
-                  onClick={toggleFillSize}
+                  onClick={() => dockStore.toggleFillSize()}
                 />
                 <Icon
                   material={`keyboard_arrow_${isOpen ? "down" : "up"}`}
                   tooltip={isOpen ? "Minimize" : "Open"}
-                  onClick={toggle}
+                  onClick={toggleDock}
                 />
               </>
             )}