Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
42a0c9a
refactor: Replace NotificationContext with useNotificationStore for i…
junhaoliao May 22, 2025
851785e
Remove unrelated changes to the PR - Apply suggestions from code review
junhaoliao May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 5 additions & 8 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import AppController from "./components/AppController";
import Layout from "./components/Layout";
import NotificationContextProvider from "./contexts/NotificationContextProvider";
import UrlContextProvider from "./contexts/UrlContextProvider";


Expand All @@ -11,13 +10,11 @@ import UrlContextProvider from "./contexts/UrlContextProvider";
*/
const App = () => {
return (
<NotificationContextProvider>
<UrlContextProvider>
<AppController>
<Layout/>
</AppController>
</UrlContextProvider>
</NotificationContextProvider>
<UrlContextProvider>
<AppController>
<Layout/>
</AppController>
</UrlContextProvider>
);
};

Expand Down
12 changes: 2 additions & 10 deletions src/components/AppController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import React, {
useRef,
} from "react";

import {NotificationContext} from "../contexts/NotificationContextProvider";
import {
updateWindowUrlHashParams,
URL_HASH_PARAMS_DEFAULT,
Expand All @@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -180,13 +179,6 @@ const AppController = ({children}: AppControllerProps) => {
loadFile,
]);

useEffect(() => {
setPostPopUp(postPopUp);
}, [
postPopUp,
setPostPopUp,
]);

return children;
};

Expand Down
9 changes: 3 additions & 6 deletions src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,4 @@
import React, {
useCallback,
useContext,
} from "react";
import React, {useCallback} from "react";

import {
Box,
Expand All @@ -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 {
Expand Down Expand Up @@ -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) => {
Expand Down
9 changes: 3 additions & 6 deletions src/components/PopUps/PopUpMessageBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, {
useContext,
useEffect,
useRef,
useState,
Expand All @@ -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";
Expand All @@ -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);

Expand Down
6 changes: 2 additions & 4 deletions src/components/PopUps/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -17,7 +15,7 @@ import "./index.css";
* @return
*/
const PopUps = () => {
const {popUpMessages} = useContext(NotificationContext);
const popUpMessages = useNotificationStore((state) => state.popUpMessages);

return (
<Snackbar
Expand Down
86 changes: 0 additions & 86 deletions src/contexts/NotificationContextProvider.tsx
View file
Open in desktop

This file was deleted.

9 changes: 0 additions & 9 deletions src/stores/contextStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/stores/logExportStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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),
Expand Down
6 changes: 3 additions & 3 deletions src/stores/logFileStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@
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";

Check failure on line 30 in src/stores/logFileStore.ts

View workflow job for this annotation

GitHub Actions / lint-check 

'VIEW_STORE_DEFAULT' is defined but never used

Check failure on line 30 in src/stores/logFileStore.ts

View workflow job for this annotation

GitHub Actions / lint-check 

'VIEW_STORE_DEFAULT' is defined but never used
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Remove unused import

The VIEW_STORE_DEFAULT import is defined but never used in this file, which is causing linting errors in the CI pipeline.

-import useViewStore, {VIEW_STORE_DEFAULT} from "./viewStore";
+import useViewStore from "./viewStore";
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import useViewStore, {VIEW_STORE_DEFAULT} from "./viewStore";
-import useViewStore, {VIEW_STORE_DEFAULT} from "./viewStore";
+import useViewStore from "./viewStore";
🧰 Tools
🪛 GitHub Check: lint-check

[failure] 30-30:
'VIEW_STORE_DEFAULT' is defined but never used

🪛 GitHub Actions: lint

[error] 30-30: ESLint: 'VIEW_STORE_DEFAULT' is defined but never used. (@typescript-eslint/no-unused-vars)

🤖 Prompt for AI Agents 
In src/stores/logFileStore.ts at line 30, the import VIEW_STORE_DEFAULT is
unused and causing lint errors. Remove VIEW_STORE_DEFAULT from the import
statement to fix the issue.



interface LogFileValues {
Expand Down Expand Up @@ -122,7 +122,7 @@
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);
Expand Down
51 changes: 51 additions & 0 deletions src/stores/notificationStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Copy link

@coderabbitai coderabbitai bot May 22, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Consider persisting the ID counter.

The simple counter approach works well for generating unique IDs, but it resets on page reload. While likely acceptable for this use case, you might consider persisting it if maintaining unique IDs across sessions becomes important.

Also applies to: 34-40

🤖 Prompt for AI Agents 
In src/stores/notificationStore.ts at lines 22 and 34-40, the nextPopUpMessageId
counter resets on page reload, losing uniqueness across sessions. To fix this,
persist the counter value in localStorage or another persistent storage,
initializing nextPopUpMessageId from there on load and updating the stored value
whenever the counter increments. This ensures IDs remain unique even after page
reloads.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The IDs are not expected to be persisted across page reloads.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@junhaoliao Got it, thanks for clarifying. That makes sense for this use case since notifications are typically transient UI elements that would be cleared on reload anyway.


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;
4 changes: 2 additions & 2 deletions src/stores/queryStore/createQueryControllerSlice.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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),
Expand Down
Loading
Loading