Cleanup. Remove reaction.

Signed-off-by: DmitriyNoa <dmytro.zharkov@gmail.com>

src/renderer/components/dock/__test__/dock-tabs.test.tsx

@@ -49,7 +49,6 @@ const getComponent = (dockStore: DockStore) => (
     selectedTab={dockStore.selectedTab}
     autoFocus={true}
     onChangeTab={noop}
-    dockStore={dockStore}
   />
 );
 

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

@@ -4,23 +4,21 @@
  */
 
 import React, { Fragment, useRef, useEffect, useState, UIEvent } from "react";
-import { reaction } from "mobx";
 import { Icon } from "../icon";
 import { Tabs } from "../tabs/tabs";
 import { DockTab } from "./dock-tab";
 import type { DockTab as DockTabModel } from "./dock/store";
-import { TabKind, DockStore } from "./dock/store";
+import { TabKind } from "./dock/store";
 import { TerminalTab } from "./terminal/dock-tab";
 
 interface Props {
   tabs: DockTabModel[]
-  dockStore: DockStore;
   autoFocus: boolean
   selectedTab: DockTabModel
   onChangeTab: (tab: DockTabModel) => void
 }
 
-export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab, dockStore }: Props) => {
+export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab }: Props) => {
   const elem = useRef(null);
   const contentElem = useRef(null);
   const [contentWidth, setContentWidth] = useState(0);
@@ -102,21 +100,22 @@ export const DockTabs = ({ tabs, autoFocus, selectedTab, onChangeTab, dockStore
 
   useEffect(() => {
     // update values in store on scroll
-    elem.current.addEventListener("scroll", updateScrollPosition);
+    elem?.current.addEventListener("scroll", updateScrollPosition);
 
     // update current values on resize to show/hide scroll
     window.addEventListener("resize", onWindowResize);
 
-    // update scroll state if tabs numbers has changed
-    const tabsNumberChangeDisposer = reaction(() => dockStore.tabsNumber, updateStateValues, { fireImmediately: true });
-
     return () => {
       window.removeEventListener("resize", onWindowResize);
-      elem.current.removeEventListener("scroll", updateScrollPosition);
-      tabsNumberChangeDisposer();
+      elem?.current.removeEventListener("scroll", updateScrollPosition);
     };
   }, []);
 
+  useEffect(() => {
+    // update scroll state if tabs numbers has changed
+    updateStateValues();
+  }, [tabs]);
+
   return (
     <div className={"tabs-wrapper flex gaps align-center"}>
       {isScrollableLeft() && (

src/renderer/components/dock/dock.tsx

@@ -4,10 +4,8 @@
  */
 
 import "./dock.scss";
-
 import React from "react";
 import { observer } from "mobx-react";
-
 import { cssNames } from "../../utils";
 import { Icon } from "../icon";
 import { MenuItem } from "../menu";
@@ -37,7 +35,10 @@ interface Dependencies {
   dockStore: DockStore
 }
 
-type Direction = 1 | -1;
+enum Direction {
+  NEXT = 1,
+  PREV = -1,
+}
 
 @observer
 class NonInjectedDock extends React.Component<Props & Dependencies> {
@@ -70,11 +71,11 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
     }
 
     if(ctrlKey && code === "Period") {
-      this.nextTab();
+      this.switchToNextTab();
     }
 
     if(ctrlKey && code === "Comma") {
-      this.nextTab(-1);
+      this.switchToNextTab(Direction.PREV);
     }
   };
 
@@ -86,16 +87,13 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
     this.element?.current.focus();
   };
 
-  nextTab = (direction: Direction = 1) => {
+  switchToNextTab = (direction: Direction = Direction.NEXT) => {
     const { tabs, selectedTab } = this.props.dockStore;
     const currentIndex = tabs.indexOf(selectedTab);
     const nextIndex = currentIndex + direction;
 
-    // check if moving to the next tab is possible.
-    if (direction === 1 && currentIndex!== -1 && nextIndex >= tabs.length) return;
-
-    // check if moving to the previous tab is possible
-    if (direction === -1 && currentIndex!== -1 && nextIndex < 0) return;
+    // check if moving to the next or previous tab is possible.
+    if (currentIndex!== -1 && (nextIndex >= tabs.length || nextIndex < 0)) return;
 
     const nextElement = tabs[nextIndex];
 
@@ -158,7 +156,6 @@ class NonInjectedDock extends React.Component<Props & Dependencies> {
             selectedTab={selectedTab}
             autoFocus={isOpen}
             onChangeTab={this.onChangeTab}
-            dockStore={dockStore}
           />
           <div className="toolbar flex gaps align-center box grow">
             <div className="dock-menu box grow">