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

Co-authored-by: Henry8192 <[email protected]>

Author: junhaoliao

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>
     );
 };
 

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,10 +13,9 @@ import {
 import useContextStore from "../stores/contextStore";
 import useLogFileManagerStore from "../stores/logFileManagerProxyStore";
 import useLogFileStore from "../stores/logFileStore";
+import {handleErrorWithNotification} from "../stores/notificationStore";
 import useUiStore from "../stores/uiStore";
 import useViewStore from "../stores/viewStore";
-import {LOG_LEVEL} from "../typings/logs";
-import {DO_NOT_TIMEOUT_VALUE} from "../typings/notifications";
 import {UI_STATE} from "../typings/states";
 import {
     CURSOR_CODE,
@@ -80,12 +78,10 @@ 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);
@@ -142,21 +138,12 @@ const AppController = ({children}: AppControllerProps) => {
             };
             const pageData = await logFileManagerProxy.loadPage(cursor, isPrettifiedRef.current);
             updatePageData(pageData);
-        })().catch((e: unknown) => {
-            console.error(e);
-            postPopUp({
-                level: LOG_LEVEL.ERROR,
-                message: String(e),
-                timeoutMillis: DO_NOT_TIMEOUT_VALUE,
-                title: "Action failed",
-            });
-        });
+        })().catch(handleErrorWithNotification);
     }, [
         beginLineNumToLogEventNum,
         logEventNum,
         logFileManagerProxy,
         numEvents,
-        postPopUp,
         setUiState,
         updatePageData,
     ]);
@@ -180,13 +167,6 @@ const AppController = ({children}: AppControllerProps) => {
         loadFile,
     ]);
 
-    useEffect(() => {
-        setPostPopUp(postPopUp);
-    }, [
-        postPopUp,
-        setPostPopUp,
-    ]);
-
     return children;
 };
 

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,6 @@ const handleConfigFormReset = (ev: React.FormEvent) => {
  * @return
  */
 const SettingsTabPanel = () => {
-    const {postPopUp} = useContext(NotificationContext);
     const loadPageByAction = useViewStore((state) => state.loadPageByAction);
 
     const handleConfigFormSubmit = useCallback((ev: React.FormEvent) => {
@@ -162,6 +158,7 @@ const SettingsTabPanel = () => {
         });
 
         if (null !== error) {
+            const {postPopUp} = useNotificationStore.getState();
             postPopUp({
                 level: LOG_LEVEL.ERROR,
                 message: error,
@@ -171,10 +168,7 @@ const SettingsTabPanel = () => {
         } else {
             loadPageByAction({code: ACTION_NAME.RELOAD, args: null});
         }
-    }, [
-        loadPageByAction,
-        postPopUp,
-    ]);
+    }, [loadPageByAction]);
 
     return (
         <CustomTabPanel

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);
 

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

src/contexts/NotificationContextProvider.tsx

@@ -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;

src/stores/contextStore.ts

@@ -2,12 +2,10 @@ import {create} from "zustand";
 
 import LogExportManager, {EXPORT_LOGS_PROGRESS_VALUE_MIN} from "../services/LogExportManager";
 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 {handleErrorWithNotification} from "./notificationStore";
 
 
 interface LogExportValues {
@@ -47,17 +45,7 @@ const useLogExportStore = create<LogExportState>((set) => ({
         (async () => {
             const {logFileManagerProxy} = useLogFileManagerProxyStore.getState();
             await logFileManagerProxy.exportLogs();
-        })().catch((e: unknown) => {
-            console.error(e);
-
-            const {postPopUp} = useContextStore.getState();
-            postPopUp({
-                level: LOG_LEVEL.ERROR,
-                message: String(e),
-                timeoutMillis: DO_NOT_TIMEOUT_VALUE,
-                title: "Action failed",
-            });
-        });
+        })().catch(handleErrorWithNotification);
     },
 }));