Feature/quick med home page #104
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughThis PR introduces a complete QuickMed homepage featuring a centralized medicine search interface, dark mode support, and multiple UI sections. The implementation includes a search bar with keyboard navigation and live suggestions, along with hero, features, info banner, and footer sections. A new homepage route is registered at Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant HomePage as HomePage Component
participant SearchBar as SearchBar Component
participant API as getMedicineSuggestions API
participant Router as React Router
User->>SearchBar: Types in search input
SearchBar->>HomePage: setSearchQuery updates
HomePage->>HomePage: Debounce timer starts
Note over HomePage: Query length ≥ 2
HomePage->>API: Fetch medicine suggestions
API-->>HomePage: Return suggestions list
HomePage->>SearchBar: Pass suggestions + loading state
SearchBar->>User: Display suggestions dropdown
User->>SearchBar: Press ArrowUp/ArrowDown
SearchBar->>HomePage: setSelectedIndex updates
SearchBar->>User: Highlight active suggestion
User->>SearchBar: Click suggestion / Press Enter
SearchBar->>HomePage: handleSelectMedicine(name)
HomePage->>HomePage: Format name to URL slug
HomePage->>Router: Navigate to /quick-med/medicine/{encodedName}
Router->>User: Render MedicineDetails page
User->>SearchBar: Press Escape / Click outside
SearchBar->>HomePage: setShowSuggestions(false)
SearchBar->>User: Hide suggestions dropdown
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Areas requiring attention:
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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-03T10:06:24.080Z |
📋 PR Auto-Check📝 Files Changed✨ Code QualityPrettier Check: ✅ Passed Auto-generated on 2025-12-03T10:08:47.023Z |
![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
🧹 Nitpick comments (11)
client/src/components/quickmed/HomePage/HeroSection.jsx (2)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform (enabled as indicated by the successful Prettier check), the React import is no longer needed for JSX.
Apply this diff:
-import React from 'react'; - const HeroSection = () => {
4-12: Consider renaming to reflect actual purpose.This component is named
HeroSectionbut only contains decorative background elements. The actual hero content (heading, search bar, etc.) appears in the "Search Bar Section" within HomePage.jsx. Consider renaming to something likeDecorativeBackgroundorBackgroundBlurto better reflect its purpose.client/src/components/quickmed/HomePage/InfoBanner.jsx (1)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform, the React import is no longer required for JSX.
Apply this diff:
-import React from 'react'; - const InfoBanner = ({ navigateToQuickclinic }) => {client/src/components/quickmed/HomePage/FeaturesSection.jsx (2)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform, the React import is no longer needed.
Apply this diff:
-import React from 'react'; import Icons from './Icons';
6-22: Consider moving features array outside component.The
featuresarray is static and doesn't depend on props or state. Moving it outside the component body prevents unnecessary re-creation on each render.Apply this diff:
+const features = [ + { + icon: <Icons.Lightning />, + title: 'Instant Search', + description: 'Get real-time medicine suggestions as you type with our powerful autocomplete.', + }, + { + icon: <Icons.Shield />, + title: 'FDA Verified Data', + description: 'Access reliable drug information directly from the OpenFDA database.', + }, + { + icon: <Icons.Database />, + title: 'Comprehensive Details', + description: 'View usage, side effects, ingredients, warnings, and storage information.', + }, +]; + const FeaturesSection = () => { - const features = [ - { - icon: <Icons.Lightning />, - title: 'Instant Search', - description: 'Get real-time medicine suggestions as you type with our powerful autocomplete.', - }, - { - icon: <Icons.Shield />, - title: 'FDA Verified Data', - description: 'Access reliable drug information directly from the OpenFDA database.', - }, - { - icon: <Icons.Database />, - title: 'Comprehensive Details', - description: 'View usage, side effects, ingredients, warnings, and storage information.', - }, - ]; - return (client/src/components/quickmed/HomePage/Icons.jsx (1)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform, the React import is not required for JSX.
Apply this diff:
-import React from 'react'; - const Icons = {client/src/components/quickmed/HomePage/Footer.jsx (2)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform, the React import is no longer needed.
Apply this diff:
-import React from 'react'; import Icons from './Icons';
45-52: Consider using Icons module for consistency.The arrow icon is defined inline, while other icons use the centralized Icons module (e.g., Icons.Pill on line 14). For consistency and maintainability, consider adding an Arrow icon to the Icons module.
client/src/pages/quickmed/HomePage.jsx (1)
5-5: Remove unused Icons import.The Icons module is imported but never used in this file. It's only used by the child components (SearchBar, Footer, etc.).
Apply this diff:
import { getMedicineSuggestions } from '../../service/medicineApiService'; -import Icons from '../../components/quickmed/HomePage/Icons'; import SearchBar from '../../components/quickmed/HomePage/SearchBar';client/src/components/quickmed/HomePage/SearchBar.jsx (2)
2-2: Remove unnecessary React import.With React 19 and the modern JSX transform, the React import is not required for JSX.
Apply this diff:
-import React from 'react'; import Icons from './Icons';
64-81: Consider using unique identifiers for suggestion keys.Using array index as the key for dynamically fetched suggestions can cause issues if the suggestions list changes or reorders between renders (e.g., when the user continues typing). If the API returns unique identifiers for suggestions, use those instead.
If suggestions have unique IDs:
-<li key={index}> +<li key={suggestion.id || suggestion.name || suggestion}>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
client/src/components/quickmed/HomePage/FeaturesSection.jsx(1 hunks)client/src/components/quickmed/HomePage/Footer.jsx(1 hunks)client/src/components/quickmed/HomePage/HeroSection.jsx(1 hunks)client/src/components/quickmed/HomePage/Icons.jsx(1 hunks)client/src/components/quickmed/HomePage/InfoBanner.jsx(1 hunks)client/src/components/quickmed/HomePage/SearchBar.jsx(1 hunks)client/src/pages/quickmed/HomePage.jsx(1 hunks)client/src/pages/quickmed/MedicineDetails.jsx(0 hunks)client/src/routes/QuickmedRoutes.jsx(1 hunks)
💤 Files with no reviewable changes (1)
- client/src/pages/quickmed/MedicineDetails.jsx
🧰 Additional context used
🧬 Code graph analysis (4)
client/src/components/quickmed/HomePage/FeaturesSection.jsx (1)
client/src/components/quickmed/HomePage/Icons.jsx (1)
Icons(4-90)
client/src/components/quickmed/HomePage/Footer.jsx (2)
client/src/components/quickmed/HomePage/Icons.jsx (1)
Icons(4-90)client/src/pages/quickmed/HomePage.jsx (1)
navigateToQuickclinic(93-95)
client/src/components/quickmed/HomePage/InfoBanner.jsx (1)
client/src/pages/quickmed/HomePage.jsx (1)
navigateToQuickclinic(93-95)
client/src/pages/quickmed/HomePage.jsx (6)
client/src/pages/quickmed/MedicineDetails.jsx (2)
navigate(11-11)error(14-14)client/src/components/quickmed/HomePage/HeroSection.jsx (1)
HeroSection(4-12)client/src/components/quickmed/HomePage/SearchBar.jsx (1)
SearchBar(5-108)client/src/components/quickmed/HomePage/FeaturesSection.jsx (1)
FeaturesSection(5-51)client/src/components/quickmed/HomePage/InfoBanner.jsx (1)
InfoBanner(4-31)client/src/components/quickmed/HomePage/Footer.jsx (1)
Footer(5-59)
🔇 Additional comments (11)
client/src/routes/QuickmedRoutes.jsx (1)
5-5: LGTM!The route addition is clean and follows the existing pattern. The route ordering is correct, with the more specific medicine detail route before the general homepage route.
Also applies to: 12-12
client/src/components/quickmed/HomePage/InfoBanner.jsx (1)
4-31: LGTM!The component correctly receives and uses the
navigateToQuickcliniccallback, and the UI structure is clean and responsive.client/src/components/quickmed/HomePage/FeaturesSection.jsx (1)
24-51: LGTM!The component structure is clean, responsive, and includes nice hover effects. Using
indexas the key is acceptable here since the features array is static.client/src/components/quickmed/HomePage/Icons.jsx (1)
4-90: LGTM!The centralized Icons module provides a clean, maintainable way to manage SVG icons across the QuickMed components.
client/src/components/quickmed/HomePage/Footer.jsx (1)
5-59: LGTM!The Footer component is well-structured with responsive layout and clear CTAs. The navigation callback is properly wired.
client/src/pages/quickmed/HomePage.jsx (5)
13-41: Dark mode state without toggle UI.The component initializes and persists dark mode state, but I don't see a UI element (like a toggle button) that allows users to switch between light and dark modes. The state is initialized based on localStorage and system preferences, but users have no way to change it.
Verify whether a dark mode toggle UI element exists elsewhere or if this is intentional (system preference only). If users should be able to toggle dark mode, consider adding a toggle button to the Navbar or header area.
44-60: LGTM! Well-implemented debounced search.The debounced search implementation is solid with proper error handling, loading state management, and a stable
fetchSuggestionscallback viauseCallback.Also applies to: 63-73
76-85: LGTM! Proper click-outside handling.The click-outside handler correctly closes the suggestions dropdown and properly cleans up the event listener.
98-123: LGTM! Solid keyboard navigation.The keyboard navigation implementation properly handles ArrowUp, ArrowDown, Enter, and Escape keys with correct boundary checks and state updates.
125-181: LGTM! Clean page composition.The page structure is well-organized, composing multiple sections with proper prop drilling for state and callbacks.
client/src/components/quickmed/HomePage/SearchBar.jsx (1)
5-107: LGTM! Well-structured search component.The SearchBar component provides an excellent user experience with loading states, clear button, keyboard navigation support, and helpful visual feedback. The popular tags feature is a nice touch for discoverability.
| const handleSelectMedicine = (medicineName) => { | ||
| const encodedName = encodeURIComponent(medicineName.toLowerCase().replace(/\s+/g, '-')); | ||
| navigate(`/quick-med/medicine/${encodedName}`); | ||
| }; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check how MedicineDetails decodes the medicine name parameter
rg -n -A10 -B2 "useParams|medicineName" client/src/pages/quickmed/MedicineDetails.jsxRepository: genzz-dev/QuickClinic
Length of output: 1586
🏁 Script executed:
#!/bin/bash
# Check how getMedicineDetails handles the medicine name parameter
rg -n -A15 "getMedicineDetails" client/src/service/medicineApiService.jsRepository: genzz-dev/QuickClinic
Length of output: 225
Fix double URL-encoding of medicine name.
The medicine name is encoded in HomePage (lowercase, hyphens for spaces, then encodeURIComponent), but getMedicineDetails() in medicineApiService.js applies encodeURIComponent() again at line 36. This causes double encoding and will break API requests. Remove the encoding from medicineApiService since the parameter arrives pre-encoded from the route.
🤖 Prompt for AI Agents
In client/src/pages/quickmed/HomePage.jsx around lines 88-91 and in
medicineApiService.js around line 36: HomePage now sends a pre-encoded medicine
name in the route (lowercased and spaces -> hyphens then encodeURIComponent),
but medicineApiService.getMedicineDetails currently calls encodeURIComponent
again causing double-encoding; remove the encodeURIComponent() call in
medicineApiService.getMedicineDetails and use the incoming route parameter as-is
(optionally validate it is a non-empty string) so the API request uses the
already-encoded value.
Project
Change Type
Stack
Page Type
Route/API Endpoint Status
What Changed
Route/API Affected
/quick-med
Description
Adds home page for quick med
Screenshots (If Applicable)
Mobile View
Desktop View
Code Quality
npx prettier --check .)Related Issues
Closes #NA
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.