adds the PromoBar component and a new custom hook useNotificationMessage to the PatronPage
#606
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kasperbirch1
force-pushed
the
DDFLSBP-84-brugerprofil-systemfeedback-mangler-pa-gem
branch
from
6932a07 to
d8b0ba8
Compare
spaceo
requested changes
Oct 19, 2023
spaceo
requested changes
Oct 19, 2023
kasperbirch1
force-pushed
the
DDFLSBP-84-brugerprofil-systemfeedback-mangler-pa-gem
branch
from
7392329 to
cfd0330
Compare
The `useNotificationMessage` hook manages to handle auto-scrolling to the top and setting a removal timeout for notifications. It integrates seamlessly with `promobar` and offers utility for additional use-cases.
Modified the hook to return either the `Promobar` component or 'null' as the initial item in the array. Also provided default settings for `timeout` and `scrollToTop` which can be overridden during usage.
In this commit, `NotificationComponent` has been extracted from the `useNotificationMessage` hook. By wrapping the retrun of `NotificationComponent` in a function, we enhance the reactivity of the component, ensuring that its body (the JSX) is re-evaluated with each render. This method is beneficial as it provides a mechanism to always capture the most recent state or props, eliminating concerns about stale closures.
Centralize all `useNotificationMessage` related logic.
When the handler has been called the user should be sent to the top of the page
kasperbirch1
force-pushed
the
DDFLSBP-84-brugerprofil-systemfeedback-mangler-pa-gem
branch
from
0df507e to
c69fb9d
Compare
- Replaced custom prop-based component identification with data-testid attributes for better test clarity and maintainability. - Introduced afterEach cleanup in tests to ensure isolated test environments. - Updated test descriptions for consistency and better readability. - Simplified ComponentWithNotificationMessage by removing unnecessary props.
Changes: 1. Import 'screen' from '@testing-library/react' for improved element querying. 2. Update the expectation for the non-existence of the message before the button click to use 'screen.queryByText' instead of asserting on the wrapper's content. 3. Modify the expectation after the button is clicked to check the existence of the message using 'screen.queryByText', ensuring a more robust and readable test.
- Updated `ComponentWithNotificationMessage` to accept `timeout` and `scrollToTop` options. - Added two new test cases: 1. To verify message display indefinitely when timeout is removed. 2. To ensure there's no scroll to top action when `scrollToTop` is set to false.
spaceo
requested changes
Oct 30, 2023
| @@ -240,11 +240,20 @@ export default { | |||
| defaultValue: "You used @this ebooks out of you quota of @that ebooks", | |||
| control: { type: "text" } | |||
| }, | |||
| phoneInputMessageText: { | |||
| patronPagePhoneInputMessageText: { | |||
There was a problem hiding this comment.
If you have refactored this data prop, what about dpl-cms then?
There was a problem hiding this comment.
it is fixed here: https://github.com/danskernesdigitalebibliotek/dpl-cms/pull/427/files
kasperbirch1
merged commit 7f8c3fd
into
danskernesdigitalebibliotek:develop
9 of 10 checks passed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Link to issue
https://reload.atlassian.net/browse/DDFLSBP-84
Description
This Pull Request adds the
PromoBarcomponent and a new custom hookuseNotificationMessageto thePatronPage.The
PromoBarprovides visual notifications to users, while theuseNotificationMessagehook is designed to manage these notifications by handling auto-scrolling and setting removal timeouts.Screenshot of the result
Skaermoptagelse.2023-10-13.kl.14.54.27.mov