Refactor/patient appointments page UI#79
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
WalkthroughThis PR redesigns the Patient Appointments page UI by overhauling AppointmentCard with enriched header and avatar display, simplifying AppointmentHeader layout, replacing AppointmentTabs grid with flex-based tab bar and vertical list, removing AppointmentStats component entirely, and adding error handling with prescription status tracking in the main page. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
Suggested labels
Poem
Pre-merge checks and finishing touches✅ 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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
client/src/pages/patient/PatientAppointments.jsx (1)
25-37: Reset the error state before retrying fetches.Once
erroris set, we never clear it on a successful retry, so the component keeps returning the error view even after fresh data arrives. Please clear the error before the API call (or immediately after a successful response) so users can recover from transient failures.try { setLoading(true); + setError(null); const response = await getPatientAppointments();
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
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(0 hunks)client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx(1 hunks)client/src/pages/patient/PatientAppointments.jsx(2 hunks)
💤 Files with no reviewable changes (1)
- client/src/components/Patient/PatientAppointments/AppointmentStats.jsx
🧰 Additional context used
🧬 Code graph analysis (4)
client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx (2)
client/src/pages/patient/PatientAppointments.jsx (2)
activeTab(17-17)prescriptionStatus(14-14)client/src/components/Patient/PatientAppointments/AppointmentCard.jsx (1)
AppointmentCard(16-150)
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)
client/src/pages/patient/PatientAppointments.jsx (4)
client/src/components/Patient/PatientAppointments/ErrorState.jsx (1)
ErrorState(3-12)client/src/components/public/Nearbyclinics/ErrorState.jsx (1)
ErrorState(3-18)client/src/components/Patient/PatientAppointments/AppointmentHeader.jsx (1)
AppointmentHeader(3-44)client/src/components/Patient/PatientAppointments/AppointmentTabs.jsx (1)
AppointmentTabs(6-112)
Comment on lines
+81
to
+83
| if (error) { | ||
| return <ErrorState message={error} onRetry={fetchAppointments} />; | ||
| } |
Contributor
There was a problem hiding this comment.
Pass the correct prop to ErrorState.
ErrorState reads from an error prop (see client/src/components/Patient/PatientAppointments/ErrorState.jsx), so sending message leaves the UI blank and hides the failure explanation. Please pass error={error} here.
- if (error) {
- return <ErrorState message={error} onRetry={fetchAppointments} />;
- }
+ if (error) {
+ return <ErrorState error={error} onRetry={fetchAppointments} />;
+ }📝 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
| if (error) { | |
| return <ErrorState message={error} onRetry={fetchAppointments} />; | |
| } | |
| if (error) { | |
| return <ErrorState error={error} onRetry={fetchAppointments} />; | |
| } |
🤖 Prompt for AI Agents
In client/src/pages/patient/PatientAppointments.jsx around lines 81 to 83, the
component currently returns <ErrorState message={error} ... />, but ErrorState
expects an error prop; change the prop to error={error} and keep the onRetry
prop intact so the error message displays correctly.
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.
Screenshot
desktop :
mobile :
closes #75
Summary by CodeRabbit
Release Notes
New Features
Improvements