Fixes AppRoutes type
#9890
Fixes AppRoutes type
#9890
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
WalkthroughThis pull request introduces significant changes to the routing system and type definitions across multiple files. The primary modifications include moving Changes
Suggested labels
Suggested reviewers
Possibly related PRs
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 (
|
CARE
|
||||||||||||||||||||||||||||||||||
| Project |
CARE
|
| Branch Review |
rithviknishad/fix/app-route-type
|
| Run status |
|
| Run duration | 02m 19s |
| Commit |
|
| Committer | Rithvik Nishad |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
5
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/e2e/facility_spec/facility_creation.cy.ts • 1 failed test
| Test | Artifacts | |
|---|---|---|
| Facility Management > Create a new facility using the admin role |
Test Replay
Screenshots
|
|
![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 (5)
src/components/Resource/ResourceCreate.tsx (2)
Line range hint
108-108: Remove redundant string conversion.Since
facilityIdis now typed as string, theString()conversion is unnecessary.- pathParams: { id: String(facilityId) }, + pathParams: { id: facilityId },
Line range hint
170-170: Remove redundant string conversion.Similar to above, the
String()conversion is unnecessary asfacilityIdis already a string.- origin_facility: String(props.facilityId), + origin_facility: props.facilityId,src/Routers/types.ts (1)
10-17: Well-structured route function and app routes types.The
RouteFunctiontype correctly leverages theExtractRouteParamshelper to ensure type safety between route patterns and their handler parameters. TheAppRoutestype provides a flexible yet type-safe mapping of routes to their handlers.Consider adding JSDoc comments to document:
- Examples of valid route patterns
- The relationship between route patterns and extracted parameters
- Usage examples for the
AppRoutestypesrc/Routers/routes/FacilityRoutes.tsx (1)
Line range hint
13-35: Consider organizing routes by feature.The routes are functionally correct but could benefit from better organization.
Consider grouping related routes using objects:
const FacilityRoutes: AppRoutes = { + // Core facility routes "/facility": () => <Redirect to="/" />, "/facility/create": () => <FacilityCreate />, "/facility/:facilityId/update": ({ facilityId }) => ( <FacilityCreate facilityId={facilityId} /> ), "/facility/:facilityId": ({ facilityId }) => ( <FacilityHome facilityId={facilityId} /> ), "/facility/:facilityId/users": ({ facilityId }) => ( <FacilityUsers facilityId={facilityId} /> ), + // Resource management "/facility/:facilityId/resource/new": ({ facilityId }) => ( <ResourceCreate facilityId={facilityId} /> ), + // Organization management "/facility/:facilityId/organization": ({ facilityId }) => ( <FacilityOrganizationIndex facilityId={facilityId} /> ), "/facility/:facilityId/organization/:id": ({ facilityId, id }) => ( <FacilityOrganizationView facilityId={facilityId} id={id} /> ), "/facility/:facilityId/organization/:id/users": ({ facilityId, id }) => ( <FacilityOrganizationUsers facilityId={facilityId} id={id} /> ), };src/Routers/routes/PatientRoutes.tsx (1)
Line range hint
24-29: Consider improving readability of dynamic route generation.While the dynamic route generation using reduce is clever, it could be more readable.
Consider using a more explicit approach:
- ...patientTabs.reduce((acc: AppRoutes, tab) => { - acc["/facility/:facilityId/patient/:id/" + tab.route] = ({ - facilityId, - id, - }) => <PatientHome facilityId={facilityId} id={id} page={tab.route} />; - return acc; - }, {}), + // Generate routes for each patient tab + ...Object.fromEntries( + patientTabs.map((tab) => [ + `/facility/:facilityId/patient/:id/${tab.route}`, + ({ facilityId, id }: { facilityId: string; id: string }) => ( + <PatientHome facilityId={facilityId} id={id} page={tab.route} /> + ), + ]) + ),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
src/Routers/AppRouter.tsx(1 hunks)src/Routers/routes/ConsultationRoutes.tsx(1 hunks)src/Routers/routes/FacilityRoutes.tsx(1 hunks)src/Routers/routes/OrganizationRoutes.tsx(1 hunks)src/Routers/routes/PatientRoutes.tsx(1 hunks)src/Routers/routes/ResourceRoutes.tsx(1 hunks)src/Routers/routes/ScheduleRoutes.tsx(1 hunks)src/Routers/routes/UserRoutes.tsx(1 hunks)src/Routers/routes/questionnaireRoutes.tsx(1 hunks)src/Routers/types.ts(1 hunks)src/components/Facility/FacilityUsers.tsx(1 hunks)src/components/Resource/ResourceCreate.tsx(1 hunks)src/pluginTypes.ts(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/Routers/routes/UserRoutes.tsx
- src/Routers/routes/ResourceRoutes.tsx
- src/Routers/routes/questionnaireRoutes.tsx
- src/Routers/routes/OrganizationRoutes.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages: care-fe
🔇 Additional comments (9)
src/components/Facility/FacilityUsers.tsx (1)
18-18: LGTM! Type change aligns with REST API best practices.The change from
numbertostringforfacilityIdis appropriate as REST API resource identifiers are typically strings.Let's verify the API endpoint's expected type:
✅ Verification successful
Type change verified - API expects string parameters
The API route
/api/v1/facility/{facility_id}/get_users/uses string-based path parameters, confirming that the type change from number to string is correct and matches the API's expectations.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for facility API route definitions and their parameter types rg -g '*.ts' -g '*.tsx' 'facility_id.*:.*string|facility_id.*:.*number' --no-headingLength of output: 86
Script:
#!/bin/bash # Search for API routes and type definitions related to facilities rg -g '*.ts' -g '*.tsx' -A 2 'getFacility|facility.*api|facilities.*api' --no-heading # Search for actual API calls with facilityId ast-grep --pattern 'facilityId: $_'Length of output: 1197
src/components/Resource/ResourceCreate.tsx (1)
36-36: LGTM! Type change is consistent.The change from
numbertostringforfacilityIdmaintains consistency with other components.src/Routers/types.ts (1)
1-8: Excellent implementation of type-safe route parameter extraction!The
ExtractRouteParamstype elegantly handles route parameter extraction using conditional types. The implementation correctly handles both middle parameters (:param/) and end parameters (:param), providing precise typing for route parameters.src/Routers/routes/ScheduleRoutes.tsx (1)
1-1: Routes are properly typed and well-structured.The schedule routes correctly implement the new
AppRoutestype. Each route handler properly uses the extracted parameters with correct typing.Let's verify that all components accept the correct prop types:
Also applies to: 6-24
✅ Verification successful
Routes are properly typed and implemented correctly
The verification confirms that:
- AppRoutes type is correctly imported and used
- Route parameters are properly typed and passed to components
- Component prop types match the route parameters exactly
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify component prop types match route parameters ast-grep --pattern 'interface $Props { facilityId: string; $$$ } export default function $Component({ facilityId, $$$ }: $Props)' src/pages/Appointments/*.tsxLength of output: 268
Script:
#!/bin/bash # First find relevant component files fd -e tsx -e ts "Appointment" src/ # Then check imports and route usage rg -l "AppRoutes" src/ # Finally check component props structure ast-grep --pattern 'function $Component($props) { $$$ }'Length of output: 857
Script:
#!/bin/bash # Check component props with various syntax patterns ast-grep --pattern 'type $Props = { $$$ }' src/pages/Appointments/*.tsx # Also check interface syntax ast-grep --pattern 'interface $Props { $$$ }' src/pages/Appointments/*.tsx # Check route definitions rg -A 5 "path:" src/Routers/routes/ScheduleRoutes.tsxLength of output: 414
Script:
#!/bin/bash # Check actual component implementation cat src/pages/Appointments/AppointmentsPage.tsx # Look for route patterns rg "AppRoutes\." src/Routers/routes/ScheduleRoutes.tsxLength of output: 35768
Script:
#!/bin/bash # Check actual routes implementation cat src/Routers/routes/ScheduleRoutes.tsxLength of output: 867
src/Routers/routes/FacilityRoutes.tsx (1)
8-8: Import updated correctly to use new types module.The AppRoutes import has been properly updated to use the new types file.
src/Routers/routes/PatientRoutes.tsx (1)
7-7: Import updated correctly to use new types module.The AppRoutes import has been properly updated to use the new types file.
src/pluginTypes.ts (1)
4-6: LGTM! Import paths standardization.The changes standardize import paths using absolute imports and align with the centralization of type definitions.
Also applies to: 9-9, 11-12
src/Routers/routes/ConsultationRoutes.tsx (1)
6-6: LGTM! Updated import path for centralized type definition.The change aligns with moving
AppRoutestype to a dedicated types file.src/Routers/AppRouter.tsx (1)
22-22: LGTM! Centralized routing types.The change improves code organization by moving type definitions to a dedicated types file.
Let's verify that all files importing the routing types have been updated:
✅ Verification successful
All routing type imports have been successfully updated
All files previously importing
AppRoutesnow consistently use the new path@/Routers/types. No remaining references to the old import location were found.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining imports of AppRoutes from the old location rg "import.*AppRoutes.*from.*['\"]@/Routers/AppRouter['\"]" --type ts --type tsx # Search for files using the new import path to ensure consistent adoption rg "import.*AppRoutes.*from.*['\"]@/Routers/types['\"]" --type ts --type tsxLength of output: 225
Script:
#!/bin/bash # Find TypeScript/React files first echo "TypeScript/React files in the project:" fd "\.(ts|tsx)$" # Search for old and new import patterns echo -e "\nSearching for old import pattern:" rg "import.*AppRoutes.*from.*['\"]@/Routers/AppRouter['\"]" echo -e "\nSearching for new import pattern:" rg "import.*AppRoutes.*from.*['\"]@/Routers/types['\"]" -A 2Length of output: 20899
Proposed Changes
AppRoutestypebefore:
after:
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit
Routing Improvements
AppRoutestype to a centralized locationType Changes
facilityIdtype fromnumbertostringin multiple componentsCode Organization
Routing Updates