refactor: Replace NotificationContext with useNotificationStore for improved state management (fixes #290, resolves #292).

junhaoliao · junhaoliao · commit 42a0c9ae950e · 2025-05-21T20:46:32.000-04:00
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,5 @@
 import AppController from "./components/AppController";
 import Layout from "./components/Layout";
-import NotificationContextProvider from "./contexts/NotificationContextProvider";
 import UrlContextProvider from "./contexts/UrlContextProvider";
 
 
@@ -11,13 +10,11 @@ import UrlContextProvider from "./contexts/UrlContextProvider";
  */
 const App = () => {
     return (
-        <NotificationContextProvider>
-            <UrlContextProvider>
-                <AppController>
-                    <Layout/>
-                </AppController>
-            </UrlContextProvider>
-        </NotificationContextProvider>
+        <UrlContextProvider>
+            <AppController>
+                <Layout/>
+            </AppController>
+        </UrlContextProvider>
     );
 };
 
diff --git a/src/components/AppController.tsx b/src/components/AppController.tsx
@@ -4,7 +4,6 @@ import React, {
     useRef,
 } from "react";
 
-import {NotificationContext} from "../contexts/NotificationContextProvider";
 import {
     updateWindowUrlHashParams,
     URL_HASH_PARAMS_DEFAULT,
@@ -14,6 +13,7 @@ import {
 import useContextStore from "../stores/contextStore";
 import useLogFileManagerStore from "../stores/logFileManagerProxyStore";
 import useLogFileStore from "../stores/logFileStore";
+import useNotificationStore from "../stores/notificationStore";
 import useUiStore from "../stores/uiStore";
 import useViewStore from "../stores/viewStore";
 import {LOG_LEVEL} from "../typings/logs";
@@ -80,15 +80,14 @@ interface AppControllerProps {
  * @return
  */
 const AppController = ({children}: AppControllerProps) => {
-    const {postPopUp} = useContext(NotificationContext);
     const {filePath, isPrettified, logEventNum} = useContext(UrlContext);
 
     // States
     const setLogEventNum = useContextStore((state) => state.setLogEventNum);
-    const setPostPopUp = useContextStore((state) => state.setPostPopUp);
     const logFileManagerProxy = useLogFileManagerStore((state) => state.logFileManagerProxy);
     const loadFile = useLogFileStore((state) => state.loadFile);
     const numEvents = useLogFileStore((state) => state.numEvents);
+    const postPopUp = useNotificationStore((state) => state.postPopUp);
     const beginLineNumToLogEventNum = useViewStore((state) => state.beginLineNumToLogEventNum);
     const setIsPrettified = useViewStore((state) => state.updateIsPrettified);
     const updatePageData = useViewStore((state) => state.updatePageData);
@@ -180,13 +179,6 @@ const AppController = ({children}: AppControllerProps) => {
         loadFile,
     ]);
 
-    useEffect(() => {
-        setPostPopUp(postPopUp);
-    }, [
-        postPopUp,
-        setPostPopUp,
-    ]);
-
     return children;
 };
 
diff --git a/src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx b/src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx
@@ -1,7 +1,4 @@
-import React, {
-    useCallback,
-    useContext,
-} from "react";
+import React, {useCallback} from "react";
 
 import {
     Box,
@@ -15,7 +12,7 @@ import {
     Textarea,
 } from "@mui/joy";
 
-import {NotificationContext} from "../../../../../contexts/NotificationContextProvider";
+import useNotificationStore from "../../../../../stores/notificationStore";
 import useViewStore from "../../../../../stores/viewStore";
 import {Nullable} from "../../../../../typings/common";
 import {
@@ -138,7 +135,7 @@ const handleConfigFormReset = (ev: React.FormEvent) => {
  * @return
  */
 const SettingsTabPanel = () => {
-    const {postPopUp} = useContext(NotificationContext);
+    const postPopUp = useNotificationStore((state) => state.postPopUp);
     const loadPageByAction = useViewStore((state) => state.loadPageByAction);
 
     const handleConfigFormSubmit = useCallback((ev: React.FormEvent) => {
diff --git a/src/components/PopUps/PopUpMessageBox.tsx b/src/components/PopUps/PopUpMessageBox.tsx
@@ -1,5 +1,4 @@
 import React, {
-    useContext,
     useEffect,
     useRef,
     useState,
@@ -16,10 +15,7 @@ import {
 
 import CloseIcon from "@mui/icons-material/Close";
 
-import {
-    NotificationContext,
-    PopUpMessage,
-} from "../../contexts/NotificationContextProvider";
+import useNotificationStore, {PopUpMessage} from "../../stores/notificationStore";
 import {WithId} from "../../typings/common";
 import {LOG_LEVEL} from "../../typings/logs";
 import {DO_NOT_TIMEOUT_VALUE} from "../../typings/notifications";
@@ -43,7 +39,8 @@ interface PopUpMessageProps {
 const PopUpMessageBox = ({message}: PopUpMessageProps) => {
     const {id, level, primaryAction, message: messageStr, title, timeoutMillis} = message;
 
-    const {handlePopUpMessageClose} = useContext(NotificationContext);
+    const handlePopUpMessageClose = useNotificationStore((state) => state.handlePopUpMessageClose);
+
     const [percentRemaining, setPercentRemaining] = useState<number>(100);
     const intervalCountRef = useRef<number>(0);
 
diff --git a/src/components/PopUps/index.tsx b/src/components/PopUps/index.tsx
@@ -1,11 +1,9 @@
-import {useContext} from "react";
-
 import {
     Snackbar,
     Stack,
 } from "@mui/joy";
 
-import {NotificationContext} from "../../contexts/NotificationContextProvider";
+import useNotificationStore from "../../stores/notificationStore";
 import PopUpMessageBox from "./PopUpMessageBox";
 
 import "./index.css";
@@ -17,7 +15,7 @@ import "./index.css";
  * @return
  */
 const PopUps = () => {
-    const {popUpMessages} = useContext(NotificationContext);
+    const popUpMessages = useNotificationStore((state) => state.popUpMessages);
 
     return (
         <Snackbar
diff --git a/src/contexts/NotificationContextProvider.tsx b/src/contexts/NotificationContextProvider.tsx
diff --git a/src/stores/contextStore.ts b/src/stores/contextStore.ts
@@ -1,34 +1,25 @@
 import {create} from "zustand";
 
-import {PopUpMessage} from "../typings/notifications";
-
 
 interface ContextValues {
     logEventNum: number;
-    postPopUp: (message: PopUpMessage) => void;
 }
 
 interface ContextActions {
     setLogEventNum: (newLogEventNum: number) => void;
-    setPostPopUp: (postPopUp: (message: PopUpMessage) => void) => void;
 }
 
 type ContextState = ContextValues & ContextActions;
 
 const CONTEXT_STORE_DEFAULT: ContextValues = {
     logEventNum: 0,
-    postPopUp: () => {
-    },
 };
 
 const useContextStore = create<ContextState>((set) => ({
     ...CONTEXT_STORE_DEFAULT,
     setLogEventNum: (newLogEventNum) => {
         set({logEventNum: newLogEventNum});
     },
-    setPostPopUp: (postPopUp) => {
-        set({postPopUp});
-    },
 }));
 
 export default useContextStore;
diff --git a/src/stores/logExportStore.ts b/src/stores/logExportStore.ts
@@ -5,9 +5,9 @@ import {Nullable} from "../typings/common";
 import {LOG_LEVEL} from "../typings/logs";
 import {DO_NOT_TIMEOUT_VALUE} from "../typings/notifications";
 import {EXPORT_LOGS_CHUNK_SIZE} from "../utils/config";
-import useContextStore from "./contextStore";
 import useLogFileManagerProxyStore from "./logFileManagerProxyStore";
 import useLogFileStore from "./logFileStore";
+import useNotificationStore from "./notificationStore";
 
 
 interface LogExportValues {
@@ -50,7 +50,7 @@ const useLogExportStore = create<LogExportState>((set) => ({
         })().catch((e: unknown) => {
             console.error(e);
 
-            const {postPopUp} = useContextStore.getState();
+            const {postPopUp} = useNotificationStore.getState();
             postPopUp({
                 level: LOG_LEVEL.ERROR,
                 message: String(e),
diff --git a/src/stores/logFileStore.ts b/src/stores/logFileStore.ts
@@ -22,12 +22,12 @@ import {
     FileSrcType,
 } from "../typings/worker";
 import {getConfig} from "../utils/config";
-import useContextStore from "./contextStore";
 import useLogExportStore, {LOG_EXPORT_STORE_DEFAULT} from "./logExportStore";
 import useLogFileManagerProxyStore from "./logFileManagerProxyStore";
+import useNotificationStore from "./notificationStore";
 import useQueryStore from "./queryStore";
 import useUiStore from "./uiStore";
-import useViewStore from "./viewStore";
+import useViewStore, {VIEW_STORE_DEFAULT} from "./viewStore";
 
 
 interface LogFileValues {
@@ -122,7 +122,7 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
             updateWindowUrlSearchParams({[SEARCH_PARAM_NAMES.FILE_PATH]: null});
         }
 
-        const {postPopUp} = useContextStore.getState();
+        const {postPopUp} = useNotificationStore.getState();
         (async () => {
             const {logFileManagerProxy} = useLogFileManagerProxyStore.getState();
             const decoderOptions = getConfig(CONFIG_KEY.DECODER_OPTIONS);
@@ -157,6 +157,8 @@ const useLogFileStore = create<LogFileState>((set, get) => ({
                 title: "Action failed",
             });
             setUiState(UI_STATE.UNOPENED);
+            setFileName(LOG_FILE_STORE_DEFAULT.fileName);
+            setLogData(VIEW_STORE_DEFAULT.logData);
         });
     },
     setFileName: (newFileName) => {
diff --git a/src/stores/notificationStore.ts b/src/stores/notificationStore.ts
@@ -0,0 +1,51 @@
+import {create} from "zustand";
+
+import {WithId} from "../typings/common";
+import {PopUpMessage} from "../typings/notifications";
+
+
+interface NotificationValues {
+    popUpMessages: WithId<PopUpMessage>[];
+}
+
+interface NotificationActions {
+    handlePopUpMessageClose: (messageId: number) => void;
+    postPopUp: (message: PopUpMessage) => void;
+}
+
+type NotificationState = NotificationValues & NotificationActions;
+
+const NOTIFICATION_STORE_DEFAULT: NotificationValues = {
+    popUpMessages: [],
+};
+
+let nextPopUpMessageId = 0;
+
+const useNotificationStore = create<NotificationState>((set) => ({
+    ...NOTIFICATION_STORE_DEFAULT,
+
+    handlePopUpMessageClose: (messageId: number) => {
+        set((state) => ({
+            popUpMessages: state.popUpMessages.filter((m) => m.id !== messageId),
+        }));
+    },
+
+    postPopUp: (message: PopUpMessage) => {
+        const newMessage = {
+            id: nextPopUpMessageId,
+            ...message,
+        };
+
+        nextPopUpMessageId++;
+
+        set((state) => ({
+            popUpMessages: [
+                newMessage,
+                ...state.popUpMessages,
+            ],
+        }));
+    },
+}));
+
+export type {PopUpMessage};
+export default useNotificationStore;
diff --git a/src/stores/queryStore/createQueryControllerSlice.ts b/src/stores/queryStore/createQueryControllerSlice.ts
@@ -2,8 +2,8 @@ import {StateCreator} from "zustand";
 
 import {LOG_LEVEL} from "../../typings/logs";
 import {DO_NOT_TIMEOUT_VALUE} from "../../typings/notifications";
-import useContextStore from "../contextStore";
 import useLogFileManagerStore from "../logFileManagerProxyStore";
+import useNotificationStore from "../notificationStore";
 import {QUERY_RESULTS_DEFAULT} from "./createQueryResultsSlice";
 import {QUERY_CONFIG_DEFAULT} from "./queryConfigSlice";
 import {
@@ -54,7 +54,7 @@ const createQueryControllerSlice: StateCreator<
         })().catch((e: unknown) => {
             console.error(e);
 
-            const {postPopUp} = useContextStore.getState();
+            const {postPopUp} = useNotificationStore.getState();
             postPopUp({
                 level: LOG_LEVEL.ERROR,
                 message: String(e),
diff --git a/src/stores/viewStore.ts b/src/stores/viewStore.ts
