TabsManager in react (#500)

src/hooks/useObservable.ts

@@ -0,0 +1,13 @@
+import { Observable } from "knockout";
+import { useEffect, useState } from "react";
+
+export function useObservable<T>(observable: Pick<Observable<T>, "subscribe" | "peek">): T {
+  const [, setValue] = useState(0);
+
+  useEffect(() => {
+    const subscription = observable.subscribe(() => setValue((n) => 1 + n), undefined, "change");
+    return () => subscription.dispose();
+  }, [observable]);
+
+  return observable.peek();
+}

src/hooks/useObservableState.ts

@@ -1,16 +0,0 @@
-import { isObservableArray, Observable, ObservableArray } from "knockout";
-import { useEffect, useState } from "react";
-
-export function useObservableState<T>(observable: Observable<T>): [T, (s: T) => void];
-export function useObservableState<T>(observable: ObservableArray<T>): [T[], (s: T[]) => void];
-export function useObservableState<T>(observable: ObservableArray<T> | Observable<T>): [T | T[], (s: T | T[]) => void] {
-  const [value, setValue] = useState(observable());
-
-  useEffect(() => {
-    isObservableArray(observable)
-      ? observable.subscribe((values) => setValue([...values]))
-      : observable.subscribe(setValue);
-  }, [observable]);
-
-  return [value, observable];
-}

src/hooks/useTabs.ts

@@ -1,16 +1,18 @@
 import { useState } from "react";
 import TabsBase from "../Explorer/Tabs/TabsBase";
 import { TabsManager } from "../Explorer/Tabs/TabsManager";
-import { useObservableState } from "./useObservableState";
+import { useObservable } from "./useObservable";
 
 export type UseTabs = {
   tabs: readonly TabsBase[];
+  activeTab: TabsBase;
   tabsManager: TabsManager;
 };
 
 export function useTabs(): UseTabs {
   const [tabsManager] = useState(() => new TabsManager());
-  const [tabs] = useObservableState(tabsManager.openedTabs);
+  const tabs = useObservable(tabsManager.openedTabs);
+  const activeTab = useObservable(tabsManager.activeTab);
 
-  return { tabs, tabsManager };
+  return { tabs, activeTab, tabsManager };
 }