Replace history when updating filters; Upgrade raviger to beta

[rithviknishad]

Proposed Changes

• Fixes Search Term Not Clearing on Page Back Navigation #10657
• Requires Adds support for history replace in useQueryParams kyeotic/raviger#135
• Upgrade dependency: raviger to beta (v5.0.0-1)
• Known versioning issue with raviger: Prepare for v5 kyeotic/raviger#140 (comment)

@ohcnetwork/care-fe-code-reviewers

Merge Checklist

• Add specs that demonstrate bug / test a new feature.
• Ensure that UI text is kept in I18n files.
• Prep screenshot or demo video for changelog entry, and attach it to issue.
• Request for Peer Reviews

Summary by CodeRabbit

• Chores
  • Updated a key navigation dependency to its latest major version.
• New Features
  • Enhanced filter updates by replacing the browser’s history state, ensuring a smoother navigation experience.

[coderabbitai]

Walkthrough

This pull request updates the raviger dependency version in package.json from ^4.1.2 to ^5.0.0-1 and changes the setQueryParams function within the useFilters hook to automatically include a historyReplace: true flag. This adjustment ensures that query parameter updates now replace the browser state, which is relevant for addressing navigation behavior.

Changes

File(s)	Change Summary
package.json	Updated raviger dependency from ^4.1.2 to ^5.0.0-1.
src/hooks/useFilters.tsx	Modified setQueryParams to include an additional property historyReplace: true when updating query parameters.

Sequence Diagram(s)

