feat: Migrate utilities from UrlContextProvider to Zustand stores (resolves #269; fixes #294; resolves #306).

src/App.tsx

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

src/components/AppController.tsx

@@ -1,16 +1,11 @@
+/* eslint max-statements: ["error", 30] */
 import React, {
     useContext,
     useEffect,
     useRef,
 } from "react";
 
 import {NotificationContext} from "../contexts/NotificationContextProvider";
-import {
-    updateWindowUrlHashParams,
-    URL_HASH_PARAMS_DEFAULT,
-    URL_SEARCH_PARAMS_DEFAULT,
-    UrlContext,
-} from "../contexts/UrlContextProvider";
 import useContextStore from "../stores/contextStore";
 import useLogFileManagerStore from "../stores/logFileManagerProxyStore";
 import useLogFileStore from "../stores/logFileStore";
@@ -28,6 +23,13 @@ import {
     isWithinBounds,
 } from "../utils/data";
 import {clamp} from "../utils/math";
+import {
+    getWindowUrlHashParams,
+    getWindowUrlSearchParams,
+    updateWindowUrlHashParams,
+    URL_HASH_PARAMS_DEFAULT,
+    URL_SEARCH_PARAMS_DEFAULT,
+} from "../utils/url.ts";
 
 
 /**
@@ -41,9 +43,9 @@ import {clamp} from "../utils/math";
 const updateUrlIfEventOnPage = (
     logEventNum: number,
     logEventNumsOnPage: number[]
-): boolean => {
+): {isUpdated: boolean; nearestLogEventNum: number} => {
     if (false === isWithinBounds(logEventNumsOnPage, logEventNum)) {
-        return false;
+        return {isUpdated: false, nearestLogEventNum: 0};
     }
 
     const nearestIdx = findNearestLessThanOrEqualElement(
@@ -65,7 +67,7 @@ const updateUrlIfEventOnPage = (
         logEventNum: nearestLogEventNum,
     });
 
-    return true;
+    return {isUpdated: true, nearestLogEventNum: nearestLogEventNum};
 };
 
 interface AppControllerProps {
@@ -81,40 +83,75 @@ interface AppControllerProps {
  */
 const AppController = ({children}: AppControllerProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, isPrettified, logEventNum} = useContext(UrlContext);
 
     // States
     const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
-    const setIsPrettified = useViewStore((state) => state.updateIsPrettified);
+
+    const fileSrc = useLogFileStore((state) => state.fileSrc);
     const loadFile = useLogFileStore((state) => state.loadFile);
+    const setFileSrc = useLogFileStore((state) => state.setFileSrc);
+
+    const isPrettified = useViewStore((state) => state.isPrettified);
+    const updateIsPrettified = useViewStore((state) => state.updateIsPrettified);
+
     const {logFileManagerProxy} = useLogFileManagerStore.getState();
     const numEvents = useLogFileStore((state) => state.numEvents);
-    const setLogEventNum = useContextStore((state) => state.setLogEventNum);
+
+    const logEventNum = useViewStore((state) => state.logEventNum);
+    const setLogEventNum = useViewStore((state) => state.setLogEventNum);
+
     const setUiState = useUiStore((state) => state.setUiState);
     const setPostPopUp = useContextStore((state) => state.setPostPopUp);
 
     // Refs
-    const isPrettifiedRef = useRef<boolean>(isPrettified ?? false);
+    const isPrettifiedRef = useRef<boolean>(isPrettified);
     const logEventNumRef = useRef(logEventNum);
 
-    // Synchronize `logEventNumRef` with `logEventNum`.
     useEffect(() => {
-        if (null !== logEventNum) {
-            logEventNumRef.current = logEventNum;
-            setLogEventNum(logEventNum);
-        }
-    }, [
-        logEventNum,
+        const handleHashChange = () => {
+            const hashParams = getWindowUrlHashParams();
+
+            if (null !== hashParams.logEventNum) {
+                setLogEventNum(hashParams.logEventNum);
+            }
+
+            if (null !== hashParams.isPrettified) {
+                updateIsPrettified(hashParams.isPrettified);
+            }
+
+            // It is weird that updating search params when hash params changed, even there
+            // might be hidden condition that search params always change together with hash
+            // params.
+            const searchParams = getWindowUrlSearchParams();
+
+            if (null !== searchParams.filePath) {
+                setFileSrc(searchParams.filePath);
+            }
+        };
+
+        handleHashChange();
+
+        window.addEventListener("hashchange", handleHashChange);
+
+        return () => {
+            window.removeEventListener("hashchange", handleHashChange);
+        };
+    }, [setFileSrc,
         setLogEventNum,
-    ]);
+        updateIsPrettified]);
 
     // Synchronize `isPrettifiedRef` with `isPrettified`.
     useEffect(() => {
-        isPrettifiedRef.current = isPrettified ?? false;
-        setIsPrettified(isPrettifiedRef.current);
+        isPrettifiedRef.current = isPrettified;
     }, [
         isPrettified,
-        setIsPrettified,
+    ]);
+
+    // Synchronize `logEventNumRef` with `logEventNum`.
+    useEffect(() => {
+        logEventNumRef.current = logEventNum;
+    }, [
+        logEventNum,
     ]);
 
     // On `logEventNum` update, clamp it then switch page if necessary or simply update the URL.
