feat(service-portal): generalize modal #16082
Conversation
WalkthroughThis pull request introduces changes to the modal components within the service portal. A new image style is added in the Changes
Possibly related PRs
Suggested labels
Suggested reviewers
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
Documentation and Community
|
thorkellmani
changed the title
Datadog ReportAll test runs ✅ 2 Total Test Services: 0 Failed, 1 Passed Test Services
|
|
Affected services are: service-portal,system-e2e, Deployed services: service-portal. |
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Outdated
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🧹 Outside diff range and nitpick comments (5)
libs/service-portal/core/src/components/Modal/Modal.css.ts (1)
31-39: LGTM! Consider adding comments for clarity.The new
imagestyle is well-implemented and follows responsive design principles. It adheres to the coding guidelines forlibs/**/*files by being reusable and using TypeScript.Suggestions for improvement:
- Add a comment explaining the purpose of the image and why it's only shown on larger screens.
- Consider using a theme variable for the negative margin to ensure consistency with other components.
You could add a comment like this:
export const image = style({ // Hide image on small screens and show it on large screens (lg) // for improved visual layout in the modal display: 'none', ...themeUtils.responsiveStyle({ lg: { marginRight: `-${theme.spacing['2']}px`, display: 'initial', }, }), })libs/service-portal/core/src/components/Modal/Modal.tsx (1)
59-59: Simplify function call using optional chainingThe function call
onCloseModal && onCloseModal()can be simplified using optional chainingonCloseModal?.(), which is more concise and idiomatic in TypeScript.Apply this diff to simplify the function call:
- onCloseModal && onCloseModal() + onCloseModal?.()🧰 Tools
🪛 Biome
[error] 59-59: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (2)
42-42: Nitpick: Remove unnecessary type annotationThe type of
modalVisiblecan be inferred from the initial valuefalse, so the explicit<boolean>type is not needed.Apply this diff to simplify the code:
- const [modalVisible, setModalVisible] = useState<boolean>(false) + const [modalVisible, setModalVisible] = useState(false)
205-207: Improve localization by passing variables toformatMessageFor better localization support, pass the dentist's name as a variable within
formatMessageinstead of concatenating strings. This ensures correct translations in languages with different grammatical structures.Apply this change:
- title={`${formatMessage( - messages.dentistModalTitle, - )} ${selectedDentist?.name}`} + title={formatMessage(messages.dentistModalTitle, { + name: selectedDentist?.name, + })}Update the
messages.dentistModalTitlelocalization string to include a placeholder for the dentist's name, like{name}.libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (1)
305-306: Update placeholder icon to a representative imageThe
iconSrcis set to'./assets/images/coffee.svg', which may be a placeholder. Consider replacing it with an icon that accurately represents the health center registration process to enhance user experience.If an appropriate icon is not available, you might consider using a relevant icon from the existing asset library or designing a new one.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (9)
- libs/service-portal/core/src/components/Modal/Modal.css.ts (1 hunks)
- libs/service-portal/core/src/components/Modal/Modal.tsx (5 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (0 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx (0 hunks)
- libs/service-portal/health/src/components/RegisterModal/index.ts (0 hunks)
- libs/service-portal/health/src/lib/messages.ts (2 hunks)
- libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (5 hunks)
- libs/service-portal/health/src/screens/Dentists/Dentists.tsx (1 hunks)
- libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (4 hunks)
💤 Files with no reviewable changes (3)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx
- libs/service-portal/health/src/components/RegisterModal/index.ts
🧰 Additional context used
📓 Path-based instructions (6)
libs/service-portal/core/src/components/Modal/Modal.css.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/core/src/components/Modal/Modal.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/lib/messages.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/Dentists/Dentists.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
🪛 Biome
libs/service-portal/core/src/components/Modal/Modal.tsx
[error] 59-59: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
[error] 218-218: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
[error] 138-138: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (5)
libs/service-portal/core/src/components/Modal/Modal.css.ts (1)
Line range hint
1-39: Changes align well with PR objectivesThe addition of the
imagestyle to the Modal component aligns well with the PR objective of generalizing the modal and providing more customization options. This change contributes to standardizing the appearance of modals across the service portal, potentially improving the consistency of the user experience.The implementation adheres to the coding guidelines for
libs/**/*files:
- It enhances the reusability of the Modal component across different NextJS apps.
- It uses TypeScript for defining styles.
- The responsive design approach supports effective tree-shaking and bundling practices.
libs/service-portal/health/src/lib/messages.ts (1)
Line range hint
1-699: LGTM! File structure adheres to coding guidelines.The file structure and implementation adhere to the coding guidelines for
libs/**/*files:
- Uses TypeScript for defining the
messagesobject.- Messages are reusable across different NextJS apps.
- The file structure supports effective tree-shaking and bundling.
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
79-79: Verify the hardcodedcanRegistervalueSetting
canRegistertotrueremoves any conditional logic that may have existed previously. Please verify if this change is intentional and that it doesn't bypass any necessary checks for dentist registration eligibility.libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (2)
358-376: Ensure the Select component handles empty doctor list gracefullyWhen
healthCenterDoctorsis empty or undefined, the Select component will not render. Confirm that this behavior is intended and consider providing user feedback if no doctors are available for the selected health center.If needed, you can display a message indicating that no doctors are available:
{healthCenterDoctors?.length ? ( <Box marginBottom={4}> <Select // existing props /> </Box> + ) : ( + <Text variant="small"> + {formatMessage(messages.noDoctorsAvailable)} + </Text> ) : null}
134-146:⚠️ Potential issueValidate selection of a doctor before transferring health center
In the
handleHealthCenterTransferfunction,selectedHealthCenterDoctormay beundefinedif the user hasn't selected a doctor. Ensure that a doctor is selected before proceeding with the transfer to prevent potential errors.Consider adding validation to check if
selectedHealthCenterDoctoris defined:const handleHealthCenterTransfer = async () => { setLoadingTransfer(true) - if (selectedHealthCenter?.id) { + if (selectedHealthCenter?.id && selectedHealthCenterDoctor) {Or provide a default value or prompt the user if no doctor is selected.
🧰 Tools
🪛 Biome
[error] 138-138: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 8
🧹 Outside diff range and nitpick comments (4)
libs/service-portal/core/src/components/Modal/Modal.css.ts (1)
31-39: LGTM! Consider adding a comment for clarity.The new
imagestyle is well-implemented, utilizing responsive styling and theme values for consistency. It adheres to the coding guidelines by being reusable, implicitly using TypeScript through vanilla-extract, and supporting effective tree-shaking.Consider adding a brief comment explaining the purpose of this style, e.g.:
// Style for optional image in modal, visible only on large screens export const image = style({ // ... (existing code) })This would enhance code readability and maintainability.
libs/service-portal/health/src/lib/messages.ts (2)
699-700: LGTM: New success messages for health center registration transfer.The added messages
healthCenterRegistrationTransferSuccessTitleandhealthCenterRegistrationTransferSuccessInfoare well-structured and provide clear information about the successful registration transfer. This addition aligns with the PR objective of enhancing the modal component for health center registration.Consider adjusting the naming convention to be consistent with the dentist registration messages:
- healthCenterRegistrationTransferSuccessTitle: { + healthCenterRegistrationTransferSuccessTitle: { id: 'sp.health:health-center-registration-transfer-success-title', defaultMessage: 'Ný heilsugæsla skráð', }, - healthCenterRegistrationTransferSuccessInfo: { + healthCenterRegistrationTransferSuccessInfo: { id: 'sp.health:health-center-registration-transfer-success-info', defaultMessage: 'Þú hefur verið skráður á', },This change would make the naming more consistent throughout the file.
699-699: Consider removing the unnecessary empty line.The added empty line at 699 doesn't seem to separate any logical sections of the code. To maintain consistency with the rest of the file, consider removing this line.
- healthCenterRegistrationTransferSuccessTitle: { id: 'sp.health:health-center-registration-transfer-success-title', defaultMessage: 'Ný heilsugæsla skráð', },libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
199-199: Update modal icon to match contextThe
iconSrcis set to"./assets/images/coffee.svg", which may not be relevant to dentist registration. Consider using an icon that reflects dental services for better user experience.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (9)
- libs/service-portal/core/src/components/Modal/Modal.css.ts (1 hunks)
- libs/service-portal/core/src/components/Modal/Modal.tsx (5 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts (0 hunks)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx (0 hunks)
- libs/service-portal/health/src/components/RegisterModal/index.ts (0 hunks)
- libs/service-portal/health/src/lib/messages.ts (2 hunks)
- libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (5 hunks)
- libs/service-portal/health/src/screens/Dentists/Dentists.tsx (1 hunks)
- libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (4 hunks)
💤 Files with no reviewable changes (3)
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.css.ts
- libs/service-portal/health/src/components/RegisterModal/RegisterModal.tsx
- libs/service-portal/health/src/components/RegisterModal/index.ts
🧰 Additional context used
📓 Path-based instructions (6)
libs/service-portal/core/src/components/Modal/Modal.css.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/core/src/components/Modal/Modal.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/lib/messages.ts (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/Dentists/Dentists.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
🪛 Biome
libs/service-portal/core/src/components/Modal/Modal.tsx
[error] 59-59: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
[error] 218-218: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
[error] 138-138: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (8)
libs/service-portal/health/src/screens/Dentists/Dentists.tsx (1)
53-53:⚠️ Potential issueReconsider the change to
canRegisterThe modification of
canRegisterto a constanttruevalue raises some concerns:
- It removes the ability to disable registration based on the dentist's status, which may not align with the intended business logic.
- This change seems to contradict the PR objective of "providing more customization options" as it removes a dynamic behavior.
- A previous review comment suggested reverting this change, indicating potential issues.
Could you please clarify the reasoning behind this change? If there are specific use cases or requirements that necessitate this modification, it would be helpful to document them in the code or PR description.
To verify the impact of this change, we can run the following script:
This will help us understand if this change affects other parts of the codebase and if there are any conditional renderings that depend on
canRegister.✅ Verification successful
canRegisterChange Verified SuccessfullyThe modification of
canRegisterto a constanttrueinDentists.tsxhas been reviewed thoroughly. No conditional renderings or dependencies oncanRegisterwere found that would be affected by this change outside of the targeted file.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for other occurrences of canRegister in the codebase # Search for other usages of canRegister echo "Searching for other usages of canRegister:" rg --type typescript "canRegister" -g '!**/Dentists.tsx' # Search for potential conditional rendering based on canRegister echo "Searching for conditional rendering based on canRegister:" ast-grep --lang typescript --pattern 'if ($canRegister) { $$$ }'Length of output: 378
Script:
#!/bin/bash # Description: Check for other occurrences of canRegister in the codebase # Search for other usages of canRegister echo "Searching for other usages of canRegister:" rg --type ts "canRegister" -g '!**/Dentists.tsx' echo "Searching for other usages of canRegister in .tsx files:" rg --type tsx "canRegister" -g '!**/Dentists.tsx' # Search for potential conditional rendering based on canRegister echo "Searching for conditional rendering based on canRegister:" ast-grep --lang typescript --pattern 'if ($canRegister) { $$$ }'Length of output: 5387
Script:
#!/bin/bash # Description: Check for other occurrences of canRegister in the codebase # Search for other usages of canRegister in .ts files echo "Searching for other usages of canRegister in .ts files:" rg "canRegister" --glob "*.ts" -g '!**/Dentists.tsx' # Search for other usages of canRegister in .tsx files echo "Searching for other usages of canRegister in .tsx files:" rg "canRegister" --glob "*.tsx" -g '!**/Dentists.tsx' # Search for potential conditional rendering based on canRegister echo "Searching for conditional rendering based on canRegister:" ast-grep --lang typescript --pattern 'if ($canRegister) { $$$ }'Length of output: 5393
libs/service-portal/health/src/lib/messages.ts (2)
284-288: LGTM: New error message for dentist registration transfer.The added message
dentistRegistrationTransferErrorInfois well-structured and provides clear information about the error scenario. This addition aligns with the PR objective of enhancing the modal component for dentist registration.
Line range hint
1-1068: Summary: Changes align well with PR objectives.The additions to this file, including new messages for dentist and health center registration transfers, align well with the PR objective of enhancing the modal component for these use cases. The new messages provide clear and informative content for both success and error scenarios.
A few minor suggestions were made to improve consistency in naming conventions and formatting. Overall, these changes contribute positively to the standardization of modals across the service portal.
libs/service-portal/core/src/components/Modal/Modal.tsx (1)
21-31: Props are well-defined and enhance component flexibilityThe added props in lines 21-31 are correctly typed and will enhance the reusability and customization of the
Modalcomponent across different NextJS apps.libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (3)
16-16: Import statements are appropriateThe imports of
Modalandmfrom@island.is/service-portal/coreare correct and align with their usage within the component.
42-42: State initialization for 'modalVisible' is correctThe addition of
modalVisiblestate usinguseState<boolean>(false)effectively manages the visibility of the modal.
145-145: Error message reference updated correctlyUsing
messages.dentistRegistrationTransferErrorInfoensures the error message is accurate and consistent with other localized messages.libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx (1)
307-310: Review the logic of thetoggleClosepropThe
toggleCloseprop is set to!selectedHealthCenter, which may not match the intended behavior. Verify whethertoggleCloseshould depend onselectedHealthCenter. This prop typically controls whether the modal can be closed by user actions like clicking outside or pressing 'Esc'. Ensure the modal's close behavior aligns with user expectations.To confirm the behavior, please check the documentation of the
Modalcomponent and adjust the logic accordingly.
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
Show resolved
Hide resolved
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
Outdated
Show resolved
Hide resolved
libs/service-portal/health/src/screens/HealthCenterRegistration/HealthCenterRegistration.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (2)
198-260: Modal implementation looks good, with minor suggestionsThe Modal component implementation aligns well with the PR objectives of generalizing and standardizing modals across the service portal. It's great to see the use of TypeScript for prop definitions, enhancing type safety. The component is reusable and highly configurable, which is excellent.
However, there are a couple of points to consider:
The
toggleCloseprop is set to!modalVisible. This might not work as expected since it's not clear how the Modal component handles this prop internally. Consider using anisVisibleprop instead if available, or clarify the usage oftoggleClose.The condition for registering a dentist can be simplified using optional chaining.
Consider the following improvements:
- If the Modal component supports an
isVisibleprop:<Modal id={'dentistRegisterModal'} initialVisibility={false} - toggleClose={!modalVisible} + isVisible={modalVisible} // ... other props >
- Simplify the dentist registration condition:
- if (selectedDentist && selectedDentist.id) { + if (selectedDentist?.id) { registerDentist({ variables: { input: { id: `${selectedDentist.id}`, }, }, }) }These changes will improve code clarity and follow modern TypeScript practices.
🧰 Tools
🪛 Biome
[error] 220-220: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Line range hint
1-300: Overall implementation looks great, with a suggestion for enhancementThe changes to the DentistRegistration component successfully implement the PR objectives of generalizing the modal and standardizing its appearance across the service portal. The replacement of RegisterModal with the more generic Modal component enhances reusability and consistency.
Key improvements:
- Standardized modal implementation
- Enhanced state management for modal visibility
- Improved TypeScript usage and React best practices
To further enhance the component, consider the following:
- Error Handling: Implement specific error handling for modal operations, especially for the dentist registration process.
- Loading States: Add loading indicators within the modal during the registration process to improve user experience.
- Accessibility: Ensure the modal implementation follows accessibility best practices, such as proper focus management and keyboard navigation.
Example for adding a loading state:
const [isRegistering, setIsRegistering] = useState(false); // In the registration function const handleRegister = async () => { setIsRegistering(true); try { await registerDentist({ variables: { input: { id: `${selectedDentist.id}`, }, }, }); } catch (error) { // Handle error } finally { setIsRegistering(false); } }; // In the Modal component <Button // ... other props disabled={isRegistering} > {isRegistering ? 'Registering...' : formatMessage(messages.healthRegisterModalAccept)} </Button>These enhancements will further improve the robustness and user experience of the component.
🧰 Tools
🪛 Biome
[error] 220-220: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
📒 Files selected for processing (1)
- libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (1)
Pattern
libs/**/*: "Confirm that the code adheres to the following:
- Reusability of components and hooks across different NextJS apps.
- TypeScript usage for defining props and exporting types.
- Effective tree-shaking and bundling practices."
🪛 Biome
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx
[error] 220-220: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
🔇 Additional comments (3)
libs/service-portal/health/src/screens/DentistRegistration/DentistRegistration.tsx (3)
16-16: LGTM: Modal import added correctlyThe import of the Modal component from '@island.is/service-portal/core' is correctly placed and aligns with the coding guidelines for reusability across NextJS apps.
42-42: LGTM: Modal visibility state addedThe addition of the
modalVisiblestate using useState is well-implemented. It's correctly typed as a boolean and follows TypeScript usage guidelines. The naming is clear and descriptive, enhancing code readability.
147-147: LGTM: Error message updated for dentist contextThe error message has been appropriately updated from 'healthCenterRegistrationTransferErrorInfo' to 'dentistRegistrationTransferErrorInfo'. This change correctly aligns the error message with the dentist registration context, improving user experience.
What
<Modal/>component for more customization optionsWhy
Checklist:
Summary by CodeRabbit
Summary by CodeRabbit
New Features
Bug Fixes
Refactor