modularize:patientappointments page into managable componenets#74
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughThe PR modularizes the PatientAppointments page by extracting UI components (AppointmentCard, AppointmentHeader, AppointmentTabs, AppointmentStats, ErrorState) into a reusable component suite within a dedicated directory, replacing inline page logic with delegated component composition. Changes
Sequence DiagramsequenceDiagram
participant PA as PatientAppointments<br/>(Page)
participant AH as AppointmentHeader
participant AT as AppointmentTabs
participant STAT as AppointmentStats
participant AC as AppointmentCard
participant ES as ErrorState
PA->>PA: Fetch appointments & check prescriptions
alt Error State
PA->>ES: Render error via ErrorState
else Loading State
PA->>PA: Return Loading component
else Success
PA->>AH: Pass searchTerm, setSearchTerm,<br/>filterStatus, setFilterStatus
activate AH
AH->>AH: Render search input & filter dropdown
deactivate AH
PA->>AT: Pass appointments, prescriptionStatus,<br/>activeTab, setActiveTab, onAppointmentClick
activate AT
AT->>AT: Categorize by date (upcoming/today/past)
AT->>AC: Map appointments to cards<br/>for active tab
activate AC
AC->>AC: Format date/time, render<br/>status badge & details
deactivate AC
AT->>AT: Render empty state if needed
deactivate AT
PA->>STAT: Pass appointments, prescriptionStatus
activate STAT
STAT->>STAT: Calculate metrics & render<br/>stats grid
deactivate STAT
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes
Suggested labels
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
client/src/pages/patient/PatientAppointments.jsx (1)
27-41: Clear stale error state when refetching.
As written, any transient failure leaveserrorpopulated, so even if a later call tofetchAppointmentssucceeds (e.g., after wiring this helper to a manual “Try again” action), theErrorStatebanner keeps showing. Reset the error before starting the request so the UI reflects the latest outcome.Apply this diff:
const fetchAppointments = async () => { try { setLoading(true); + setError(null); const response = await getPatientAppointments();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
client/src/components/Patient/PatientAppointments/AppointmentCard.jsx(1 hunks)client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx(1 hunks)client/src/components/Patient/PatientAppointments/AppointmentStats.jsx(1 hunks)client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx(1 hunks)client/src/components/Patient/PatientAppointments/ErrorState.jsx(1 hunks)client/src/pages/patient/PatientAppointments.jsx(2 hunks)
🧰 Additional context used
🧬 Code graph analysis (6)
client/src/components/Patient/PatientAppointments/AppointmentStats.jsx (1)
client/src/pages/patient/PatientAppointments.jsx (2)
appointments(11-11)prescriptionStatus(14-14)
client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx (2)
client/src/pages/patient/PatientAppointments.jsx (3)
appointments(11-11)activeTab(17-17)prescriptionStatus(14-14)client/src/components/Patient/PatientAppointments/AppointmentCard.jsx (1)
AppointmentCard(16-159)
client/src/components/Patient/PatientAppointments/ErrorState.jsx (1)
client/src/pages/patient/PatientAppointments.jsx (1)
error(13-13)
client/src/pages/patient/PatientAppointments.jsx (5)
client/src/components/ui/Loading.jsx (1)
Loading(4-63)client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx (1)
AppointmentHeader(3-43)client/src/components/Patient/PatientAppointments/ErrorState.jsx (1)
ErrorState(3-12)client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx (1)
AppointmentTabs(6-124)client/src/components/Patient/PatientAppointments/AppointmentStats.jsx (1)
AppointmentStats(3-54)
client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx (1)
client/src/pages/patient/PatientAppointments.jsx (2)
searchTerm(15-15)filterStatus(16-16)
client/src/components/Patient/PatientAppointments/AppointmentCard.jsx (1)
client/src/pages/patient/PatientAppointments.jsx (1)
prescriptionStatus(14-14)
Comment on lines
+23
to
+24
| (isToday(aptDate) && | ||
| differenceInHours(new Date(`${apt.date}T${apt.startTime}`), today) > 0) |
Contributor
There was a problem hiding this comment.
Fix upcoming filter to include sub-hour appointments.
Line 24 calls differenceInHours(...) > 0, but date-fns truncates the result to whole hours. When an appointment starts within the next 59 minutes, Line 24 evaluates to 0 > 0, so the entry never appears in the Upcoming tab—even though it is still in the future. Users therefore lose sight of imminent appointments until they are an hour away (or less). Switch to a direct date comparison (or a minute-level diff) so any future start time, even within the hour, is included.
-import { differenceInHours, isFuture, isPast, isToday } from 'date-fns';
+import { isFuture, isPast, isToday } from 'date-fns';
@@
- (isToday(aptDate) &&
- differenceInHours(new Date(`${apt.date}T${apt.startTime}`), today) > 0)
+ (isToday(aptDate) && new Date(`${apt.date}T${apt.startTime}`) > today)📝 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
| (isToday(aptDate) && | |
| differenceInHours(new Date(`${apt.date}T${apt.startTime}`), today) > 0) | |
| (isToday(aptDate) && new Date(`${apt.date}T${apt.startTime}`) > today) |
This was referenced Oct 30, 2025
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #73
Summary by CodeRabbit