@@ -128,8 +165,15 @@ const AppController = ({children}: AppControllerProps) => {
 
         const clampedLogEventNum = clamp(logEventNum, 1, numEvents);
 
-        if (updateUrlIfEventOnPage(clampedLogEventNum, logEventNumsOnPage)) {
+        const {
+            isUpdated,
+            nearestLogEventNum,
+        } = updateUrlIfEventOnPage(clampedLogEventNum, logEventNumsOnPage);
+
+        if (isUpdated) {
             // No need to request a new page since the log event is on the current page.
+            setLogEventNum(nearestLogEventNum);
+
             return;
         }
 
@@ -156,13 +200,14 @@ const AppController = ({children}: AppControllerProps) => {
         logEventNum,
         logFileManagerProxy,
         numEvents,
+        setLogEventNum,
         setUiState,
         postPopUp,
     ]);
 
-    // On `filePath` update, load file.
+    // On `fileSrc` update, load file.
     useEffect(() => {
-        if (URL_SEARCH_PARAMS_DEFAULT.filePath === filePath) {
+        if (URL_SEARCH_PARAMS_DEFAULT.filePath === fileSrc) {
             return;
         }
 
@@ -173,9 +218,9 @@ const AppController = ({children}: AppControllerProps) => {
                 args: {eventNum: logEventNumRef.current},
             };
         }
-        loadFile(filePath, cursor);
+        loadFile(fileSrc, cursor);
     }, [
-        filePath,
+        fileSrc,
         loadFile,
     ]);
 

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

@@ -3,7 +3,8 @@ import {
     Typography,
 } from "@mui/joy";
 
-import {updateWindowUrlHashParams} from "../../../../../contexts/UrlContextProvider";
+import useViewStore from "../../../../../stores/viewStore.ts";
+import {updateWindowUrlHashParams} from "../../../../../utils/url.ts";
 
 import "./Result.css";
 
@@ -36,8 +37,10 @@ const Result = ({logEventNum, message, matchRange}: ResultProps) => {
         message.slice(...matchRange),
         message.slice(matchRange[1]),
     ];
+    const setLogEventNum = useViewStore((state) => state.setLogEventNum);
     const handleResultButtonClick = () => {
         updateWindowUrlHashParams({logEventNum});
+        setLogEventNum(logEventNum);
     };
 
     return (

src/components/Editor/index.tsx

@@ -1,8 +1,8 @@
 /* eslint max-lines: ["error", 350] */
-/* eslint max-lines-per-function: ["error", 170] */
+/* eslint max-lines-per-function: ["error", 200] */
+/* eslint max-statements: ["error", 30] */
 import {
     useCallback,
-    useContext,
     useEffect,
     useRef,
     useState,
@@ -11,10 +11,6 @@ import {
 import {useColorScheme} from "@mui/joy";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
-import {
-    updateWindowUrlHashParams,
-    UrlContext,
-} from "../../contexts/UrlContextProvider";
 import useViewStore from "../../stores/viewStore";
 import {Nullable} from "../../typings/common";
 import {
@@ -36,6 +32,7 @@ import {
     getMapKeyByValue,
     getMapValueWithNearestLessThanOrEqualKey,
 } from "../../utils/data";
+import {updateWindowUrlHashParams} from "../../utils/url.ts";
 import MonacoInstance from "./MonacoInstance";
 import {goToPositionAndCenter} from "./MonacoInstance/utils";
 
@@ -138,16 +135,22 @@ const Editor = () => {
     const {mode, systemMode} = useColorScheme();
 
     const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
+    const isPrettified = useViewStore((state) => state.isPrettified);
+    const updateIsPrettified = useViewStore((state) => state.updateIsPrettified);
+
     const logData = useViewStore((state) => state.logData);
+
+    const logEventNum = useViewStore((state) => state.logEventNum);
+    const setLogEventNum = useViewStore((state) => state.setLogEventNum);
+
     const loadPageByAction = useViewStore((state) => state.loadPageByAction);
-    const {isPrettified, logEventNum} = useContext(UrlContext);
 
     const [lineNum, setLineNum] = useState<number>(1);
     const beginLineNumToLogEventNumRef = useRef<BeginLineNumToLogEventNumMap>(
         beginLineNumToLogEventNum
     );
     const editorRef = useRef<Nullable<monaco.editor.IStandaloneCodeEditor>>(null);
-    const isPrettifiedRef = useRef<boolean>(isPrettified ?? false);
+    const isPrettifiedRef = useRef<boolean>(isPrettified);
     const isMouseDownRef = useRef<boolean>(false);
     const pageSizeRef = useRef(getConfig(CONFIG_KEY.PAGE_SIZE));
 
@@ -176,18 +179,22 @@ const Editor = () => {
             case ACTION_NAME.COPY_LOG_EVENT:
                 handleCopyLogEventAction(editor, beginLineNumToLogEventNumRef.current);
                 break;
-            case ACTION_NAME.TOGGLE_PRETTIFY:
+            case ACTION_NAME.TOGGLE_PRETTIFY: {
+                const newIsPrettified = !isPrettifiedRef.current;
                 updateWindowUrlHashParams({
-                    [HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettifiedRef.current,
+                    [HASH_PARAM_NAMES.IS_PRETTIFIED]: newIsPrettified,
                 });
+                updateIsPrettified(newIsPrettified);
                 break;
+            }
             case ACTION_NAME.TOGGLE_WORD_WRAP:
                 handleToggleWordWrapAction(editor);
                 break;
             default:
                 break;
         }
-    }, [loadPageByAction]);
+    }, [loadPageByAction,
+        updateIsPrettified]);
 
     /**
      * Sets `editorRef` and configures callbacks for mouse down detection.
@@ -255,7 +262,8 @@ const Editor = () => {
             return;
         }
         updateWindowUrlHashParams({logEventNum: newLogEventNum});
-    }, []);
+        setLogEventNum(newLogEventNum);
+    }, [setLogEventNum]);
 
     // Synchronize `beginLineNumToLogEventNumRef` with `beginLineNumToLogEventNum`.
     useEffect(() => {
@@ -264,7 +272,7 @@ const Editor = () => {
 
     // Synchronize `isPrettifiedRef` with `isPrettified`.
     useEffect(() => {
-        isPrettifiedRef.current = isPrettified ?? false;
+        isPrettifiedRef.current = isPrettified;
     }, [isPrettified]);
 
     // On `logEventNum` update, update line number in the editor.