Fix: use Link component to prevent page reload flash

[srijan2607]

This pull request primarily updates the peer property for several dependencies in the frontend/package-lock.json file and refactors navigation in the Navbar component to use React Router's Link instead of anchor tags. These changes improve dependency management and ensure proper client-side routing in the application.

Dependency management improvements:

• Added or restored the "peer": true property to many dependencies in frontend/package-lock.json to correctly indicate peer dependencies, which helps with package resolution and compatibility in the project. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21]
• Removed the "peer": true property from some dependencies where it was no longer needed. [1] [2] [3] [4] [5] [6]
• Deleted the yaml package entry from package-lock.json, possibly as a cleanup of unused or unnecessary dependencies.

Frontend navigation refactor:

• Updated the Navbar component (frontend/src/components/Navigation/Navbar/Navbar.tsx) to use the Link component from React Router for navigation instead of <a> tags, ensuring client-side routing and preventing full page reloads. [1] [2] [3]

---

Before

Screen.Recording.2025-11-16.at.2.59.28.AM.mov

After

Screen.Recording.2025-11-16.at.3.03.33.AM.mov

Summary by CodeRabbit

• Refactor
  • Enhanced internal navigation system for improved performance and stability.

[coderabbitai]

Walkthrough

Replaces standard HTML anchor tags with React Router Link components in the Navbar component for internal page navigation. Adds import statement for Link from react-router and updates two navigation links (logo and settings) to use client-side routing instead of full page reloads.

Changes

Cohort / File(s)	Summary
Navigation refactoring frontend/src/components/Navigation/Navbar/Navbar.tsx	Replaces anchor (<a>) tags with React Router <Link> components for internal navigation; adds Link import from react-router; updates logo link (/) and settings link (/settings) to use to prop instead of href; no behavioral logic changes

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

• Straightforward tag replacement with consistent pattern across two locations
• Single import addition
• No conditional logic or complex state management involved

Poem

🐰 Links now dance with Router's grace,
No page reloads in this race,
Anchor tags fade to memory,
Client-side routing sets us free! 🎯

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title directly describes the main change: replacing anchor tags with React Router Link components to prevent page reload flash in the Navbar component.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 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 8dbc960 and 3fd9cf6.

⛔ Files ignored due to path filters (1)

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

📒 Files selected for processing (1)

• frontend/src/components/Navigation/Navbar/Navbar.tsx (3 hunks)

🔇 Additional comments (3)

frontend/src/components/Navigation/Navbar/Navbar.tsx (3)

24-27: LGTM! Logo link properly converted to client-side navigation.

The conversion from anchor tag to Link component is correct, maintaining the className and nested structure. This will prevent full page reloads when navigating to the home page.

---

86-92: LGTM! Settings link properly converted to client-side navigation.

The conversion from anchor tag to Link component is correct, maintaining the className and avatar image. This will prevent full page reloads when navigating to the settings page.

---

9-9: ✓ Import path is correct for React Router v7.

The import statement uses the correct path for React Router v7, as v7's components should be imported from "react-router" rather than "react-router-dom". The code is compliant with v7 specifications.

---

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

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[srijan2607]

Related issue #637

[github-actions]

⚠️ No issue was linked in the PR description.
Please make sure to link an issue (e.g., 'Fixes #issue_number')

[srijan2607]

releted issue #636

[srijan2607]

@rahulharpal1603 can you take a look