new-log-viewer: Persist active tab across sessions. (#93)

Author: junhaoliao

new-log-viewer/src/components/CentralContainer/Sidebar/index.tsx

@@ -1,10 +1,17 @@
 import {
     useCallback,
+    useEffect,
+    useMemo,
     useRef,
     useState,
 } from "react";
 
+import {CONFIG_KEY} from "../../../typings/config";
 import {TAB_NAME} from "../../../typings/tab";
+import {
+    getConfig,
+    setConfig,
+} from "../../../utils/config";
 import ResizeHandle from "./ResizeHandle";
 import SidebarTabs from "./SidebarTabs";
 
@@ -42,8 +49,8 @@ const setPanelWidth = (newValue: number) => {
  * @return
  */
 const Sidebar = () => {
-    const [activeTabName, setActiveTabName] = useState<TAB_NAME>(TAB_NAME.FILE_INFO);
-
+    const initialTabName = useMemo(() => getConfig(CONFIG_KEY.INITIAL_TAB_NAME), []);
+    const [activeTabName, setActiveTabName] = useState<TAB_NAME>(initialTabName);
     const tabListRef = useRef<HTMLDivElement>(null);
 
     const handleActiveTabNameChange = useCallback((tabName: TAB_NAME) => {
@@ -53,14 +60,15 @@ const Sidebar = () => {
             return;
         }
 
+        let newTabName = tabName;
+        let newPanelWidth = PANEL_DEFAULT_WIDTH_IN_PIXELS;
         if (activeTabName === tabName) {
-            setActiveTabName(TAB_NAME.NONE);
-            setPanelWidth(tabListRef.current.clientWidth);
-
-            return;
+            newTabName = TAB_NAME.NONE;
+            newPanelWidth = tabListRef.current.clientWidth;
         }
-        setActiveTabName(tabName);
-        setPanelWidth(PANEL_DEFAULT_WIDTH_IN_PIXELS);
+        setActiveTabName(newTabName);
+        setConfig({key: CONFIG_KEY.INITIAL_TAB_NAME, value: newTabName});
+        setPanelWidth(newPanelWidth);
     }, [activeTabName]);
 
     const handleResizeHandleRelease = useCallback(() => {
@@ -92,6 +100,18 @@ const Sidebar = () => {
         }
     }, []);
 
+    // On initialization, do not show panel if there is no active tab.
+    useEffect(() => {
+        if (null === tabListRef.current) {
+            console.error("Unexpected null tabListRef.current");
+
+            return;
+        }
+        if (TAB_NAME.NONE === initialTabName) {
+            setPanelWidth(tabListRef.current.clientWidth);
+        }
+    }, [initialTabName]);
+
     return (
         <div className={"sidebar-tabs-container"}>
             <SidebarTabs

new-log-viewer/src/typings/config.ts

@@ -1,4 +1,5 @@
 import {JsonlDecoderOptionsType} from "./decoders";
+import {TAB_NAME} from "./tab";
 
 
 enum THEME_NAME {
@@ -9,6 +10,7 @@ enum THEME_NAME {
 
 enum CONFIG_KEY {
     DECODER_OPTIONS = "decoderOptions",
+    INITIAL_TAB_NAME = "initialTabName",
     THEME = "theme",
     PAGE_SIZE = "pageSize",
 }
@@ -18,13 +20,15 @@ enum LOCAL_STORAGE_KEY {
     DECODER_OPTIONS_FORMAT_STRING = `${CONFIG_KEY.DECODER_OPTIONS}/formatString`,
     DECODER_OPTIONS_LOG_LEVEL_KEY = `${CONFIG_KEY.DECODER_OPTIONS}/logLevelKey`,
     DECODER_OPTIONS_TIMESTAMP_KEY = `${CONFIG_KEY.DECODER_OPTIONS}/timestampKey`,
+    INITIAL_TAB_NAME = CONFIG_KEY.INITIAL_TAB_NAME,
     THEME = CONFIG_KEY.THEME,
     PAGE_SIZE = CONFIG_KEY.PAGE_SIZE,
 }
 /* eslint-enable @typescript-eslint/prefer-literal-enum-member */
 
 type ConfigMap = {
     [CONFIG_KEY.DECODER_OPTIONS]: JsonlDecoderOptionsType,
+    [CONFIG_KEY.INITIAL_TAB_NAME]: TAB_NAME,
     [CONFIG_KEY.THEME]: THEME_NAME,
     [CONFIG_KEY.PAGE_SIZE]: number,
 };

new-log-viewer/src/utils/config.ts

@@ -7,6 +7,7 @@ import {
     THEME_NAME,
 } from "../typings/config";
 import {DecoderOptionsType} from "../typings/decoders";
+import {TAB_NAME} from "../typings/tab";
 
 
 const EXPORT_LOGS_CHUNK_SIZE = 10_000;
@@ -22,6 +23,7 @@ const CONFIG_DEFAULT: ConfigMap = Object.freeze({
         logLevelKey: "log.level",
         timestampKey: "@timestamp",
     },
+    [CONFIG_KEY.INITIAL_TAB_NAME]: TAB_NAME.FILE_INFO,
     [CONFIG_KEY.THEME]: THEME_NAME.SYSTEM,
     [CONFIG_KEY.PAGE_SIZE]: 10_000,
 });
@@ -43,6 +45,9 @@ const testConfig = ({key, value}: ConfigUpdate): Nullable<string> => {
                 result = "Decoder options cannot be empty.";
             }
             break;
+        case CONFIG_KEY.INITIAL_TAB_NAME:
+            // This config option is not intended for direct user input.
+            break;
         case CONFIG_KEY.THEME:
             throw new Error(`"${key}" cannot be managed using these utilities.`);
         case CONFIG_KEY.PAGE_SIZE:
@@ -89,6 +94,9 @@ const setConfig = ({key, value}: ConfigUpdate): Nullable<string> => {
                 value.timestampKey
             );
             break;
+        case CONFIG_KEY.INITIAL_TAB_NAME:
+            window.localStorage.setItem(CONFIG_KEY.INITIAL_TAB_NAME, value.toString());
+            break;
         case CONFIG_KEY.THEME:
             throw new Error(`"${key}" cannot be managed using these utilities.`);
         case CONFIG_KEY.PAGE_SIZE:
@@ -125,6 +133,9 @@ const getConfig = <T extends CONFIG_KEY>(key: T): ConfigMap[T] => {
                 ),
             } as DecoderOptionsType;
             break;
+        case CONFIG_KEY.INITIAL_TAB_NAME:
+            value = window.localStorage.getItem(LOCAL_STORAGE_KEY.INITIAL_TAB_NAME);
+            break;
         case CONFIG_KEY.THEME:
             throw new Error(`"${key}" cannot be managed using these utilities.`);
         case CONFIG_KEY.PAGE_SIZE: