refactor: Replace StateContextProvider with Zustand for state management (resolves #168, resolves #211). (#224)

Co-authored-by: hoophalab <[email protected]>
Co-authored-by: Junhao Liao <[email protected]>

Author: 3 people

package-lock.json

@@ -31,11 +31,13 @@
     "@mui/joy": "^5.0.0-beta.51",
     "axios": "^1.8.2",
     "clp-ffi-js": "^0.5.0",
+    "comlink": "^4.4.2",
     "dayjs": "^1.11.13",
     "js-beautify": "^1.15.4",
     "monaco-editor": "0.50.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "zustand": "^5.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.26.0",

package.json

@@ -1,6 +1,6 @@
 import Layout from "./components/Layout";
+import AppController from "./contexts/AppController";
 import NotificationContextProvider from "./contexts/NotificationContextProvider";
-import StateContextProvider from "./contexts/StateContextProvider";
 import UrlContextProvider from "./contexts/UrlContextProvider";
 
 
@@ -13,9 +13,9 @@ const App = () => {
     return (
         <NotificationContextProvider>
             <UrlContextProvider>
-                <StateContextProvider>
+                <AppController>
                     <Layout/>
-                </StateContextProvider>
+                </AppController>
             </UrlContextProvider>
         </NotificationContextProvider>
     );

src/App.tsx

@@ -1,7 +1,4 @@
-import {
-    useContext,
-    useMemo,
-} from "react";
+import {useMemo} from "react";
 
 import {
     Divider,
@@ -11,7 +8,7 @@ import {
 import AbcIcon from "@mui/icons-material/Abc";
 import StorageIcon from "@mui/icons-material/Storage";
 
-import {StateContext} from "../../../../contexts/StateContextProvider";
+import useLogFileStore from "../../../../stores/logFileStore";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
@@ -27,7 +24,8 @@ import CustomTabPanel from "./CustomTabPanel";
  * @return
  */
 const FileInfoTabPanel = () => {
-    const {fileName, onDiskFileSizeInBytes} = useContext(StateContext);
+    const fileName = useLogFileStore((state) => state.fileName);
+    const onDiskFileSizeInBytes = useLogFileStore((state) => state.onDiskFileSizeInBytes);
 
     const isFileUnloaded = 0 === fileName.length;
     const formattedOnDiskSize = useMemo(

src/components/CentralContainer/Sidebar/SidebarTabs/FileInfoTabPanel.tsx

@@ -1,19 +1,14 @@
-import React, {
-    useContext,
-    useState,
-} from "react";
+import React from "react";
 
 import {
     LinearProgress,
     Stack,
     Textarea,
 } from "@mui/joy";
 
-import {StateContext} from "../../../../../contexts/StateContextProvider";
-import {
-    QUERY_PROGRESS_VALUE_MAX,
-    QueryArgs,
-} from "../../../../../typings/query";
+import useQueryStore from "../../../../../stores/queryStore";
+import useUiStore from "../../../../../stores/uiStore";
+import {QUERY_PROGRESS_VALUE_MAX} from "../../../../../typings/query";
 import {UI_ELEMENT} from "../../../../../typings/states";
 import {isDisabled} from "../../../../../utils/states";
 import ToggleIconButton from "./ToggleIconButton";
@@ -27,34 +22,29 @@ import "./QueryInputBox.css";
  * @return
  */
 const QueryInputBox = () => {
-    const {queryProgress, startQuery, uiState} = useContext(StateContext);
-
-    const [queryString, setQueryString] = useState<string>("");
-    const [isCaseSensitive, setIsCaseSensitive] = useState<boolean>(false);
-    const [isRegex, setIsRegex] = useState<boolean>(false);
-
-    const handleQuerySubmit = (newArgs: Partial<QueryArgs>) => {
-        startQuery({
-            isCaseSensitive: isCaseSensitive,
-            isRegex: isRegex,
-            queryString: queryString,
-            ...newArgs,
-        });
-    };
+    const isCaseSensitive = useQueryStore((state) => state.queryIsCaseSensitive);
+    const isRegex = useQueryStore((state) => state.queryIsRegex);
+    const querystring = useQueryStore((state) => state.queryString);
+    const setQueryIsCaseSensitive = useQueryStore((state) => state.setQueryIsCaseSensitive);
+    const setQueryIsRegex = useQueryStore((state) => state.setQueryIsRegex);
+    const setQueryString = useQueryStore((state) => state.setQueryString);
+    const queryProgress = useQueryStore((state) => state.queryProgress);
+    const startQuery = useQueryStore((state) => state.startQuery);
+    const uiState = useUiStore((state) => state.uiState);
 
     const handleQueryInputChange = (ev: React.ChangeEvent<HTMLTextAreaElement>) => {
         setQueryString(ev.target.value);
-        handleQuerySubmit({queryString: ev.target.value});
+        startQuery();
     };
 
     const handleCaseSensitivityButtonClick = () => {
-        handleQuerySubmit({isCaseSensitive: !isCaseSensitive});
-        setIsCaseSensitive(!isCaseSensitive);
+        setQueryIsCaseSensitive(!isCaseSensitive);
+        startQuery();
     };
 
     const handleRegexButtonClick = () => {
-        handleQuerySubmit({isRegex: !isRegex});
-        setIsRegex(!isRegex);
+        setQueryIsRegex(!isRegex);
+        startQuery();
     };
 
     const isQueryInputBoxDisabled = isDisabled(uiState, UI_ELEMENT.QUERY_INPUT_BOX);
@@ -66,6 +56,7 @@ const QueryInputBox = () => {
                 maxRows={7}
                 placeholder={"Search"}
                 size={"sm"}
+                value={querystring}
                 endDecorator={
                     <Stack
                         direction={"row"}

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/QueryInputBox.tsx

@@ -1,7 +1,4 @@
-import {
-    useContext,
-    useState,
-} from "react";
+import {useState} from "react";
 
 import {
     AccordionGroup,
@@ -11,7 +8,7 @@ import {
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 
-import {StateContext} from "../../../../../contexts/StateContextProvider";
+import useQueryStore from "../../../../../stores/queryStore";
 import {
     TAB_DISPLAY_NAMES,
     TAB_NAME,
@@ -30,7 +27,7 @@ import "./index.css";
  * @return
  */
 const SearchTabPanel = () => {
-    const {queryResults} = useContext(StateContext);
+    const queryResults = useQueryStore((state) => state.queryResults);
 
     const [isAllExpanded, setIsAllExpanded] = useState<boolean>(true);
 

src/components/CentralContainer/Sidebar/SidebarTabs/SearchTabPanel/index.tsx

@@ -16,7 +16,7 @@ import {
 } from "@mui/joy";
 
 import {NotificationContext} from "../../../../../contexts/NotificationContextProvider";
-import {StateContext} from "../../../../../contexts/StateContextProvider";
+import useViewStore from "../../../../../stores/viewStore";
 import {Nullable} from "../../../../../typings/common";
 import {
     CONFIG_KEY,
@@ -108,7 +108,7 @@ const handleConfigFormReset = (ev: React.FormEvent) => {
  */
 const SettingsTabPanel = () => {
     const {postPopUp} = useContext(NotificationContext);
-    const {loadPageByAction} = useContext(StateContext);
+    const loadPageByAction = useViewStore((state) => state.loadPageByAction);
 
     const handleConfigFormSubmit = useCallback((ev: React.FormEvent) => {
         ev.preventDefault();

src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx

@@ -1,7 +1,4 @@
-import {
-    Ref,
-    useContext,
-} from "react";
+import {Ref} from "react";
 
 import {
     TabList,
@@ -14,7 +11,7 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import SearchIcon from "@mui/icons-material/Search";
 import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
 
-import {StateContext} from "../../../../contexts/StateContextProvider";
+import useUiStore from "../../../../stores/uiStore";
 import {TAB_NAME} from "../../../../typings/tab";
 import {openInNewTab} from "../../../../utils/url";
 import FileInfoTabPanel from "./FileInfoTabPanel";
@@ -49,11 +46,9 @@ interface SidebarTabsProps {
  * @param props.ref Reference object used to access the TabList DOM element.
  * @return
  */
-const SidebarTabs = ({
-    ref,
-}: SidebarTabsProps) => {
-    const {activeTabName, setActiveTabName} = useContext(StateContext);
-
+const SidebarTabs = ({ref}: SidebarTabsProps) => {
+    const activeTabName = useUiStore((state) => state.activeTabName);
+    const setActiveTabName = useUiStore((state) => state.setActiveTabName);
     const handleTabButtonClick = (tabName: TAB_NAME) => {
         switch (tabName) {
             case TAB_NAME.DOCUMENTATION:

src/components/CentralContainer/Sidebar/SidebarTabs/index.tsx

@@ -1,11 +1,10 @@
 import {
     useCallback,
-    useContext,
     useEffect,
     useRef,
 } from "react";
 
-import {StateContext} from "../../../contexts/StateContextProvider";
+import useUiStore from "../../../stores/uiStore";
 import {CONFIG_KEY} from "../../../typings/config";
 import {TAB_NAME} from "../../../typings/tab";
 import {setConfig} from "../../../utils/config";
@@ -46,7 +45,8 @@ const setPanelWidth = (newValue: number) => {
  * @return
  */
 const Sidebar = () => {
-    const {activeTabName, setActiveTabName} = useContext(StateContext);
+    const activeTabName = useUiStore((state) => state.activeTabName);
+    const setActiveTabName = useUiStore((state) => state.setActiveTabName);
     const tabListRef = useRef<HTMLDivElement>(null);
 
     const handleResizeHandleRelease = useCallback(() => {

src/components/CentralContainer/Sidebar/index.tsx

@@ -1,9 +1,7 @@
-import React, {
-    useContext,
-    useState,
-} from "react";
+import React, {useState} from "react";
 
-import {StateContext} from "../../contexts/StateContextProvider";
+import useLogFileStore from "../../stores/logFileStore";
+import useUiStore from "../../stores/uiStore";
 import {UI_ELEMENT} from "../../typings/states";
 import {CURSOR_CODE} from "../../typings/worker";
 import {isDisabled} from "../../utils/states";
@@ -23,7 +21,8 @@ interface DropFileContextProviderProps {
  * @return
  */
 const DropFileContainer = ({children}: DropFileContextProviderProps) => {
-    const {loadFile, uiState} = useContext(StateContext);
+    const loadFile = useLogFileStore((state) => state.loadFile);
+    const uiState = useUiStore((state) => state.uiState);
     const [isFileHovering, setIsFileHovering] = useState(false);
     const disabled = isDisabled(uiState, UI_ELEMENT.DRAG_AND_DROP);
 

src/components/DropFileContainer/index.tsx

@@ -11,11 +11,11 @@ import {
 import {useColorScheme} from "@mui/joy";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
-import {StateContext} from "../../contexts/StateContextProvider";
 import {
     updateWindowUrlHashParams,
     UrlContext,
 } from "../../contexts/UrlContextProvider";
+import useViewStore from "../../stores/viewStore";
 import {Nullable} from "../../typings/common";
 import {
     CONFIG_KEY,
@@ -137,7 +137,9 @@ const handleWordWrapAction = (editor: monaco.editor.IStandaloneCodeEditor) => {
 const Editor = () => {
     const {mode, systemMode} = useColorScheme();
 
-    const {beginLineNumToLogEventNum, logData, loadPageByAction} = useContext(StateContext);
+    const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
+    const logData = useViewStore((state) => state.logData);
+    const loadPageByAction = useViewStore((state) => state.loadPageByAction);
     const {isPrettified, logEventNum} = useContext(UrlContext);
 
     const [lineNum, setLineNum] = useState<number>(1);