Adding confirmation dialog provider #373
Merged
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
ArendPeter
approved these changes
Oct 16, 2023
| export function ConfirmDialogProvider({ children }) { | ||
|
|
||
|
|
||
| const [state, setState] = useState({ isOpen: false, title: '', message: '' }); |
There was a problem hiding this comment.
nit
One thing we need to be careful of with this pattern is, manipulating state (like state.isOpen = true), won't trigger a refresh. Only reinstantiating the object with trigger a refresh
Looks like that's what's happening here, and I see that it makes the code cleaner, but I wanted to mention it anyway so that we're careful with it in the future
There was a problem hiding this comment.
Using the setState function in the callback should reinstate the object though right?
There was a problem hiding this comment.
Yep, it's being reinstantiated in the callback, so it's fine
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.
Description
Made this as part of a larger task. Creates a context provider and hook for accessing confirmation dialog. The current dialog is just the MUI dialog, we can update the styling using #344. Basically, it adds a single dialog component at the top level of the app and uses a context provider to allow other components to open it, update the title and message, and get the response.
Built based on this tutorial https://akashhamirwasia.com/blog/building-expressive-confirm-dialog-api-in-react/
Uses some useRef and useCallback optimizations that are explained in there.
Screenshots / Videos (frontend only)
Related Issues