sequenceDiagram
    participant C as Component
    participant H as useFilters Hook
    participant BH as Browser History
    C->>H: Call setQueryParams(query, options)
    H->>H: Append { historyReplace: true } to options
    H->>BH: Replace browser state with updated query parameters

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Ensure search term is cleared on page back navigation (#10657)	✅

Suggested labels

needs review, Tested ✅

Suggested reviewers

• abhimanyurajeesh
• Jacobjeevan

Poem

I'm a rabbit of code, with a hop so spry,
I nibble on bugs as they scurry by, 🐰
With history replaced, our path stays clear,
Search terms vanish as we cheer,
In my garden of updates, the code blooms bright,
Hopping through changes from morning till night!

---

📜 Recent review details

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

📥 Commits

Reviewing files that changed from the base of the PR and between 875f598 and 6eb605c.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• package.json (1 hunks)
• src/hooks/useFilters.tsx (1 hunks)

🧰 Additional context used

🧬 Code Definitions (1)

src/hooks/useFilters.tsx (1)

src/Utils/request/query.ts (1)

• query (74-81)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: cypress-run (1)

🔇 Additional comments (4)

package.json (1)

106-106:

❓ Verification inconclusive

Verify compatibility with the beta version of raviger.

Upgrading from ^4.1.2 to ^5.0.0-1 represents a major version change to a beta release, which may introduce breaking changes. This appears to be intentional based on the PR objectives, which mention a requirement for another PR from the raviger repository (PR #135) and a known versioning issue (#140).

---

🏁 Script executed:

#!/bin/bash
# Check if there are any dependencies in the codebase that specifically import from raviger v4 APIs that might be affected by breaking changes

# Look for raviger imports across the codebase
echo "Searching for raviger imports:"
rg "from ['\"]raviger['\"]" --type ts --type tsx

# Check package lock for any resolution information about raviger
echo -e "\nChecking package-lock.json for raviger resolution:"
cat package-lock.json | grep -A 10 -B 10 "raviger"

Length of output: 1926

---

Action: Verify TSX Usage Compatibility with Raviger Beta

The dependency upgrade to the beta version (^5.0.0-1) is correctly reflected in the package-lock.json. Our automated search confirms the dependency was updated as expected and no obvious usage of deprecated v4 APIs was detected in the scanned files. Note, however, that the search encountered an error recognizing TSX file types. Please manually review any TSX files that import or utilize raviger to ensure they are compatible with the breaking changes in the beta release. Also, double-check that tests covering routing behavior are passing as expected.

• Confirm no TSX components rely on removed or altered raviger v4 APIs.
• Ensure updated beta functionality is thoroughly validated through testing.

src/hooks/useFilters.tsx (3)

54-56: Implementation of history replacement when updating filters.

This change ensures that filter updates replace the browser history state rather than creating new history entries. This addresses issue #10657 by adding the historyReplace: true parameter, which is likely a feature in the new raviger v5 beta.

The implementation is straightforward and aligns with the PR objectives. When users update filters, this will prevent cluttering the browser history with intermediate filter states, making the back button behavior more intuitive.

---

44-92:

❓ Verification inconclusive

Verify that cache restoration behaves as expected with history replacement.

The useEffect hook on lines 75-92 restores filters from cache on component mount, which now also uses the historyReplace: true flag through the setQueryParams call on line 91. Ensure this interaction works as expected and doesn't result in unexpected behavior when navigating back to a page with filters.

---

🏁 Script executed:

#!/bin/bash
# Check how FiltersCache is implemented and used across the codebase to understand potential interactions

# Find the FiltersCache implementation
echo "FiltersCache implementation:"
cat src/Utils/FiltersCache.ts

# Check for other places that might interact with browser history
echo -e "\nOther components using history management with raviger:"
rg "historyReplace|useNavigate|navigate" --type ts --type tsx

Length of output: 375

---

Cache Restoration with History Replacement Verification:

It appears the expected FiltersCache implementation wasn’t found at src/Utils/FiltersCache.ts. Please verify that FiltersCache is implemented (possibly in a different location) and confirm that its interaction with the historyReplace: true flag in setQueryParams on component mount behaves correctly—especially ensuring that query restoration does not interfere with browser navigation (e.g., when navigating back to pages with filters). You may need to manually search your repository for FiltersCache’s implementation and validate its integration.

---

59-73:

✅ Verification successful

Consistent application of history replacement.

The functions updateQuery, updatePage, and removeFilters all use setQueryParams which now applies historyReplace: true. They also explicitly set { replace: true } in the options. Confirm that these parameters work together as expected in the new raviger version.

---

🌐 Web query:

What's the difference between "replace: true" and "historyReplace: true" in raviger v5?

💡 Result:

In React Router v5 (and related libraries like raviger), the difference between replace: true and historyReplace: true lies in their implementation and usage patterns:

replace: true

• Purpose: Triggers a navigation that replaces the current entry in the history stack (equivalent to history.replace()).
• Usage: Added as an option in navigation methods like navigate (React Router v6) or custom routing utilities (e.g., raviger).
• Effect: Overwrites the current URL in the browser's history, preventing users from returning to the previous page via the back button.

  // Example in React Router v6
  navigate('/new-path', { replace: true });

historyReplace: true

• Purpose: Explicitly invokes the history.replace() method from the history package, which replaces the current history entry.
• Usage: Likely specific to raviger v5 or older routing configurations that directly interact with the history object.
• Effect: Similar to replace: true but may reflect legacy patterns from React Router v5, where history methods were used directly:

  // Example in React Router v5
  history.replace('/new-path');

Key Differences

Feature	replace: true	historyReplace: true
API Origin	Part of navigation options (v6+)	Direct history method interaction
Use Case	Modern React Router v6 patterns	Legacy/compatibility with v5 patterns
Underlying Method	Uses navigate with options	Calls history.replace directly

Both achieve the same outcome—replacing the current history entry—but reflect different API conventions across React Router versions[1][2][4][6]. In raviger v5, historyReplace: true may align with older practices, while replace: true follows newer patterns.

Citations:

• 1: https://iq.js.org/questions/react/what-is-the-purpose-of-push-and-replace-methods-of-history
• 2: https://blog.logrocket.com/migrating-react-router-v6-guide/
• 3: https://remix.run/docs/en/main/utils/replace
• 4: https://www.dhiwise.com/post/understand-error-usehistory-not-found-in-react-router-dom
• 5: https://www.youtube.com/watch?v=64ITpUACOiQ
• 6: https://omarsaade.hashnode.dev/historypush-vs-historyreplace
• 7: Replace history state without redirection remix-run/react-router#11415
• 8: https://dev.to/raaynaldo/react-router-usehistory-uselocation-and-useparams-10cd
• 9: https://dev.to/esedev/manipulating-the-browsers-history-in-react-5agm
• 10: React router not working after upgrading to v 5 remix-run/history#804

---

Action: Confirm history replacement behavior in new raviger v5 usage

The latest documentation indicates that both replace: true (used in modern navigation options) and historyReplace: true (leveraging the legacy history.replace call) effectively replace the current history entry. Based on this, the usage in your functions appears consistent. However, please verify that in the context of the new raviger version these options do not conflict and together ensure that the browser history is updated as intended (i.e., replacing rather than pushing a new entry).

• Location: src/hooks/useFilters.tsx (lines 59-73)
• Verification: Test that navigating with these parameters properly prevents creating additional history entries (i.e., the back button behavior meets expectations).

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • 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 generate unit testing code for this file.
  • @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 generate unit testing code.
  • @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.

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 for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @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 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 for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[netlify]

✅ Deploy Preview for care-ohc ready!

Name	Link
🔨 Latest commit	6eb605c
🔍 Latest deploy log	https://app.netlify.com/sites/care-ohc/deploys/67f4b22137a7380008649f36
😎 Deploy Preview	https://deploy-preview-11797.preview.ohc.network
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cypress]

CARE    Run #5716

Run Properties:   Passed #5716  •  6eb605ce0c: Replace history when updating filters; Upgrade raviger to beta

Project	CARE
Branch Review	rithviknishad/fix/replace-history-on-updating-filters
Run status	Passed #5716
Run duration	15m 26s
Commit	6eb605ce0c: Replace history when updating filters; Upgrade raviger to beta
Committer	Rithvik Nishad
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	24
View all changes introduced in this branch ↗︎

[Jacobjeevan]

Nice 😎

[nihal467]

LGTM

[github-actions]

@rithviknishad Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