Enhance AllergyQuestion component with improved UI and functionality.… #9647
Conversation
… Added AllergyItem subcomponent for better management of allergies, including dropdown menus for editing and removing allergies. Updated state management for allergies and integrated new UI elements for displaying allergy details, including last occurrence and notes. Refactored code for clarity and maintainability.
WalkthroughThe pull request introduces significant modifications to the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: |
ab1a93a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1de67b92.care-fe.pages.dev |
| Branch Preview URL: | https://rewamp-allergy.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
rewamp-allergy
|
| Run status |
|
| Run duration | 01m 07s |
| Commit |
|
| Committer | Bodhish Thomas |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
3
|
| View all changes introduced in this branch ↗︎ | |
![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 (4)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx (4)
52-58: Consider future translations for UI text.
ALLERGY_CATEGORIESis an excellent approach for standardized labels. If this component needs i18n support later, ensure these labels are localized.
106-127: Responsive rendering approach is well-structured.
The logic for switching between a grid for larger screens and a simpler stacked layout for smaller screens is good. Consider adding accessible labels or summary text for screen readers, if relevant.
201-264: Strings for category, status, and criticality.
Looks fine but remember to apply localization if needed.
314-326: Allow multi-line input for notes.
If users tend to provide longer descriptions, a textarea might be more user-friendly than a single-line input.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx(3 hunks)
🔇 Additional comments (9)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx (9)
3-8: Use of icons is clear and consistent.
11-17: UI imports look good.
No issues spotted with these added imports forDropdownMenucomponents.
31-33: Cleanly organized imports for typed interfaces.
No concerns here.
42-48: Confirm sensible defaults.
ALLERGY_INITIAL_VALUEsets a static default category, clinical_status, etc. Verify that these defaults reflect typical usage, and confirm that no data mismatch occurs when this is used downstream.
65-66: Questionnaire response casting.
Casting toAllergyIntolerance[]is legitimate, but watch out for possible runtime edge cases (e.g., ifvalues[0].valueis an unexpected type).
68-72: Duplicate allergy checks.
handleAddAllergydoes not appear to guard against adding the same allergy multiple times. Consider whether deduplication is needed.
87-96: Update logic is concise.
Directly mapping and merging updates is both readable and efficient. No issues found.
128-133: Check large data performance.
ValueSetSelectmight load a lengthy list of possible allergies. Ensure there's no noticeable performance degradation if the dataset is large.
302-313: Consider restricting invalid dates.
Last Occurrencemight benefit from client-side validation (e.g., preventing future dates).
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx (2)
56-62: Consider including a default notes property.
When creating a new allergy, if you plan to store notes, initializing anoteproperty inALLERGY_INITIAL_VALUEcan help avoid potential undefined references.Example diff:
const ALLERGY_INITIAL_VALUE: Partial<AllergyIntolerance> = { code: { code: "", display: "", system: "" }, clinical_status: "active", verification_status: "confirmed", category: "medication", criticality: "low", + note: "", };
316-330: Consider using a multi-line component for notes.
If the notes are likely to be more verbose, a multi-line text field or text area can improve the user experience over a single-line input.Proposed snippet:
{showNotes && ( <TableRow> <TableCell colSpan={7} className="px-4 py-2"> <Label className="text-xs text-gray-500">Notes</Label> - <Input - type="text" - placeholder="Add notes about the allergy..." - value={allergy.note || ""} - onChange={(e) => onUpdate?.({ note: e.target.value })} - disabled={disabled} - className="mt-0.5" - /> + <textarea + placeholder="Add notes about the allergy..." + value={allergy.note || ""} + onChange={(e) => onUpdate?.({ note: e.target.value })} + disabled={disabled} + className="mt-0.5 h-16 w-full rounded-md border border-gray-300 p-2 resize-none" + /> </TableCell> </TableRow> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx(3 hunks)src/components/ui/input.tsx(1 hunks)
🔇 Additional comments (2)
src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx (2)
153-161: Modular component approach is well-structured.
The introduction ofAllergyTableRow(and accompanying props) is a positive refactor that increases clarity and maintainability by separating concerns into a smaller, focused component.
86-87: Guard against potential undefined values.
ReturningquestionnaireResponse.values?.[0]?.valuemay cause runtime errors ifvaluesis empty or ifvalues[0]is undefined. Consider adding a fallback or validating thatvalues[0]exists before slicing into the array.Below is a script to locate places in the codebase referencing
questionnaireResponse.valuesand confirm that they’re safely accessed:
src/components/ui/input.tsx
Outdated
| onFocus={(e) => { | ||
| e.target.showPicker(); | ||
| }} |
There was a problem hiding this comment.
💡 Codebase verification
Remove unconditional showPicker() call from input component
The current implementation unconditionally calls showPicker() on focus for all input types, which is incorrect. Based on the codebase analysis:
- The
showPicker()method is only used with:type="date"in CreateUserForm and questionnaire componentstype="time"in ScheduleTemplateForm and DateTimeQuestion components
The current implementation will cause errors for other input types like text, email, password, etc., which are also used throughout the application.
Fix suggestion:
onFocus={(e) => {
if (type === 'date' || type === 'time') {
e.target.showPicker();
}
}}🔗 Analysis chain
Ensure compatibility and intended usage of showPicker().
The showPicker() method is only supported by certain input types (e.g., date, time, datetime-local, etc.) and might not be fully supported in all browsers. Consider validating the type property or providing a graceful fallback for browsers that do not implement showPicker().
Here is a script to check the usage of this component and inspect input types passed:
Let me analyze the usage of the Input component and verify the concern about showPicker().
Let me try a different approach to check the input types.
Let me check the specific component implementation to understand how the showPicker() is being used.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Searching for all usage of `Input` across the codebase, displaying context.
rg -A 5 "Input[ (]"
Length of output: 40980
Script:
#!/bin/bash
# Let's check the input component definition and its type prop usage
ast-grep --pattern 'type={$_}'
Length of output: 32
Script:
#!/bin/bash
# Let's check where type="date" or type="time" is used with Input component
rg -B 2 -A 2 'type="(date|time)"'
Length of output: 4509
Script:
#!/bin/bash
# Let's examine the input component implementation
cat src/components/ui/input.tsx
Length of output: 978
|
@bodhish Your efforts have helped advance digital healthcare and TeleICU systems. 🚀 Thank you for taking the time out to make CARE better. We hope you continue to innovate and contribute; your impact is immense! 🙌 |
Suspect IssuesThis pull request was deployed and Sentry observed the following issues:
Did you find this useful? React with a 👍 or 👎 |
This pull request includes significant changes to the
AllergyQuestioncomponent in theQuestionnairemodule. The changes involve updating the UI components, enhancing the handling of allergy data, and improving the overall user experience. The most important changes include replacing the table layout with a responsive grid, introducing dropdown menus for actions, and refactoring the state management for allergies.UI Enhancements:
DropdownMenucomponents for managing allergy actions, such as adding notes or removing allergies.State Management Improvements:
useStateand directly updating thequestionnaireResponseprop.Code Refactoring:
AllergyQuestioncomponent into smaller components, such asAllergyItem, to improve code readability and maintainability.@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
UI/UX Improvements