Public Facilities Filters #9748
Conversation
WalkthroughThis pull request introduces several modifications across multiple components and files, focusing on enhancing the user interface, localization, and organization filtering capabilities. The changes include updating localization keys, modifying component styling, introducing 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. |
|
👋 Hi, @Jacobjeevan, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
![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 (7)
src/components/ui/autocomplete.tsx (2)
46-47: Default alignmentProviding a default value of
"center"toalignis sensible. Consider documenting the different alignment options for future maintainers.
74-77: Prop-driven alignment for PopoverContentPassing the
alignprop into<PopoverContent>is consistent and clear. Keep an eye on potential edge cases when combined withsideOffsetor other positioning props.src/pages/Facility/FacilitiesPage.tsx (2)
44-51: Syncing state with query parameters inuseEffectAutomatically updating query params whenever
selectedOrgschanges is good for maintaining a shareable, bookmarkable URL. Make sure to handle potential race conditions or repeated re-renders if multiple side effects depend on these parameters.
117-118: Layout changesIncreasing the gap to
gap-5can enhance readability and spacing. Ensure it matches overall design specs.src/pages/Organization/components/OrganizationFilter.tsx (2)
24-25: TODO comment: "fetch from the backend"Remember to address the TODO: the
govtOrgLevelsshould eventually come from an API, ensuring correctness and eliminating hardcoded values.
102-147:RenderOrganizationLevelUtilizing
useQueryat each level allows dynamic loading of child orgs based on the previously selected org. The skip condition is a nice safeguard against invalid levels.You might consider memoizing or splitting each level into a smaller component for better readability.
src/pages/Appoinments/auth/PatientLogin.tsx (1)
294-294: Icon removal & i18nReplacing the icon with a translated "back" label simplifies the UI while improving internationalization coverage. Ensure consistency across the app by removing the icon from similar back buttons if desired.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
public/locale/en.json(2 hunks)src/components/Common/UserSelector.tsx(1 hunks)src/components/ui/autocomplete.tsx(3 hunks)src/pages/Appoinments/PatientRegistration.tsx(0 hunks)src/pages/Appoinments/PatientSelect.tsx(0 hunks)src/pages/Appoinments/Schedule.tsx(0 hunks)src/pages/Appoinments/auth/PatientLogin.tsx(1 hunks)src/pages/Facility/FacilitiesPage.tsx(6 hunks)src/pages/Facility/FacilityDetailsPage.tsx(0 hunks)src/pages/Organization/components/OrganizationFilter.tsx(1 hunks)
💤 Files with no reviewable changes (4)
- src/pages/Appoinments/PatientSelect.tsx
- src/pages/Appoinments/Schedule.tsx
- src/pages/Appoinments/PatientRegistration.tsx
- src/pages/Facility/FacilityDetailsPage.tsx
🔇 Additional comments (32)
src/components/ui/autocomplete.tsx (2)
34-35: Optional alignment & styling props addedGood addition of customizable alignment (
align) and class name (popoverClassName) for finer control of the popover. This increases the component's flexibility without breaking existing usage.
53-53: ForwardingpopoverClassNameto the triggerAllowing consumers to specify custom classes in
PopoverTriggeris a convenient approach for styling. Ensure it doesn't conflict with the existing default styling or accessibility attributes.src/components/Common/UserSelector.tsx (1)
83-83: Removal of max-widthBy simplifying to a single width rule (
w-[var(--radix-popover-trigger-width)]), the popover’s width is now consistent with the trigger. Verify no layout issues arise on smaller or larger screens.src/pages/Facility/FacilitiesPage.tsx (11)
5-5: Imports for React HooksThe addition of
useEffectanduseStatesupports new stateful logic. Looks appropriate.
17-17: Switch toLocalStorageKeysenumThis improves maintainability by referencing commonly used keys from a centralized enum, helping avoid typos.
25-25: ImportingOrganizationFilterImporting a new organizational filter component is a logical approach to modularizing the facilities page.
36-36: Patient token retrievalReading from
LocalStorageKeys.patientTokenKeyhelps unify local storage usage across the app. Double-check that the key name remains consistent with backend/other references.
40-43: Initializing selected organizationsDefining
selectedOrgsfromqParams.organizationensures the user's state is in sync with query parameters when the page loads.
59-60: Query parameter usage in facility fetchIncluding
name: qParams.searchaligns with the intuitive naming for searching facilities. Conditional usage offacility_typeis also neat.
86-86: Localized labelUsing
t("patient_dashboard")instead of a hardcoded string is consistent with i18n best practices.
100-100: Sign-In button i18nSame good i18n practice here.
119-139: IntegratingOrganizationFilterOrganizing advanced filtering logic in a dedicated component is a strong design choice. The callback
onChangeelegantly updates both the local state and the URL query.
147-147: Consistent usage ofqParams.searchUsing
searchconsistently instead ofnameclarifies search functionality.
151-152: Responsive search bar sizingResizing the search bar depending on viewport width is a thoughtful touch for mobile users.
src/pages/Organization/components/OrganizationFilter.tsx (14)
1-4: React Query & i18n importsGreat to see translations and React Query used in a brand-new filter component.
5-14: UI components importDirect reuse of established UI elements, such as
Autocomplete,button,select, etc., maintains consistency in styling.
15-16: Debounced state & filter hooksLeveraging the debounced state to reduce network calls is a performance-friendly choice.
18-19: Facility type constantsCentralizing facility type constants in a single location fosters reuse.
20-23: Imports for queries & typesKeeping all request logic in separate modules (
organizationApi) aligns well with the separation of concerns.
27-33:OrganizationFilterPropsdefinitionClear, descriptive prop names. The usage of a callback
onChangeto update external state fosters component reusability.
35-39: Autocomplete option interfaceA straightforward structure for label/value pairs. Good for reusability.
40-48:OrganizationFilterfunctional componentCorrectly initializes local states, referencing props for skip levels and selected organizations.
49-60: Multiple queries for org detailsUsing
useQueriesto fetch details for each selected organization is clever. Especially helpful when multiple org levels are involved.
64-76: SynchronizingselectedLevelswith query resultsThis effect ensures the
selectedLevelsaccurately reflects the fetched organization data. Consider how partial failures are handled (e.g., one of multiple queries fails).
78-83:getParentIdlogicNeat approach to mapping child levels’ parent IDs. Check off-by-one mistakes if future changes rearrange level indices.
84-93:getOrganizationOptionshelperGood separation of concerns. This function transforms raw data into relevant options for the
Autocomplete.
94-100:clearSelectionsfunctionResets both facility type and organizations. Perfect for providing a “start fresh” approach.
149-188: Final layoutThe combination of
Selectfor facility types, multiple<Autocomplete>for hierarchical org selection, and aclearSelectionsbutton ensures a comprehensive filtering UI. Looks well-structured.public/locale/en.json (4)
1607-1607: Looks good!
No issues found in the new key-value pair.
1610-1610: Consistent addition!
The new key-value pair follows the existing naming and phrasing conventions.
1617-1617: Key-value pair validated.
The addition aligns well with the rest of the localization file.
1628-1628: Verified correctness.
No grammatical or punctuation issues; consistent with the existing pattern.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Organization/components/OrganizationFilter.tsx (1)
119-141: Consider adding ARIA labels for better accessibility.The facility type selection is well-implemented, but could benefit from additional accessibility attributes.
<Select value={selectedFacilityType?.text || ""} + aria-label={t("select_facility_type")} onValueChange={(value) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/locale/en.json(4 hunks)src/pages/Facility/FacilitiesPage.tsx(7 hunks)src/pages/Organization/components/OrganizationFilter.tsx(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/pages/Organization/components/OrganizationFilter.tsx
[error] 74-75: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
src/pages/Facility/FacilitiesPage.tsx
[error] 75-76: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (9)
src/pages/Facility/FacilitiesPage.tsx (5)
5-5: LGTM! Improved maintainability using centralized constants.The change to use
LocalStorageKeys.patientTokenKeyinstead of a hard-coded key improves maintainability.Also applies to: 17-17, 36-36
40-51: LGTM! Well-implemented organization state management.The state management for selected organizations is well-implemented with proper initialization and query parameter updates.
59-60: LGTM! Improved query parameter handling.The query parameter handling has been improved with:
- Using 'search' instead of 'name' for consistency
- Conditional inclusion of facility_type
87-87: LGTM! Enhanced internationalization support.Button labels now properly use translations instead of hardcoded strings.
Also applies to: 101-101
119-140: LGTM! Well-integrated OrganizationFilter component.The OrganizationFilter integration is well-implemented with:
- Proper state management for selections
- Correct handling of organization levels
- Appropriate facility type updates
src/pages/Organization/components/OrganizationFilter.tsx (3)
24-47: LGTM! Well-structured component with proper TypeScript support.The component is well-designed with:
- Clear prop interface definitions
- Proper state management
- Type safety throughout
49-87: LGTM! Efficient query implementation.The organization queries are well-implemented with:
- Batch querying using useQueries
- Proper loading state handling
- Efficient data processing
🧰 Tools
🪛 Biome (1.9.4)
[error] 74-75: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
184-267: LGTM! Well-implemented organization level handling.The OrganizationLevel component is well-implemented with:
- Efficient debounced search
- Proper handling of organization hierarchy
- Clean state management
public/locale/en.json (1)
1348-1348: LGTM! Added necessary translation keys.The required translation keys have been added to support the facility filters UI:
- patient_dashboard
- select_facility_type
- select_previous
- sign_in
Also applies to: 1610-1610, 1621-1621, 1667-1667
|
the suggested design and current design looks way different , was it intentionally changed |
Yea, it looked too congested with the 3 drop downs. But we should adjust the design somewhat. I'll ping Vinu on Slack. |
|
👋 Hi, @Jacobjeevan, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
Jacobjeevan
added
needs testing
needs review
and removed
Deploy-Failed
|
👋 Hi, @Jacobjeevan, This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
src/hooks/useOrganizationLevel.ts (1)
29-42: Add retry configuration and stale time to the query.The query setup is good, but could benefit from additional configuration to improve user experience and performance.
const { data: availableOrgs } = useQuery<{ results: Organization[] }>({ queryKey: ["organizations-available", getParentId(index), levelSearch], queryFn: query.debounced(organizationApi.getPublicOrganizations, { queryParams: { ...(index > 0 && { parent: getParentId(index) }), ...(index === 0 && { level_cache: 1 }), name: levelSearch || undefined, }, }), enabled: !skip && index <= selectedLevels.length && (index === 0 || selectedLevels[index - 1] !== undefined), + retry: 2, + staleTime: 5 * 60 * 1000, // 5 minutessrc/pages/Facility/FacilitiesPage.tsx (1)
78-94: Simplify the onChange handler logic.The current implementation has nested conditionals that can be simplified for better readability.
- onChange={(filter, level) => { - if ("organization" in filter) { - if (filter.organization) { - setSelectedOrgs((prev) => { - const newOrgId = filter.organization as string; - const newOrgs = prev.slice(0, level); - newOrgs.push(newOrgId); - return newOrgs; - }); - } else { - setSelectedOrgs([]); - } - } - if ("facility_type" in filter) { - updateQuery({ facility_type: filter.facility_type }); - } - }} + onChange={(filter, level) => { + if ("organization" in filter) { + setSelectedOrgs(prev => + filter.organization + ? [...prev.slice(0, level), filter.organization as string] + : [] + ); + } else if ("facility_type" in filter) { + updateQuery({ facility_type: filter.facility_type }); + } + }}src/pages/Organization/components/OrganizationFilter.tsx (2)
76-79: Simplify nested conditions using optional chaining.The code has multiple nested conditions that can be simplified using optional chaining.
- if ( - validOrg && - validOrg.metadata?.govt_org_type && - validOrg.metadata?.govt_org_children_type - ) { + if (validOrg?.metadata?.govt_org_type && validOrg?.metadata?.govt_org_children_type) {Also applies to: 95-98
🧰 Tools
🪛 Biome (1.9.4)
[error] 76-77: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
31-31: Consider making DEFAULT_ORG_LEVELS configurable.The DEFAULT_ORG_LEVELS constant is hardcoded, which might not be flexible enough for different use cases.
Consider making it a prop with a default value:
-const DEFAULT_ORG_LEVELS = 3; interface OrganizationFilterProps { selected: string[]; onChange: (Filter: FilterState, index?: number) => void; skipLevels?: number[]; required?: boolean; className?: string; + maxLevels?: number; } export default function OrganizationFilter(props: OrganizationFilterProps) { - const { onChange, selected, skipLevels } = props; + const { onChange, selected, skipLevels, maxLevels = 3 } = props;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
public/locale/en.json(2 hunks)src/components/ui/autocomplete.tsx(3 hunks)src/hooks/useOrganizationLevel.ts(1 hunks)src/pages/Facility/FacilitiesPage.tsx(5 hunks)src/pages/Facility/FacilityDetailsPage.tsx(4 hunks)src/pages/Facility/components/FacilityCard.tsx(1 hunks)src/pages/Organization/components/OrganizationFilter.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/pages/Facility/components/FacilityCard.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- public/locale/en.json
- src/components/ui/autocomplete.tsx
- src/pages/Facility/FacilityDetailsPage.tsx
🧰 Additional context used
📓 Learnings (1)
src/pages/Organization/components/OrganizationFilter.tsx (1)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9748
File: src/pages/Organization/components/OrganizationFilter.tsx:0-0
Timestamp: 2025-01-08T07:49:59.494Z
Learning: The project implements global error handling for React Query errors, making local error handling in individual query hooks unnecessary.
🪛 Biome (1.9.4)
src/pages/Organization/components/OrganizationFilter.tsx
[error] 76-77: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 95-96: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (1)
src/pages/Facility/FacilitiesPage.tsx (1)
52-53:⚠️ Potential issueInconsistent search parameter naming.
The code uses
namefor the search parameter, but the UI updates it usingsearch. This inconsistency could lead to confusion.queryFn: query.debounced(routes.getAllFacilities, { queryParams: { - name: qParams.name, + search: qParams.search, ...(qParams.facility_type && { facility_type: qParams.facility_type }),Likely invalid or redundant comment.
| const handleChange = (value: string) => { | ||
| const selectedOrg = availableOrgs?.results.find((org) => org.id === value); | ||
| if (selectedOrg) { | ||
| onChange({ organization: selectedOrg.id }, index); | ||
| setLevelSearch(""); | ||
| } | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add type safety to the handleChange function.
The function assumes the selected organization exists but doesn't handle the case where it might not be found.
- const handleChange = (value: string) => {
+ const handleChange = (value: string | undefined) => {
+ if (!value) {
+ onChange({ organization: undefined }, index);
+ setLevelSearch("");
+ return;
+ }
const selectedOrg = availableOrgs?.results.find((org) => org.id === value);
if (selectedOrg) {
onChange({ organization: selectedOrg.id }, index);
setLevelSearch("");
}
};📝 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.
| const handleChange = (value: string) => { | |
| const selectedOrg = availableOrgs?.results.find((org) => org.id === value); | |
| if (selectedOrg) { | |
| onChange({ organization: selectedOrg.id }, index); | |
| setLevelSearch(""); | |
| } | |
| }; | |
| const handleChange = (value: string | undefined) => { | |
| if (!value) { | |
| onChange({ organization: undefined }, index); | |
| setLevelSearch(""); | |
| return; | |
| } | |
| const selectedOrg = availableOrgs?.results.find((org) => org.id === value); | |
| if (selectedOrg) { | |
| onChange({ organization: selectedOrg.id }, index); | |
| setLevelSearch(""); | |
| } | |
| }; |
| <div className="flex flex-col gap-2 lg:gap-0 sm:flex-row lg:rounded-md lg:border lg:border-1 lg:border-secondary-500 overflow-clip sm:w-fit w-[calc(100vw-2rem)]"> | ||
| {[...Array(Math.min(orgTypes.length + 1, DEFAULT_ORG_LEVELS))].map( | ||
| (_, index) => ( | ||
| <OrganizationLevel | ||
| key={`organization-level-${index}`} | ||
| index={index} | ||
| skip={skipLevels?.includes(index) || false} | ||
| selectedLevels={selectedLevels} | ||
| orgTypes={orgTypes} | ||
| setOrgTypes={setOrgTypes} | ||
| onChange={onChange} | ||
| getParentId={getParentId} | ||
| /> | ||
| ), | ||
| )} | ||
| </div> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Improve accessibility of the organization level filters.
The organization level filters lack proper ARIA labels for screen readers.
- <div className="flex flex-col gap-2 lg:gap-0 sm:flex-row lg:rounded-md lg:border lg:border-1 lg:border-secondary-500 overflow-clip sm:w-fit w-[calc(100vw-2rem)]">
+ <div
+ className="flex flex-col gap-2 lg:gap-0 sm:flex-row lg:rounded-md lg:border lg:border-1 lg:border-secondary-500 overflow-clip sm:w-fit w-[calc(100vw-2rem)]"
+ role="group"
+ aria-label={t("organization_levels")}
+ >📝 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.
| <div className="flex flex-col gap-2 lg:gap-0 sm:flex-row lg:rounded-md lg:border lg:border-1 lg:border-secondary-500 overflow-clip sm:w-fit w-[calc(100vw-2rem)]"> | |
| {[...Array(Math.min(orgTypes.length + 1, DEFAULT_ORG_LEVELS))].map( | |
| (_, index) => ( | |
| <OrganizationLevel | |
| key={`organization-level-${index}`} | |
| index={index} | |
| skip={skipLevels?.includes(index) || false} | |
| selectedLevels={selectedLevels} | |
| orgTypes={orgTypes} | |
| setOrgTypes={setOrgTypes} | |
| onChange={onChange} | |
| getParentId={getParentId} | |
| /> | |
| ), | |
| )} | |
| </div> | |
| <div | |
| className="flex flex-col gap-2 lg:gap-0 sm:flex-row lg:rounded-md lg:border lg:border-1 lg:border-secondary-500 overflow-clip sm:w-fit w-[calc(100vw-2rem)]" | |
| role="group" | |
| aria-label={t("organization_levels")} | |
| > | |
| {[...Array(Math.min(orgTypes.length + 1, DEFAULT_ORG_LEVELS))].map( | |
| (_, index) => ( | |
| <OrganizationLevel | |
| key={`organization-level-${index}`} | |
| index={index} | |
| skip={skipLevels?.includes(index) || false} | |
| selectedLevels={selectedLevels} | |
| orgTypes={orgTypes} | |
| setOrgTypes={setOrgTypes} | |
| onChange={onChange} | |
| getParentId={getParentId} | |
| /> | |
| ), | |
| )} | |
| </div> |
|
|
nihal467
added
question
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/pages/Facility/FacilitiesPage.tsx (3)
33-35: Simplify state initialization.The state initialization can be simplified using optional chaining.
-const [selectedOrgs, setSelectedOrgs] = useState<string[]>(() => { - return qParams.organization ? [qParams.organization] : []; -}); +const [selectedOrgs, setSelectedOrgs] = useState<string[]>(() => + [qParams.organization].filter(Boolean) +);
37-44: Consider memoizing the query update callback.The effect updates query params on every
selectedOrgschange. Consider memoizing the callback to prevent unnecessary rerenders.+const updateOrgQuery = useCallback( + (orgs: string[]) => { + if (orgs.length > 0) { + const lastSelected = orgs[orgs.length - 1]; + updateQuery({ organization: lastSelected }); + } else { + updateQuery({ organization: undefined }); + } + }, + [updateQuery] +); useEffect(() => { - if (selectedOrgs.length > 0) { - const lastSelected = selectedOrgs[selectedOrgs.length - 1]; - updateQuery({ organization: lastSelected }); - } else { - updateQuery({ organization: undefined }); - } + updateOrgQuery(selectedOrgs); }, [selectedOrgs]);
119-123: Enhance the empty state message.The current message "select_location_first" could be more informative. Consider adding context about why location selection is required.
- {t("select_location_first")} + {t("select_location_first_message", { + defaultValue: "Please select a location to view available facilities in that area" + })}src/pages/Organization/components/OrganizationFilter.tsx (3)
23-29: Enhance props interface documentation.Add JSDoc comments to describe the purpose and usage of each prop.
+/** + * Props for the OrganizationFilter component + * @property {string[]} selected - Array of selected organization IDs + * @property {(filter: FilterState, index?: number) => void} onChange - Callback when selection changes + * @property {number[]} [skipLevels] - Array of level indices to skip in the hierarchy + * @property {boolean} [required] - Whether organization selection is required + * @property {string} [className] - Additional CSS classes + */ interface OrganizationFilterProps { selected: string[]; onChange: (Filter: FilterState, index?: number) => void; skipLevels?: number[]; required?: boolean; className?: string; }
75-84: Use optional chaining for metadata access.Simplify the nested condition checks using optional chaining.
- if ( - validOrg && - validOrg.metadata?.govt_org_type && - validOrg.metadata?.govt_org_children_type - ) { + if (validOrg?.metadata?.govt_org_type && validOrg?.metadata?.govt_org_children_type) { setOrgTypes([ - validOrg.metadata?.govt_org_type, - validOrg.metadata?.govt_org_children_type, + validOrg.metadata.govt_org_type, + validOrg.metadata.govt_org_children_type, ]); }🧰 Tools
🪛 Biome (1.9.4)
[error] 76-77: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
170-178: Enhance clear button accessibility.Add an aria-label to the clear button to better describe its action.
<Button onClick={clearSelections} variant="ghost" + aria-label={t("clear_filters")} disabled={ selectedLevels.length === 0 && selectedFacilityType === undefined } > {t("clear")} </Button>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
public/locale/en.json(2 hunks)src/pages/Facility/FacilitiesPage.tsx(5 hunks)src/pages/Organization/components/OrganizationFilter.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- public/locale/en.json
🧰 Additional context used
📓 Learnings (1)
src/pages/Organization/components/OrganizationFilter.tsx (1)
Learnt from: Jacobjeevan
PR: ohcnetwork/care_fe#9748
File: src/pages/Organization/components/OrganizationFilter.tsx:0-0
Timestamp: 2025-01-08T07:49:59.494Z
Learning: The project implements global error handling for React Query errors, making local error handling in individual query hooks unnecessary.
🪛 Biome (1.9.4)
src/pages/Organization/components/OrganizationFilter.tsx
[error] 76-77: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 95-96: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: OSSAR-Scan
🔇 Additional comments (2)
src/pages/Facility/FacilitiesPage.tsx (1)
52-53: Inconsistent search parameter naming.The code uses
namefor the search parameter while the UI usessearch. This inconsistency was noted in a previous review.src/pages/Organization/components/OrganizationFilter.tsx (1)
154-169: Improve accessibility of organization filters.The organization level filters lack proper ARIA labels for screen readers.
Jacobjeevan
added
needs testing
needs review
and removed
question
|
(1) Disabled the facility type selector when location isn't selected |
|
LGTM |
|
@Jacobjeevan 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
Summary by CodeRabbit
Release Notes
Localization
UI Improvements
Facility Management
Performance