Skip to content

fixes the suggestion click logic of navbar #105

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

Merged
aditya241104 merged 1 commit into from
Dec 4, 2025
Merged

fixes the suggestion click logic of navbar #105

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions client/src/components/quickmed/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,15 @@ import { useState, useEffect, useRef } from 'react';
import { Search, Menu, X } from 'lucide-react';
import { getMedicineSuggestions } from '../../service/medicineApiService';
import DarkModeToggle from '../ui/DarkModeToggle';
import { useNavigate } from 'react-router-dom';
const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [suggestions, setSuggestions] = useState([]);
const [showSuggestions, setShowSuggestions] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const searchRef = useRef(null);

const navigate = useNavigate();
// Handle search input changes
const handleSearchChange = async (e) => {
const value = e.target.value;
Expand Down Expand Up @@ -37,8 +38,7 @@ const Navbar = () => {
const handleSuggestionClick = (suggestion) => {
setSearchQuery(suggestion);
setShowSuggestions(false);
// Placeholder for future implementation
console.log('Selected medicine:', suggestion);
navigate(`/quick-med/medicine/${suggestion}`);
};
Comment on lines 38 to 42
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 4, 2025

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🔴 Critical

🧩 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 3

Repository: 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 -20

Repository: 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 -50

Repository: 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_modules

Repository: genzz-dev/QuickClinic

Length of output: 354

🏁 Script executed:

# Search for route definitions matching /quick-med/medicine
rg '/quick-med/medicine' -C 3

Repository: genzz-dev/QuickClinic

Length of output: 1642

🏁 Script executed:

# Search for App.jsx to find route definitions
cat client/src/App.jsx

Repository: genzz-dev/QuickClinic

Length of output: 3019

🏁 Script executed:

# Search for useParams usage that might extract medicine name
rg 'useParams' -C 3

Repository: 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.jsx

Repository: genzz-dev/QuickClinic

Length of output: 1788

🏁 Script executed:

# Check if there's any transformation or decoding in getMedicineDetails service
rg 'getMedicineDetails' -C 5

Repository: 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.js

Repository: 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 1

Repository: 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 10

Repository: 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.

Suggested change
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.


// Close suggestions when clicking outside
Expand Down