This repository has been archived by the owner on Sep 11, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 833
Patch: "Reloading the registration page should warn about data loss" #8377
Merged
Merged
Changes from 11 commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
ac39d61
warn of data loss on reloading registration page
yaya-usman 3c47141
update: warn on loss of data on refresh
yaya-usman e37af06
Merge branch 'develop' of https://github.com/yaya-usman/matrix-react-…
yaya-usman 2c9712b
update: unloadCallback made private
yaya-usman b29c417
proper event annotation
yaya-usman 872d0e0
resolve conflict
yaya-usman 9fe77a8
update: popup the dialog warning at a later stage of registration
yaya-usman 8b0dca2
updated branch
yaya-usman 9b92c90
show warn dialog only at a later stage of registration
yaya-usman 48636c6
Merge branch 'develop' of https://github.com/yaya-usman/matrix-react-…
yaya-usman 584d54e
updated fix
yaya-usman 8ed065f
resolve conflict
yaya-usman 75c3627
updated warn dialog logic
yaya-usman 71e9932
Merge branch 'develop' of https://github.com/yaya-usman/matrix-react-…
yaya-usman 736eae1
updated fix
yaya-usman File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -141,6 +141,22 @@ export default class Registration extends React.Component<IProps, IState> { | |
this.replaceClient(this.props.serverConfig); | ||
} | ||
|
||
componentDidUpdate(_, prevState: IState) { | ||
if (prevState.doingUIAuth !== this.state.doingUIAuth) { | ||
//triggers a confirmation dialog for data loss before page unloads/refreshes | ||
window.addEventListener("beforeunload", this.unloadCallback); | ||
} | ||
} | ||
|
||
componentWillUnmount() { | ||
window.removeEventListener("beforeunload", this.unloadCallback); | ||
} | ||
|
||
private unloadCallback = (event: BeforeUnloadEvent) => { | ||
event.preventDefault(); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This will always show the confirmation dialog
(Empirically only in Firefox & Safari) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. it's now working as it should. I have tested it in the three browsers. |
||
event.returnValue = ""; | ||
return ""; | ||
}; | ||
// TODO: [REACT-WARNING] Replace with appropriate lifecycle event | ||
// eslint-disable-next-line | ||
UNSAFE_componentWillReceiveProps(newProps) { | ||
|
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this could still register twice, once on doingUIAuth false->true and once back (and if it keeps toggling then it would keep going
One thing to note (which I think is stupid) about addEventListener, is it does not check if the listener is already bound & removeEventListener only removes one instance, not all instances. So this code really needs to be solid because otherwise you'll leave stray listeners hanging around which will keep the warning even much later into the app lifecycle
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am not sure, i really understand your first statement clearly, but as for removeEventListener, when the component unmounts doesn't it remove all instances? since the listeners is only tied to one component, i guess it should be scoped within that component, this is the first time i am knowing about the one instance thing of listeners based on your text. So what do you suggest i do?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If you call
addEventListener
5 times, 5 handlers will be registered (even if the same method is passed) -removeEventListener
only removes one of them, causing a memory leak by keeping a pointer to this component instance around.Maybe easier would be to register the handler always in componentDidMount, but do the if doingUIAuth check inside the handler
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sorry to ask again, i am finding it rather confusing that
addEventListener
will be registered as many times the method runs so that means theif
statement is not doing anything then cause it was supposed to only register the listener if there is a disparity between the prevState and the current State. Also if i placed the listener in componentDidMount, then that means , i 'll just putthis.state.doingUIAuth
as the if condition since there is no prevStateThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i realized
this.state.doingUIAuth
will always be false, so the listener will never be registered. if i placed it in thecomponentDidMount
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Right but that disparity could happen multiple times within a single mounting of this component, e.g if you start registration, do captcha, then finish captcha doingUIAuth would go false->true->false then unmount
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Precisely
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
componentDidMount
only mounts once anddoingUIAuth
will be false, so there is no way it'll register the listener.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, always register the handler, then inside
unloadCallback
you can checkdoingUIAuth
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done