fix(editor): Ensure page reloads after toggling prettify state (fixes #379). (#380)

Author: junhaoliao

docs/src/dev-guide/contributing-validation.md

@@ -39,6 +39,6 @@ still be tested manually:
   * Exporting all logs to a file
   * Toggling tabbed panels in the sidebar
   * Using keyboard shortcuts
-  * Toggling "Prettify" in both the status bar and the address bar
+  * Toggling "Prettify" via the status bar button, the address bar (URL hash), and the Monaco action
 
 [gh-workflow-test]: https://github.com/y-scope/yscope-log-viewer/blob/main/.github/workflows/test.yaml

src/components/Editor/index.tsx

@@ -17,7 +17,6 @@ import {
     CONFIG_KEY,
     THEME_NAME,
 } from "../../typings/config";
-import {HASH_PARAM_NAMES} from "../../typings/url";
 import {BeginLineNumToLogEventNumMap} from "../../typings/worker";
 import {
     ACTION_NAME,
@@ -33,7 +32,10 @@ import {
     getMapValueWithNearestLessThanOrEqualKey,
 } from "../../utils/data";
 import {updateWindowUrlHashParams} from "../../utils/url";
-import {updateViewHashParams} from "../../utils/url/urlHash";
+import {
+    togglePrettify,
+    updateViewHashParams,
+} from "../../utils/url/urlHash";
 import MonacoInstance from "./MonacoInstance";
 import {goToPositionAndCenter} from "./MonacoInstance/utils";
 
@@ -163,13 +165,7 @@ const handleEditorCustomAction = (
             break;
         }
         case ACTION_NAME.TOGGLE_PRETTIFY: {
-            const {isPrettified, setIsPrettified} = useViewStore.getState();
-            const newIsPrettified = !isPrettified;
-            updateWindowUrlHashParams({
-                [HASH_PARAM_NAMES.IS_PRETTIFIED]: newIsPrettified,
-            });
-            setIsPrettified(newIsPrettified);
-            updateViewHashParams();
+            togglePrettify();
             break;
         }
         case ACTION_NAME.TOGGLE_WORD_WRAP:

src/components/StatusBar/index.tsx

@@ -1,5 +1,3 @@
-import React, {useCallback} from "react";
-
 import {
     Button,
     Divider,
@@ -15,14 +13,10 @@ import useLogFileStore from "../../stores/logFileStore";
 import useUiStore from "../../stores/uiStore";
 import useViewStore from "../../stores/viewStore";
 import {UI_ELEMENT} from "../../typings/states";
-import {HASH_PARAM_NAMES} from "../../typings/url";
 import {ACTION_NAME} from "../../utils/actions";
 import {isDisabled} from "../../utils/states";
-import {
-    copyPermalinkToClipboard,
-    updateWindowUrlHashParams,
-} from "../../utils/url";
-import {updateViewHashParams} from "../../utils/url/urlHash";
+import {copyPermalinkToClipboard} from "../../utils/url";
+import {togglePrettify} from "../../utils/url/urlHash";
 import LogLevelSelect from "./LogLevelSelect";
 import StatusBarToggleButton from "./StatusBarToggleButton";
 
@@ -47,22 +41,6 @@ const StatusBar = () => {
     const numEvents = useLogFileStore((state) => state.numEvents);
     const uiState = useUiStore((state) => state.uiState);
 
-    const handleStatusButtonClick = useCallback((ev: React.MouseEvent<HTMLButtonElement>) => {
-        const {actionName} = ev.currentTarget.dataset;
-
-        switch (actionName) {
-            case ACTION_NAME.TOGGLE_PRETTIFY:
-                updateWindowUrlHashParams({
-                    [HASH_PARAM_NAMES.IS_PRETTIFIED]: false === isPrettified,
-                });
-                updateViewHashParams();
-                break;
-            default:
-                console.error(`Unexpected action: ${actionName}`);
-                break;
-        }
-    }, [isPrettified]);
-
     const isPrettifyButtonDisabled = isDisabled(uiState, UI_ELEMENT.PRETTIFY_BUTTON);
 
     return (
@@ -104,7 +82,7 @@ const StatusBar = () => {
                 tooltipTitle={false === isPrettified ?
                     "Turn on Prettify" :
                     "Turn off Prettify"}
-                onClick={handleStatusButtonClick}/>
+                onClick={togglePrettify}/>
         </Sheet>
     );
 };

src/utils/url/urlHash.ts

@@ -4,6 +4,7 @@ import {handleErrorWithNotification} from "../../stores/notificationStore";
 import useQueryStore from "../../stores/queryStore";
 import useViewStore from "../../stores/viewStore";
 import {Nullable} from "../../typings/common";
+import {HASH_PARAM_NAMES} from "../../typings/url";
 import {
     CURSOR_CODE,
     CursorType,
@@ -169,7 +170,17 @@ const updateQueryHashParams = () => {
     return isQueryModified;
 };
 
+/**
+ * Toggles the prettify state for formatted log viewing.
+ */
+const togglePrettify = () => {
+    const {isPrettified} = useViewStore.getState();
+    updateWindowUrlHashParams({[HASH_PARAM_NAMES.IS_PRETTIFIED]: !isPrettified});
+    updateViewHashParams();
+};
+
 export {
+    togglePrettify,
     updateQueryHashParams,
     updateViewHashParams,
 };