Appointment as structured question + other enhancements #9661
Conversation
WalkthroughThis pull request introduces enhancements to the application's follow-up appointment functionality. The changes include the addition of new localization strings, the creation of a dedicated React component for handling follow-up appointment questions, updates to type definitions, and modifications to existing questionnaire and scheduling components to integrate the new feature effectively. Changes
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. |
Deploying care-fe with
|
| Latest commit: |
e696114
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://baa4da5f.care-fe.pages.dev |
| Branch Preview URL: | https://rithviknishad-feat-follow-up.care-fe.pages.dev |
CARE
|
||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
rithviknishad/feat/follow-up-question
|
| Run status |
|
| Run duration | 01m 07s |
| Commit |
|
| Committer | Rithvik Nishad |
| 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 ↗︎ | |
rithviknishad
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (11)
src/components/Questionnaire/structured/handlers.ts (1)
156-171: Add Null Check for Array AccessThe new
follow_up_appointmenthandler expects[0]to exist infollowUpAppointment. Consider adding a safeguard for cases where the array might be empty to avoid potential runtime errors.+ if (!followUpAppointment.length) { + return []; + }src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx (2)
22-39: Props and Interface Naming
FollowUpVisitQuestionPropsis well-defined. However, consider harmonizing naming conventions with other structured question components (e.g.,FollowUpAppointmentQuestionProps) for better consistency.-interface FollowUpVisitQuestionProps { +interface FollowUpAppointmentQuestionProps {
97-218: UI Rendering and Edge CasesThe component correctly handles loading states, absence of slots, and merges user input back into the questionnaire. Adding user feedback for partial or invalid input might further enhance usability, but this looks good overall.
src/components/Schedule/Appointments/AppointmentDetailsPage.tsx (2)
359-363: Use of isSameDay CheckEnsuring that the “check-in” and “start consultation” buttons are disabled for days other than the current day is logical. Confirm no user scenario requires same-day logic across midnight boundaries (e.g., late-night appointments).
Line range hint
412-426: Marking Appointments as FulfilledThe approach to restrict “fulfill” to the day of the appointment only is intuitive but might be too limiting in certain workflows (e.g., backdating or retroactive fulfillment). Keep an eye on user feedback.
src/components/Schedule/Appointments/utils.ts (2)
15-15: Confirm usage scenarios.
getFakeTokenNumberis an interesting helper. If you plan to pivot to the real token numbers in the future, ensure that you maintain consistent usage across the codebase.
132-132: Keep function boundaries small.
Consider splitting any heavy logic (like constructing HTML content) into helper functions ifprintAppointmentgrows longer.src/components/Schedule/Appointments/AppointmentsPage.tsx (3)
698-698: Edge case handling.
Validate or log a message if no slots are found. The current logic gracefully returns early, but consider a user-facing message to clarify “No available slots.”
710-714: Improve readability.
For the schedule time display,.replace(":00", "")makes sense for dropping trailing zeros. Confirm that removing minutes is valid for all locales/time formats.
734-734: Button size consistency.
UsingclassName="min-w-60"is consistent with prior usage. Ensure it aligns well with responsive designs and text length.public/locale/en.json (1)
1839-1839: Check for potential duplication.
"view_patient": "View Patient"is already a common phrase. Confirm no duplication or conflicting usage in UI strings.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
public/locale/en.json(3 hunks)src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx(1 hunks)src/components/Questionnaire/QuestionTypes/QuestionInput.tsx(2 hunks)src/components/Questionnaire/QuestionnaireForm.tsx(1 hunks)src/components/Questionnaire/structured/handlers.ts(2 hunks)src/components/Questionnaire/structured/types.ts(3 hunks)src/components/Schedule/Appointments/AppointmentCreatePage.tsx(1 hunks)src/components/Schedule/Appointments/AppointmentDetailsPage.tsx(7 hunks)src/components/Schedule/Appointments/AppointmentsPage.tsx(4 hunks)src/components/Schedule/Appointments/utils.ts(2 hunks)src/components/Schedule/types.ts(1 hunks)src/types/questionnaire/form.ts(3 hunks)src/types/questionnaire/question.ts(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/components/Questionnaire/QuestionnaireForm.tsx
- src/components/Schedule/Appointments/AppointmentCreatePage.tsx
🔇 Additional comments (29)
src/types/questionnaire/form.ts (3)
1-1: Clean and straightforward import.
ImportingFollowUpAppointmentQuestionRequestaligns with the introduced follow-up appointment feature.
25-26: Extending the union with a new structured type.
Incorporating"follow_up_appointment"withinResponseValue.typecorrectly broadens the feature set to handle follow-up appointment data.
38-39: Ensuring consistency for the new data structure.
AddingFollowUpAppointmentQuestionRequesttoResponseValue.valuesupports capturing the relevant details in questionnaire responses.src/components/Questionnaire/structured/types.ts (3)
1-4: New imports for scheduling and appointments.
IntroducingAppointmentCreateandFollowUpAppointmentQuestionRequestfrom@/components/Schedule/typesis a valid approach to extend the questionnaire with scheduling data.
25-25: New property inStructuredDataMap.
This addition allows the questionnaire to store follow-up appointment details.
36-36: ExtendingStructuredRequestMapfor appointment creation.
Mapping"follow_up_appointment"toAppointmentCreateensures streamlined request handling of follow-up appointments.src/types/questionnaire/question.ts (1)
25-26: New structured question type.
Adding"follow_up_appointment"toStructuredQuestionTypeis consistent with the recently introduced scheduling data.src/components/Schedule/types.ts (1)
108-111: Well-defined interface for follow-up appointments.
FollowUpAppointmentQuestionRequestneatly captures the essential data for scheduling a follow-up appointment.src/components/Questionnaire/structured/handlers.ts (1)
Line range hint
132-154: Remove Unused Context ParameterYou removed
facilityIdfrom context and updated the logic to return an empty array if there’s noencounterId. This seems like a valid simplification. Just ensure the rest of the codebase no longer relies on the oldfacilityIdparameter.src/components/Questionnaire/QuestionTypes/QuestionInput.tsx (2)
5-6: Import Statement for FollowUpAppointmentQuestionThe import of
FollowUpAppointmentQuestionis straightforward and aligns with the new question type. Make sure to keep your imports organized if more question components are added in the future.
166-167: Proper Integration of Follow-Up Appointment CaseAdding the
"follow_up_appointment"case in the switch statement ensures the correct rendering of the new question type. The approach is consistent with how other structured questions are handled.src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx (3)
1-21: Imports and Basic SetupAll essential dependencies are properly imported, including
react-query, date utilities, UI components, and hooks. This cohesive setup looks good, but be mindful of bundle size if additional libraries are introduced in the future.
40-69: Local State & Data HandlingInitializing local state for
resourceandselectedDateis a good approach. ThehandleUpdatemethod merges updates precisely onto existing values. This structure appears clean.
70-95: Conditional React Query for SlotsUsing
enabled: !!resource && !!selectedDateto avoid extraneous fetches is a solid best practice. This prevents unnecessary queries and optimizes performance.src/components/Schedule/Appointments/AppointmentDetailsPage.tsx (6)
14-15: Leverage isSameDay for Appointment StatusReplacing “Appointment Has Started” with
isSameDayis a simpler approach for controlling same-day statuses. Confirm that future or next-day appointments intended for partial check-ins are not mistakenly excluded.
41-44: Printing UtilityImporting and calling
printAppointmentcentralizes printing logic. Make sure the utility gracefully handles missing or incomplete data (e.g., ifappointmentorfacilitylacks certain details).
136-143: Print Button LayoutThe new print button next to the save button is cohesive. This offers a convenient user workflow for quickly printing or saving appointment details.
163-171: Navigate to Patient VerificationThis ensures a seamless transition for viewing patients from the appointment context. Be mindful of any potential need to carry additional query parameters for specialized patient checks.
353-353: New onViewPatient PropThe additional prop for
onViewPatientinAppointmentActionsPropsproperly extends the interface to handle patient navigation. No issues found.
393-407: “View Patient” ButtonDisplaying “view patient” only when the status is “booked” is a sensible channel to confirm patient identity prior to check-in. You might revisit if it is beneficial for other statuses as well.
src/components/Schedule/Appointments/utils.ts (3)
10-11: Use named imports carefully.
Imports forTFunctionandtoastlook good. Confirm that they are properly utilized in any newly added functions to prevent dead code or unexpected bundler issues.
13-13: Check for potential shape mismatches.
Ensure thatFacilityModelaligns with the facility properties consumed byprintAppointment, especially if you plan to display or format facility attributes that may not exist in the model.
23-27: Good consolidation of utilities.
AddingformatPatientAgeto the import block looks consistent with other date/time or formatting utilities.src/components/Schedule/Appointments/AppointmentsPage.tsx (4)
388-388: Slightly increased height.
Switching fromcalc(100vh-22rem)tocalc(100vh-18rem)shrinks the margin, increasing visible list height by 4rem. Looks good for displaying more appointment items, but verify design acceptance.
681-682: Ensure new props are used consistently.
The newly introduceddisableInlineanddisabledprops expand theSlotFilterusage. Confirm that the parent component sets appropriate boolean values for these new props.
687-691: Exporting SlotFilter.
ExportingSlotFilteris helpful for reusability. Check if it’s imported in other files, ensuring consistent usage patterns.
702-706: Disable logic for the "all" tab.
TheTabsTriggerwithdisabled={props.disabled}is a good addition. Double-check if your UI visually differs when the tab is disabled (for clarity to the user).public/locale/en.json (2)
1591-1592: New i18n keys for time selection.
Keys"select_time"and"select_time_slot"appear correct. Confirm usage and references in appointment booking or scheduling components.
1636-1636: Ensure dynamic interpolation.
"slots_left"might need a placeholder if you plan dynamic insertion (e.g.,"{count} slots left"). Keep an eye on usage.
| Token No. | ||
| </label> | ||
| <p | ||
| style=" | ||
| font-size: 3rem; /* text-5xl */ | ||
| font-weight: 700; /* font-bold */ | ||
| line-height: 1; /* leading-none */ | ||
| margin: 0; | ||
| " | ||
| > | ||
| ${getFakeTokenNumber(appointment)} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <!-- Bottom row: Practitioner & date/time + QR --> | ||
| <div | ||
| style=" | ||
| margin-top: 1rem; /* mt-4 */ | ||
| display: flex; /* flex */ | ||
| justify-content: space-between; /* justify-between */ | ||
| " | ||
| > | ||
| <div | ||
| style=" | ||
| display: flex; | ||
| flex-direction: column; | ||
| row-gap: 0.5rem; /* space-y-2 approximation */ | ||
| " | ||
| > | ||
| <div> | ||
| <label | ||
| style=" | ||
| font-size: 0.875rem; /* text-sm */ | ||
| font-weight: 500; /* font-medium */ | ||
| " | ||
| > | ||
| Practitioner: | ||
| </label> | ||
| <p | ||
| style=" | ||
| font-size: 0.875rem; /* text-sm */ | ||
| font-weight: 600; /* font-semibold */ | ||
| margin: 0.25rem 0 0 0; | ||
| " | ||
| > | ||
| ${appointment.resource.first_name} ${appointment.resource.last_name} | ||
| </p> | ||
| </div> | ||
| <div> | ||
| <p | ||
| style=" | ||
| font-size: 0.875rem; /* text-sm */ | ||
| font-weight: 600; /* font-semibold */ | ||
| color: #4B5563; /* text-gray-600 */ | ||
| margin: 0.25rem 0 0 0; | ||
| " | ||
| > | ||
| ${format(appointment.token_slot.start_datetime, "MMMM d, yyyy")}, ${format(appointment.token_slot.start_datetime, "h:mm a")} - ${format(appointment.token_slot.end_datetime, "h:mm a")} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <!-- Example QR (as <svg>) --> | ||
| <svg | ||
| height="64" | ||
| width="64" | ||
| viewBox="0 0 29 29" | ||
| role="img" | ||
| > | ||
| <path | ||
| fill="#FFFFFF" | ||
| d="M0,0 h29v29H0z" | ||
| shape-rendering="crispEdges" | ||
| ></path> | ||
| <path | ||
| fill="#000000" | ||
| d="M0 0h7v1H0zM9 0h1v1H9zM12 0h2v1H12zM15 0h1v1H15zM19 0h1v1H19zM22,0 h7v1H22zM0 1h1v1H0zM6 1h1v1H6zM12 1h6v1H12zM20 1h1v1H20zM22 1h1v1H22zM28,1 h1v1H28zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h4v1H8zM13 2h1v1H13zM18 2h1v1H18zM22 2h1v1H22zM24 2h3v1H24zM28,2 h1v1H28zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM8 3h1v1H8zM11 3h1v1H11zM14 3h2v1H14zM17 3h4v1H17zM22 3h1v1H22zM24 3h3v1H24zM28,3 h1v1H28zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h1v1H8zM10 4h1v1H10zM16 4h4v1H16zM22 4h1v1H22zM24 4h3v1H24zM28,4 h1v1H28zM0 5h1v1H0zM6 5h1v1H6zM8 5h5v1H8zM15 5h1v1H15zM22 5h1v1H22zM28,5 h1v1H28zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22,6 h7v1H22zM8 7h1v1H8zM10 7h2v1H10zM14 7h2v1H14zM20 7h1v1H20zM0 8h1v1H0zM2 8h5v1H2zM11 8h2v1H11zM15 8h3v1H15zM22 8h5v1H22zM3 9h1v1H3zM7 9h2v1H7zM10 9h1v1H10zM13 9h2v1H13zM18 9h3v1H18zM22 9h1v1H22zM24 9h2v1H24zM28,9 h1v1H28zM6 10h2v1H6zM10 10h1v1H10zM13 10h4v1H13zM20 10h3v1H20zM24 10h4v1H24zM0 11h3v1H0zM4 11h1v1H4zM8 11h1v1H8zM10 11h1v1H10zM12 11h2v1H12zM18 11h1v1H18zM23 11h3v1H23zM27,11 h2v1H27zM1 12h3v1H1zM6 12h1v1H6zM8 12h1v1H8zM10 12h1v1H10zM14 12h2v1H14zM17 12h5v1H17zM23 12h1v1H23zM26 12h1v1H26zM0 13h2v1H0zM3 13h3v1H3zM7 13h1v1H7zM9 13h1v1H9zM11 13h1v1H11zM16 13h1v1H16zM19 13h1v1H19zM21 13h2v1H21zM24 13h2v1H24zM27,13 h2v1H27zM0 14h1v1H0zM3 14h1v1H3zM6 14h1v1H6zM8 14h1v1H8zM10 14h2v1H10zM15 14h1v1H15zM20 14h1v1H20zM22 14h3v1H22zM2 15h1v1H2zM8 15h2v1H8zM14 15h1v1H14zM16 15h1v1H16zM20 15h1v1H20zM23 15h2v1H23zM4 16h4v1H4zM11 16h2v1H11zM15 16h1v1H15zM17 16h3v1H17zM21 16h1v1H21zM23 16h1v1H23zM25,16 h4v1H25zM0 17h2v1H0zM3 17h1v1H3zM7 17h1v1H7zM9 17h1v1H9zM11 17h1v1H11zM13 17h2v1H13zM16 17h2v1H16zM19 17h1v1H19zM22 17h1v1H22zM24 17h2v1H24zM28,17 h1v1H28zM0 18h1v1H0zM2 18h2v1H2zM5 18h3v1H5zM9 18h1v1H9zM12 18h5v1H12zM18 18h1v1H18zM20 18h1v1H20zM23 18h3v1H23zM27 18h1v1H27zM0 19h1v1H0zM3 19h1v1H3zM5 19h1v1H5zM8 19h4v1H8zM13 19h1v1H13zM18 19h1v1H18zM21 19h1v1H21zM23 19h3v1H23zM27,19 h2v1H27zM0 20h1v1H0zM2 20h2v1H2zM6 20h1v1H6zM8 20h2v1H8zM14 20h2v1H14zM17 20h2v1H17zM20 20h5v1H20zM26 20h2v1H26zM8 21h1v1H8zM10 21h3v1H10zM16 21h1v1H16zM19 21h2v1H19zM24 21h1v1H24zM27,21 h2v1H27zM0 22h7v1H0zM11 22h1v1H11zM15 22h3v1H15zM19 22h2v1H19zM22 22h1v1H22zM24 22h1v1H24zM26 22h1v1H26zM0 23h1v1H0zM6 23h1v1H6zM8 23h1v1H8zM10 23h1v1H10zM14 23h3v1H14zM20 23h1v1H20zM24 23h1v1H24zM27 23h1v1H27zM0 24h1v1H0zM2 24h3v1H2zM6 24h1v1H6zM8 24h1v1H8zM11 24h2v1H11zM15 24h3v1H15zM20 24h7v1H20zM0 25h1v1H0zM2 25h3v1H2zM6 25h1v1H6zM8 25h1v1H8zM10 25h1v1H10zM12 25h1v1H12zM14 25h1v1H14zM18 25h1v1H18zM21 25h1v1H21zM23 25h1v1H23zM25 25h1v1H25zM27,25 h2v1H27zM0 26h1v1H0zM2 26h3v1H2zM6 26h1v1H6zM8 26h2v1H8zM11 26h2v1H11zM14 26h3v1H14zM19 26h1v1H19zM22 26h1v1H22zM24 26h4v1H24zM0 27h1v1H0zM6 27h1v1H6zM10 27h2v1H10zM19 27h2v1H19zM23 27h2v1H23zM27 27h1v1H27zM0 28h7v1H0zM8 28h1v1H8zM11 28h1v1H11zM15 28h4v1H15zM21 28h1v1H21zM23 28h1v1H23zM26 28h1v1H26z" | ||
| shape-rendering="crispEdges" | ||
| ></path> | ||
| </svg> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| </body> | ||
| </html> | ||
| `); | ||
|
|
||
| printWindow.document.close(); | ||
|
|
||
| // Wait for content to load before printing | ||
| printWindow.onload = () => { | ||
| printWindow.print(); | ||
| printWindow.onafterprint = () => printWindow.close(); | ||
| }; | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Validate new inline styling for maintainability.
This newly added printAppointment function utilizes a large inlined HTML block with tailwind classes and direct styling attributes. While it may be acceptable for a quick solution, it can become difficult to maintain or update.
- printWindow.document.write(`
- <html>
- ...
- `);
+ // Consider: build the HTML string with smaller templated parts
+ // or move styling to a dedicated CSS file for maintainability.Committable suggestion skipped: line range outside the PR's diff.
| @@ -797,4 +812,4 @@ function SlotFilter({ selectedSlot, onSelect, ...props }: SlotFilterProps) { | |||
| </SelectContent> | |||
| </Select> | |||
| ); | |||
| } | |||
| }; | |||
There was a problem hiding this comment.
Clean up unreachable code.
There seems to be a second return statement for <Select>. If this code is never reached, consider removing it to avoid confusion.
- return (
- <Select value={selectedSlot ?? "all"} onValueChange={onSelect}>
- ...
- </Select>
- );Committable suggestion skipped: line range outside the PR's diff.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx (2)
40-68: Enhance type safety in state management.Consider improving type safety in the following areas:
- The type casting of questionnaireResponse values
- The handleUpdate function's value merging
Apply this diff to improve type safety:
- const values = - (questionnaireResponse.values?.[0] - ?.value as unknown as FollowUpAppointmentRequest[]) || []; + const values = (questionnaireResponse.values?.[0]?.value ?? []) as FollowUpAppointmentRequest[]; - const value = values[0] ?? {}; + const value: FollowUpAppointmentRequest = values[0] ?? { + reason_for_visit: '', + slot_id: undefined, + }; const handleUpdate = (updates: Partial<FollowUpAppointmentRequest>) => { - const followUpAppointment = { ...value, ...updates }; + const followUpAppointment: FollowUpAppointmentRequest = { ...value, ...updates }; updateQuestionnaireResponseCB({
95-216: Enhance form accessibility.While the UI is well-structured, consider improving accessibility for better user experience.
Add the following accessibility enhancements:
- Add aria-labels and descriptions:
<Textarea placeholder={t("reason_for_visit_placeholder")} value={value.reason_for_visit || ""} onChange={(e) => handleUpdate({ reason_for_visit: e.target.value })} disabled={disabled} + aria-label={t("reason_for_visit")} + aria-required={question.required} /> <Select disabled={resourcesQuery.isLoading || disabled} value={resource?.id} + aria-label={t("select_practitioner")} + aria-required={question.required} >
- Add error announcements for screen readers:
{resourcesQuery.isError && ( - <div className="text-red-500"> + <div className="text-red-500" role="alert" aria-live="polite"> {t("error_fetching_doctors")} </div> )}
- Add loading announcements:
{slotsQuery.isLoading && ( + <div className="sr-only" role="status" aria-live="polite"> + {t("loading_slots")} + </div> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx(1 hunks)src/components/Questionnaire/structured/types.ts(3 hunks)src/components/Schedule/types.ts(1 hunks)src/types/questionnaire/form.ts(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- src/components/Questionnaire/structured/types.ts
- src/components/Schedule/types.ts
- src/types/questionnaire/form.ts
🔇 Additional comments (2)
src/components/Questionnaire/QuestionTypes/FollowUpAppointmentQuestion.tsx (2)
1-38: Well-organized imports and clear type definitions!The code demonstrates good organization with logically grouped imports and a well-defined props interface.
1-216: Verify all translation keys are defined.Please ensure all translation keys used in the component are defined in the localization files.
Run the following script to verify translation keys:
✅ Verification successful
All translation keys are properly defined in the localization files
The verification script checked for all translation keys used in the component:
- reason_for_visit
- reason_for_visit_placeholder
- select_practitioner
- show_all
- select_date
- select_time
- no_slots_available
- select_time_slot
- slots_left
All keys were found in the localization files under
public/locale/, as indicated by the exit code 0 for each key check.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if all translation keys used in the component are defined in the localization files. # Extract translation keys from the component KEYS=( "reason_for_visit" "reason_for_visit_placeholder" "select_practitioner" "show_all" "select_date" "select_time" "no_slots_available" "select_time_slot" "slots_left" ) # Check if keys exist in the localization files echo "Checking translation keys..." for key in "${KEYS[@]}"; do rg -q "\"$key\":" public/locale/ if [ $? -ne 0 ]; then echo "Warning: Translation key '$key' not found" fi doneLength of output: 1033
| const facilityId = useSlug("facility"); | ||
|
|
||
| const resourcesQuery = useQuery({ | ||
| queryKey: ["availableResources", facilityId], | ||
| queryFn: query(ScheduleAPIs.appointments.availableDoctors, { | ||
| pathParams: { facility_id: facilityId }, | ||
| }), | ||
| }); | ||
|
|
||
| const slotsQuery = useQuery({ | ||
| queryKey: [ | ||
| "slots", | ||
| facilityId, | ||
| resource?.id, | ||
| dateQueryString(selectedDate), | ||
| ], | ||
| queryFn: query(ScheduleAPIs.slots.getSlotsForDay, { | ||
| pathParams: { facility_id: facilityId }, | ||
| body: { | ||
| resource: resource?.id, | ||
| day: dateQueryString(selectedDate), | ||
| }, | ||
| }), | ||
| enabled: !!resource && !!selectedDate, | ||
| }); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for data fetching.
The queries lack error handling which could lead to poor user experience when network requests fail.
Consider adding error handling and loading states:
const resourcesQuery = useQuery({
queryKey: ["availableResources", facilityId],
queryFn: query(ScheduleAPIs.appointments.availableDoctors, {
pathParams: { facility_id: facilityId },
}),
+ retry: 2,
+ onError: (error) => {
+ // Handle error (e.g., show toast notification)
+ console.error('Failed to fetch available doctors:', error);
+ }
});
const slotsQuery = useQuery({
queryKey: [
"slots",
facilityId,
resource?.id,
dateQueryString(selectedDate),
],
queryFn: query(ScheduleAPIs.slots.getSlotsForDay, {
pathParams: { facility_id: facilityId },
body: {
resource: resource?.id,
day: dateQueryString(selectedDate),
},
}),
enabled: !!resource && !!selectedDate,
+ retry: 2,
+ onError: (error) => {
+ // Handle error (e.g., show toast notification)
+ console.error('Failed to fetch slots:', error);
+ }
});Also, consider displaying error states in the UI:
{resourcesQuery.isError && (
<div className="text-red-500">
{t("error_fetching_doctors")}
</div>
)}
{slotsQuery.isError && (
<div className="text-red-500">
{t("error_fetching_slots")}
</div>
)}
| @@ -17,6 +22,7 @@ export interface StructuredDataMap { | |||
| symptom: Symptom; | |||
| diagnosis: Diagnosis; | |||
| encounter: Encounter; | |||
| follow_up_appointment: FollowUpAppointmentQuestionRequest; | |||
|
@rithviknishad 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! 🙌 |
Proposed Changes
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style