fixes the suggestion click logic of navbar #105
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdded dynamic navigation to the Navbar component by importing Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
📋 PR Auto-Check📝 Files Changed✨ Code QualityPrettier Check: ✅ Passed Auto-generated on 2025-12-04T05:04:52.458Z |
📋 PR Auto-Check📝 Files Changed✨ Code QualityPrettier Check: ✅ Passed Auto-generated on 2025-12-04T05:06:50.100Z |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
client/src/components/quickmed/Navbar.jsx(2 hunks)
🔇 Additional comments (2)
client/src/components/quickmed/Navbar.jsx (2)
5-5: LGTM!The import statement is correct for adding navigation functionality.
13-13: LGTM!The hook is properly instantiated at the component's top level.
| const handleSuggestionClick = (suggestion) => { | ||
| setSearchQuery(suggestion); | ||
| setShowSuggestions(false); | ||
| // Placeholder for future implementation | ||
| console.log('Selected medicine:', suggestion); | ||
| navigate(`/quick-med/medicine/${suggestion}`); | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# Search for route definitions for /quick-med/medicine
rg -n --type=jsx --type=js --type=tsx --type=ts '/quick-med/medicine' -C 3Repository: genzz-dev/QuickClinic
Length of output: 92
🏁 Script executed:
# Also search for route definitions that might match the pattern
fd -e jsx -e js -e tsx -e ts | head -20Repository: genzz-dev/QuickClinic
Length of output: 1143
🏁 Script executed:
# Search for route parameter extraction patterns
rg -n 'useParams\|params\.' --type=jsx --type=js --type=tsx --type=ts -C 2 | head -50Repository: genzz-dev/QuickClinic
Length of output: 92
🏁 Script executed:
# Look for the medicine detail component or page
fd -e jsx -e js -e tsx -e ts -i '*medicine*' | grep -v node_modulesRepository: genzz-dev/QuickClinic
Length of output: 354
🏁 Script executed:
# Search for route definitions matching /quick-med/medicine
rg '/quick-med/medicine' -C 3Repository: genzz-dev/QuickClinic
Length of output: 1642
🏁 Script executed:
# Search for App.jsx to find route definitions
cat client/src/App.jsxRepository: genzz-dev/QuickClinic
Length of output: 3019
🏁 Script executed:
# Search for useParams usage that might extract medicine name
rg 'useParams' -C 3Repository: genzz-dev/QuickClinic
Length of output: 9574
🏁 Script executed:
# Look for files in quickmed directory
fd -type f -path '*quickmed*'Repository: genzz-dev/QuickClinic
Length of output: 235
🏁 Script executed:
# Get full MedicineDetails component to see how medicineName is used
cat client/src/pages/quickmed/MedicineDetails.jsxRepository: genzz-dev/QuickClinic
Length of output: 1788
🏁 Script executed:
# Check if there's any transformation or decoding in getMedicineDetails service
rg 'getMedicineDetails' -C 5Repository: genzz-dev/QuickClinic
Length of output: 4651
🏁 Script executed:
# Check the medicine API service to see what format it expects
cat client/src/service/medicineApiService.jsRepository: genzz-dev/QuickClinic
Length of output: 1182
🏁 Script executed:
# Check if there are any tests or documentation about medicine name formats
rg 'medicine.*name|medicineName' client/src/pages/quickmed/HomePage.jsx -A 3 -B 1Repository: genzz-dev/QuickClinic
Length of output: 297
🏁 Script executed:
# Look at the getMedicineSuggestions API to understand what format it returns
rg 'getMedicineSuggestions|suggestions' server/Controllers/QuickMed/medicineController.js -A 10Repository: genzz-dev/QuickClinic
Length of output: 2684
URL-encode the medicine name in the navigation call to prevent routing failures.
The suggestion parameter passed from the API can contain special characters (spaces, slashes, parentheses, etc.) found in real medicine names. Without encoding, these break the URL routing—for example, "Amoxicillin/Clavulanate" becomes /quick-med/medicine/Amoxicillin/Clavulanate instead of a single route segment.
The HomePage component already handles this correctly with encodeURIComponent(). Apply the same pattern here:
const handleSuggestionClick = (suggestion) => {
setSearchQuery(suggestion);
setShowSuggestions(false);
- navigate(`/quick-med/medicine/${suggestion}`);
+ navigate(`/quick-med/medicine/${encodeURIComponent(suggestion)}`);
};📝 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.
| const handleSuggestionClick = (suggestion) => { | |
| setSearchQuery(suggestion); | |
| setShowSuggestions(false); | |
| // Placeholder for future implementation | |
| console.log('Selected medicine:', suggestion); | |
| navigate(`/quick-med/medicine/${suggestion}`); | |
| }; | |
| const handleSuggestionClick = (suggestion) => { | |
| setSearchQuery(suggestion); | |
| setShowSuggestions(false); | |
| navigate(`/quick-med/medicine/${encodeURIComponent(suggestion)}`); | |
| }; |
🤖 Prompt for AI Agents
In client/src/components/quickmed/Navbar.jsx around lines 38 to 42, the navigate
call uses the raw suggestion which can contain characters that break routing;
update the navigate invocation to URL-encode the medicine name (use
encodeURIComponent(suggestion)) so the route becomes
/quick-med/medicine/<encoded-name>; leave setSearchQuery and setShowSuggestions
as-is and ensure the encoded value is used only for navigation.
Project
Change Type
Stack
Page Type
Route/API Endpoint Status
What Changed
Route/API Affected
all routes
Description
fixes the navigation logic of navbar
Screenshots (If Applicable)
Mobile View
Desktop View
Code Quality
npx prettier --check .)Related Issues
Closes #
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.