Upgrading old UI components with new ones #10049
Conversation
WalkthroughThe pull request introduces a new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![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
🔭 Outside diff range comments (1)
src/pages/PublicAppointments/PatientRegistration.tsx (1)
Line range hint
89-89: Improve date validation in the schema.The current schema validation for
date_of_birthneeds improvement:
- Remove the string type to maintain type consistency.
- Add validation for minimum date.
Apply this diff to improve the schema:
-date_of_birth: z.date().or(z.string()).optional(), +date_of_birth: z.date() + .optional() + .refine( + (date) => { + if (!date) return true; + const minDate = new Date(); + minDate.setFullYear(minDate.getFullYear() - 150); + return date >= minDate && date <= new Date(); + }, + { message: t("invalid_date_range") } + ),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/PublicAppointments/PatientRegistration.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (2)
src/pages/PublicAppointments/PatientRegistration.tsx (2)
11-11: LGTM!The import statement for the new DatePicker component follows the project's conventions.
Line range hint
193-193: Verify date formatting in form submission.The
dateQueryStringutility is used to format the date, but there's no validation to ensure the date is properly formatted.Run this script to verify the implementation of
dateQueryString:
| <DatePicker | ||
| date={ | ||
| field.value ? new Date(field.value) : undefined | ||
| } | ||
| onChange={(dateObj: { | ||
| name: string; | ||
| value: Date; | ||
| }) => { | ||
| if (dateObj?.value instanceof Date) { | ||
| field.onChange(dateObj.value.toISOString()); | ||
| } else { | ||
| field.onChange(null); | ||
| } | ||
| }} | ||
| disableFuture | ||
| min={new Date(1900, 0, 1)} | ||
| className="-mb-6" | ||
| onChange={(date) => field.onChange(date)} |
There was a problem hiding this comment.
Add date validation and improve type safety.
The DatePicker implementation needs several improvements:
- Add validation to prevent future dates (previously handled by
disableFuture). - Add type validation for the date conversion.
- Sanitize the date input before form mutation.
- Add accessibility attributes.
Apply this diff to address these issues:
<DatePicker
- date={field.value ? new Date(field.value) : undefined}
- onChange={(date) => field.onChange(date)}
+ date={field.value ? new Date(field.value) : undefined}
+ onChange={(date) => {
+ if (date && date > new Date()) {
+ return;
+ }
+ field.onChange(date);
+ }}
+ disableFuture
+ aria-label={t("date_of_birth")}
/>Committable suggestion skipped: line range outside the PR's diff.
Replaced DateFormField with DatePicker ui component
DatePickercomponent for date of birth selection in patient registrationThese are the components to be replaced.
Merge Checklist
@rithviknishad