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

src/components/AppController.tsx

@@ -81,11 +81,12 @@ interface AppControllerProps {
  */
 const AppController = ({children}: AppControllerProps) => {
     const {postPopUp} = useContext(NotificationContext);
-    const {filePath, isPrettified, logEventNum} = useContext(UrlContext);
+    const {filePath, logEventNum} = useContext(UrlContext);
 
     // States
     const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
-    const setIsPrettified = useViewStore((state) => state.updateIsPrettified);
+    const isPrettified = useViewStore((state) => state.isPrettified);
+    const setIsPrettified = useViewStore((state) => state.setIsPrettified);
     const loadFile = useLogFileStore((state) => state.loadFile);
     const {logFileManagerProxy} = useLogFileManagerStore.getState();
     const numEvents = useLogFileStore((state) => state.numEvents);

src/components/StatusBar/index.tsx

@@ -25,6 +25,7 @@ import LogLevelSelect from "./LogLevelSelect";
 import StatusBarToggleButton from "./StatusBarToggleButton";
 
 import "./index.css";
+import useViewStore from "../../stores/viewStore.ts";
 
 
 /**
@@ -42,7 +43,9 @@ const handleCopyLinkButtonClick = () => {
 const StatusBar = () => {
     const numEvents = useLogFileStore((state) => state.numEvents);
     const uiState = useUiStore((state) => state.uiState);
-    const {isPrettified, logEventNum} = useContext(UrlContext);
+    const {logEventNum} = useContext(UrlContext);
+    const isPrettified = useViewStore((state) => state.isPrettified);
+    const setIsPrettified = useViewStore((state) => state.setIsPrettified);
 
     const handleStatusButtonClick = (ev: React.MouseEvent<HTMLButtonElement>) => {
         const {actionName} = ev.currentTarget.dataset;
@@ -52,6 +55,7 @@ const StatusBar = () => {
                 updateWindowUrlHashParams({
                     [HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettified,
                 });
+                setIsPrettified(!isPrettified);
                 break;
             default:
                 console.error(`Unexpected action: ${actionName}`);

src/contexts/UrlContextProvider.tsx

@@ -15,6 +15,7 @@ import {
     UrlSearchParamUpdatesType,
 } from "../typings/url";
 import {getAbsoluteUrl} from "../utils/url";
+import useViewStore from "../stores/viewStore.ts";
 
 
 const UrlContext = createContext <UrlParamsType>({} as UrlParamsType);
@@ -218,10 +219,10 @@ const getWindowUrlHashParams = () => {
             parsed;
     }
 
-    const isPrettified = hashParams.get(HASH_PARAM_NAMES.IS_PRETTIFIED);
-    if (null !== isPrettified) {
-        urlHashParams[HASH_PARAM_NAMES.IS_PRETTIFIED] = "true" === isPrettified;
-    }
+    // const isPrettified = hashParams.get(HASH_PARAM_NAMES.IS_PRETTIFIED);
+    // if (null !== isPrettified) {
+    //     urlHashParams[HASH_PARAM_NAMES.IS_PRETTIFIED] = "true" === isPrettified;
+    // }
 
     return urlHashParams;
 };
@@ -247,6 +248,7 @@ const UrlContextProvider = ({children}: UrlContextProviderProps) => {
         ...searchParams,
         ...getWindowUrlHashParams(),
     });
+    const setIsPrettified = useViewStore((state) => state.setIsPrettified);
 
     useEffect(() => {
         const handleHashChange = () => {
@@ -256,6 +258,11 @@ const UrlContextProvider = ({children}: UrlContextProviderProps) => {
                 ...searchParams,
                 ...getWindowUrlHashParams(),
             });
+            const hashParams = new URLSearchParams(window.location.hash.substring(1));
+            const isPrettified = hashParams.get(HASH_PARAM_NAMES.IS_PRETTIFIED);
+            if (null !== isPrettified) {
+                setIsPrettified("true" === isPrettified);
+            }
         };
 
         window.addEventListener("hashchange", handleHashChange);

src/stores/viewStore.ts

@@ -43,7 +43,7 @@ interface ViewStoreActions {
     filterLogs: (filter: LogLevelFilter) => void;
 
     loadPageByAction: (navAction: NavigationAction) => void;
-    updateIsPrettified: (newIsPrettified: boolean) => void;
+    setIsPrettified: (newIsPrettified: boolean) => void;
     updatePageData: (pageData: PageData) => void;
 }
 
@@ -200,7 +200,7 @@ const useViewStore = create<ViewState>((set, get) => ({
     setPageNum: (newPageNum) => {
         set({pageNum: newPageNum});
     },
-    updateIsPrettified: (newIsPrettified: boolean) => {
+    setIsPrettified: (newIsPrettified: boolean) => {
         const {updatePageData} = get();
         const {logEventNum, postPopUp} = useContextStore.getState();
         const {logFileManagerProxy} = useLogFileManagerStore.getState();