Display year of birth when age is entered in public patient registration page #10808
Conversation
…ion page Fixes #10807 Add year of birth display when age is entered in public patient registration page * Add a new `div` element to display the year of birth when age is entered * Update the `FormField` for age to include the year of birth display * Calculate the year of birth based on the entered age and display it * Display "Invalid age" message if the calculated year of birth is less than or equal to 0 --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/ohcnetwork/care_fe/issues/10807?shareId=XXXX-XXXX-XXXX-XXXX).
WalkthroughThe changes modify the Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant PR as PatientRegistration Component
participant Sys as System
U->>PR: Enter year_of_birth value
alt year_of_birth ≤ 0
PR->>U: Render "Invalid age" (red text)
else year_of_birth > 0
PR->>Sys: Calculate age (currentYear - year_of_birth)
Sys-->>PR: Return computed age
PR->>U: Display age with translated "year_of_birth" prefix (violet text)
end
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. |
Deploying care-fe with
|
| Latest commit: |
65c396c
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://6e2172a5.care-fe.pages.dev |
| Branch Preview URL: | https://bodhish-fix-patient-registra.care-fe.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/pages/PublicAppointments/PatientRegistration.tsx (3)
365-377: Use translation function for error message textThe error message "Invalid age" is hardcoded in English, while other UI strings in the application use the translation function
t(). For consistency and proper internationalization, this text should be translated.Consider using the translation function for the error message:
- <span className="text-red-600">Invalid age</span> + <span className="text-red-600">{t("invalid_age")}</span>Make sure to add the "invalid_age" key to your translation files.
367-374: Clarify the age calculation logicThe calculation is correct, but there might be confusion in the variable naming. In this form,
year_of_birthis actually used to store the user's age input, while the calculated value represents the actual year of birth.To improve code clarity, you could add a comment explaining this or consider refactoring the variable names in a future update to better reflect their purpose.
365-377: Enhance form reactivity withwatchinstead ofgetValuesUsing
form.getValues()multiple times doesn't automatically re-render when values change during typing. Usingform.watch()would make the UI update reactively as the user types.Consider modifying the code to use
watchfor better reactivity:- {form.getValues("year_of_birth") && ( + {form.watch("year_of_birth") && ( <div className="text-sm font-bold"> - {Number(form.getValues("year_of_birth")) <= 0 ? ( + {Number(form.watch("year_of_birth")) <= 0 ? ( <span className="text-red-600">Invalid age</span> ) : ( <span className="text-violet-600"> {t("year_of_birth")}:{" "} {new Date().getFullYear() - - Number(form.getValues("year_of_birth"))} + Number(form.watch("year_of_birth"))} </span> )} </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/pages/PublicAppointments/PatientRegistration.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#10260
File: src/components/Patient/PatientRegistration.tsx:286-289
Timestamp: 2025-01-28T15:50:07.442Z
Learning: For patient registration in the frontend, either year_of_birth or date_of_birth is required for successful registration. If date_of_birth is not available, year_of_birth must be present.
src/pages/PublicAppointments/PatientRegistration.tsx (1)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#10260
File: src/components/Patient/PatientRegistration.tsx:286-289
Timestamp: 2025-01-28T15:50:07.442Z
Learning: For patient registration in the frontend, either year_of_birth or date_of_birth is required for successful registration. If date_of_birth is not available, year_of_birth must be present.
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: Test
- GitHub Check: cypress-run (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (1)
src/pages/PublicAppointments/PatientRegistration.tsx (1)
365-377: Implementation successfully meets PR objectivesThe added code successfully implements the PR objective to display the year of birth when age is entered. The UI feedback is clear, with proper error handling for invalid ages and a nicely formatted display for valid ages.
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
bodhish/fix-patient-registration
|
| Run status |
|
| Run duration | 07m 11s |
| Commit |
|
| Committer | Bodhish Thomas |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
11
|
| View all changes introduced in this branch ↗︎ | |
| {Number(form.getValues("year_of_birth")) <= 0 ? ( | ||
| <span className="text-red-600">Invalid age</span> | ||
| ) : ( | ||
| <span className="text-violet-600"> | ||
| {t("year_of_birth")}:{" "} | ||
| {new Date().getFullYear() - | ||
| Number(form.getValues("year_of_birth"))} | ||
| </span> | ||
| )} |
There was a problem hiding this comment.
The validation is checking the raw input value rather than the calculated birth year. Consider computing the birth year as new Date().getFullYear() minus the entered age and then verifying that this value is greater than 0.
| {Number(form.getValues("year_of_birth")) <= 0 ? ( | |
| <span className="text-red-600">Invalid age</span> | |
| ) : ( | |
| <span className="text-violet-600"> | |
| {t("year_of_birth")}:{" "} | |
| {new Date().getFullYear() - | |
| Number(form.getValues("year_of_birth"))} | |
| </span> | |
| )} | |
| {(() => { | |
| const currentYear = new Date().getFullYear(); | |
| const birthYear = currentYear - Number(form.getValues("year_of_birth")); | |
| return birthYear <= 0 ? ( | |
| <span className="text-red-600">Invalid age</span> | |
| ) : ( | |
| <span className="text-violet-600"> | |
| {t("year_of_birth")}: {birthYear} | |
| </span> | |
| ); | |
| })()} |
Copilot is powered by AI, so mistakes are possible. Review output carefully before use.
Fixes #10807
Add year of birth display when age is entered in public patient registration page
divelement to display the year of birth when age is enteredFormFieldfor age to include the year of birth displayFor more details, open the Copilot Workspace session.
Summary by CodeRabbit