Skip to content

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

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.

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

Merged
merged 11 commits into from
May 22, 2025

Conversation

junhaoliao
Copy link
Member

@junhaoliao junhaoliao commented May 22, 2025

Description

This PR replaces the React Context-based notification system with a Zustand store implementation. The change simplifies the codebase by:

  1. Eliminating the need for a context provider wrapper component
  2. Making the notification system more accessible throughout the application without prop drilling or context consumption

The implementation maintains all the existing functionality:

  • Storing and displaying popup messages
  • Adding new popup messages
  • Removing popup messages when closed
  • Maintaining unique IDs for each message

The Zustand approach provides better performance characteristics than React Context, especially for frequent updates, and makes the notification system easier to use in components.

Checklist

  • The PR satisfies the contribution guidelines.
  • This is a breaking change and that has been indicated in the PR title, OR this isn't a
    breaking change.
  • Necessary docs have been updated, OR no docs need to be updated.

Validation performed

  1. npm run build; npm run preview and verified that the pop-up box show up when accessing an non-existent file. (see Bug: Error pop-ups don't appear when loading non-existent files #290 for issue reproduction).
  2. Verified that popup messages can be created with the new useNotificationStore().postPopUp() method
  3. Confirmed that popup messages are correctly stored in the Zustand state
  4. Tested that popup messages can be removed with the handlePopUpMessageClose() method
  5. Ensured that the ID generation works correctly and produces unique, incremental IDs
  6. Checked that components using the notification system continue to work as expected after the refactor
  7. Verified that multiple components / Zustand store actions can access the notification state without unnecessary re-renders

Summary by CodeRabbit

  • Refactor
    • Simplified notification management by replacing the context-based notification system with a centralized store-based approach.
    • Removed the notification context provider and updated all components to use the new notification store for pop-up messages.
    • Streamlined error handling and notification posting across the application for consistency.
  • Chores
    • Deleted unused notification context files and cleaned up related imports.

@junhaoliao junhaoliao requested a review from a team as a code owner May 22, 2025 05:14
Copy link

coderabbitai bot commented May 22, 2025

Warning

Rate limit exceeded

@junhaoliao has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 13 minutes and 47 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between a5999fa and 2475b04.

📒 Files selected for processing (2)
  • src/stores/logFileStore.ts (2 hunks)
  • src/stores/notificationStore.ts (1 hunks)
## Walkthrough

This change removes the `NotificationContextProvider` and all related context-based notification logic, replacing it with a new Zustand store (`useNotificationStore`) for managing notification pop-ups. All components and stores now access notification state and actions directly via the new store, eliminating the React context layer for notifications.

## Changes

| File(s)                                                                                       | Change Summary |
|-----------------------------------------------------------------------------------------------|---------------|
| src/App.tsx                                                                                   | Removed `NotificationContextProvider` from the component tree and deleted its import. |
| src/components/AppController.tsx                                                              | Replaced use of `NotificationContext` and context-based `postPopUp` with `useNotificationStore`; removed synchronization effect for `postPopUp`. |
| src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx                | Switched from context-based notification posting to direct usage of `useNotificationStore`. |
| src/components/PopUps/PopUpMessageBox.tsx<br>src/components/PopUps/index.tsx                  | Replaced all notification context usage with direct access to notification state/actions from `useNotificationStore`. |
| src/contexts/NotificationContextProvider.tsx                                                  | Deleted file; removed the notification context, provider, and related types. |
| src/stores/contextStore.ts                                                                    | Removed all notification-related state and actions (`postPopUp`, `setPostPopUp`) from the context store. |
| src/stores/logExportStore.ts<br>src/stores/logFileStore.ts<br>src/stores/queryStore/createQueryControllerSlice.ts<br>src/stores/viewStore.ts | Updated error handling to use `handleErrorWithNotification` from `useNotificationStore` instead of the context store. |
| src/stores/notificationStore.ts                                                               | Added new Zustand store (`useNotificationStore`) for notification pop-up management, including state, actions, and types. |

## Sequence Diagram(s)

```mermaid
sequenceDiagram
    participant Component
    participant useNotificationStore
    participant UI

    Component->>useNotificationStore: postPopUp(message)
    useNotificationStore-->>useNotificationStore: Add message with unique ID
    UI->>useNotificationStore: Subscribe to popUpMessages
    useNotificationStore-->>UI: Provide updated popUpMessages
    UI->>Component: Display notification pop-up
    UI->>useNotificationStore: handlePopUpMessageClose(messageId)
    useNotificationStore-->>useNotificationStore: Remove message by ID
    useNotificationStore-->>UI: Provide updated popUpMessages

Possibly related issues

Possibly related PRs

Suggested reviewers

  • Henry8192

<!-- walkthrough_end -->
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- finishing_touch_checkbox_start -->

<details open="true">
<summary>✨ Finishing Touches</summary>

- [ ] <!-- {"checkboxId": "7962f53c-55bc-4827-bfbf-6a18da830691"} --> 📝 Generate Docstrings

</details>

<!-- finishing_touch_checkbox_end -->
<!-- tips_start -->

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

<details>
<summary>❤️ Share</summary>

- [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai)
- [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai)
- [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai)
- [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code)

</details>

<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=y-scope/yscope-log-viewer&utm_content=297):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Explain this complex logic.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai explain this code block.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and explain its main purpose.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

### Support

Need help? Create a ticket on our [support page](https://www.coderabbit.ai/contact-us/support) for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai generate sequence diagram` to generate a sequence diagram of the changes in this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->

@Henry8192
Copy link
Collaborator

@junhaoliao I observe that you want to push to notification store branch in y-scope. If that is intended, why not just push this little change directly to that branch?

@junhaoliao junhaoliao changed the base branch from notification-store to main May 22, 2025 17:24
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between af6c219 and 64c8d50.

📒 Files selected for processing (12)
  • src/App.tsx (1 hunks)
  • src/components/AppController.tsx (2 hunks)
  • src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx (3 hunks)
  • src/components/PopUps/PopUpMessageBox.tsx (2 hunks)
  • src/components/PopUps/index.tsx (2 hunks)
  • src/contexts/NotificationContextProvider.tsx (0 hunks)
  • src/stores/contextStore.ts (0 hunks)
  • src/stores/logExportStore.ts (2 hunks)
  • src/stores/logFileStore.ts (2 hunks)
  • src/stores/notificationStore.ts (1 hunks)
  • src/stores/queryStore/createQueryControllerSlice.ts (2 hunks)
  • src/stores/viewStore.ts (4 hunks)
💤 Files with no reviewable changes (2)
  • src/stores/contextStore.ts
  • src/contexts/NotificationContextProvider.tsx
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.

**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Prefer false == <expression> rather than !<expression>.

  • src/stores/queryStore/createQueryControllerSlice.ts
  • src/components/PopUps/index.tsx
  • src/stores/viewStore.ts
  • src/stores/logExportStore.ts
  • src/components/AppController.tsx
  • src/App.tsx
  • src/stores/logFileStore.ts
  • src/components/PopUps/PopUpMessageBox.tsx
  • src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx
  • src/stores/notificationStore.ts
🧬 Code Graph Analysis (1)
src/stores/notificationStore.ts (1)
src/typings/common.ts (1)
  • WithId (12-12)
🔇 Additional comments (22)
src/stores/logExportStore.ts (2)

10-10: Import updated to use the new notification store

The import has been correctly updated to use the new Zustand-based notification store instead of the previous context-based approach, which aligns with the PR objective.


53-53: Notification access properly migrated to the new store

The code now correctly retrieves the postPopUp function from useNotificationStore instead of the previous context store, maintaining the same error handling capabilities while benefiting from Zustand's improved state management.

src/stores/queryStore/createQueryControllerSlice.ts (2)

6-6: Import updated to use the new notification store

The import has been correctly updated to use the new Zustand-based notification store, which aligns with the PR's goal of replacing context-based notifications with a more accessible store implementation.


57-57: Notification access properly migrated to the new store

The error handling now correctly retrieves the postPopUp function from useNotificationStore instead of the previous context store, maintaining the same error notification capability while leveraging Zustand's better performance characteristics.

src/stores/viewStore.ts (4)

26-26: Import updated to use the new notification store

The import has been correctly added to use the new Zustand-based notification store, aligning with the PR's objective of improving state management for notifications.


142-142: Notification access properly migrated in filterLogs method

The error handling in the filterLogs method now correctly retrieves the postPopUp function from useNotificationStore, maintaining the same error notification capability while benefiting from the improved state management approach.


196-196: Notification access properly migrated in loadPageByAction method

The error handling in the loadPageByAction method now correctly retrieves the postPopUp function from useNotificationStore, consistent with the other changes in this PR.


246-246: Notification access properly migrated in updateIsPrettified method

The error handling in the updateIsPrettified method now correctly retrieves the postPopUp function from useNotificationStore, completing the consistent migration of all notification access points in this file.

src/components/PopUps/index.tsx (2)

6-6: Import updated to use the new notification store

The import has been correctly updated to use the new Zustand-based notification store, which is a key part of the notification system refactoring.


18-18: Component properly migrated to use the Zustand store

The component now correctly uses the Zustand store to access popUpMessages instead of retrieving it from context. This simplifies the code and eliminates the need for context consumption, while maintaining the same functionality.

src/App.tsx (1)

13-17: Excellent refactoring by removing the NotificationContextProvider!

The component tree is now simpler with UrlContextProvider as the only top-level context provider. This change aligns perfectly with the PR's objective of replacing context-based notifications with Zustand stores.

src/stores/logFileStore.ts (2)

27-27: Import for useNotificationStore looks good.

This import correctly replaces the previous context-based notification system.


125-125: Successfully migrated to useNotificationStore.

The notification handling is now correctly sourced from the Zustand store, maintaining the same functionality while aligning with the new architecture.

src/components/CentralContainer/Sidebar/SidebarTabs/SettingsTabPanel/index.tsx (3)

1-1: Clean import statement.

Removed the unnecessary useContext import since it's no longer needed after the migration to Zustand.


15-15: Properly imported useNotificationStore.

This import correctly brings in the new Zustand store for notifications.


138-138: Successfully implemented useNotificationStore with selector.

This line efficiently extracts just the postPopUp function from the notification store using a selector pattern, which is a good practice with Zustand stores.

src/components/PopUps/PopUpMessageBox.tsx (2)

18-18: Good import with type extraction.

The import now includes the PopUpMessage type directly from the notification store, which is a cleaner approach than importing it separately.


42-43: Correctly implemented Zustand selector.

The component now properly uses the useNotificationStore with a selector to extract only the handlePopUpMessageClose function, which follows Zustand best practices.

src/components/AppController.tsx (2)

16-16: Clean implementation of the notification store import.

This import aligns with the PR objective of replacing context-based notifications with a Zustand store.


90-90: Good replacement of context with store.

The refactoring from context to Zustand store simplifies state management while preserving the same functionality.

src/stores/notificationStore.ts (2)

1-52: Well-implemented Zustand store for notification management.

The implementation is clean, type-safe, and follows best practices. The store effectively replaces the context-based approach while maintaining the same functionality.


33-47: Good implementation of the postPopUp function.

The function correctly handles adding new messages with unique IDs and preserving the existing messages. Placing new messages at the beginning of the array ensures newer notifications appear first.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ef6696c and e8c83e8.

📒 Files selected for processing (1)
  • src/stores/notificationStore.ts (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.

**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Prefer false == <expression> rather than !<expression>.

  • src/stores/notificationStore.ts
🧬 Code Graph Analysis (1)
src/stores/notificationStore.ts (3)
src/typings/common.ts (1)
  • WithId (12-12)
src/typings/logs.ts (1)
  • LOG_LEVEL (56-56)
src/typings/notifications.ts (1)
  • DO_NOT_TIMEOUT_VALUE (36-36)
🔇 Additional comments (5)
src/stores/notificationStore.ts (5)

1-9: Imports are well-structured.

External and local imports are clearly separated and relevant types (WithId, LOG_LEVEL, DO_NOT_TIMEOUT_VALUE, PopUpMessage) are correctly brought in.


11-21: Types and interfaces are clear and concise.

The separation of NotificationValues, NotificationActions, and their composition into NotificationState follows good practices for maintainable store typing.


22-24: Default state initialisation is correct.

NOTIFICATION_STORE_DEFAULT provides a clear initial value for popUpMessages.


28-50: Store creation and action logic looks solid.

The implementation of handlePopUpMessageClose and postPopUp correctly updates state immutably and prepends new messages. Leveraging set callbacks maintains consistency.


69-71: Exports are appropriate.

The named export for PopUpMessage and the default export of the store hook align with consumption patterns elsewhere.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e8c83e8 and a5999fa.

📒 Files selected for processing (1)
  • src/stores/logFileStore.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
`**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}`: - Prefer `false == ` rather than `!`.

**/*.{cpp,hpp,java,js,jsx,tpp,ts,tsx}: - Prefer false == <expression> rather than !<expression>.

  • src/stores/logFileStore.ts
🧬 Code Graph Analysis (1)
src/stores/logFileStore.ts (1)
src/stores/notificationStore.ts (1)
  • handleErrorWithNotification (70-70)
🔇 Additional comments (2)
src/stores/logFileStore.ts (2)

26-26: Good choice migrating to the new notification store.

The import change aligns with the PR objective of replacing the Context-based notification system with a Zustand store implementation, which should improve performance for frequent updates.


146-146: Clean update to use the new notification store.

Correctly updated to retrieve the postPopUp function from the new Zustand store instead of the previous context-based approach. This maintains the same functionality while benefiting from the improved state management architecture.

@junhaoliao junhaoliao requested a review from Henry8192 May 22, 2025 19:41
Copy link
Collaborator

@Henry8192 Henry8192 left a comment

Choose a reason for hiding this comment

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

LGTM.

@junhaoliao junhaoliao merged commit cc93358 into y-scope:main May 22, 2025
3 checks passed
@junhaoliao junhaoliao deleted the notification-store branch May 22, 2025 21:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants