moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove 'beforeunload' event from UI 

This only works in MS Edge but likely causes re-rendering of the UI on compose events in every browser. There are better ways to prevent data loss, like storing the composer state in localStorage.
This commit is contained in:
Alex Gleason 2021-07-01 13:19:39 -05:00
parent 90a062e9a3
commit e87affbbca
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 1 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/soapbox/features/ui/index.js
View File

@ -157,9 +157,6 @@ const mapStateToProps = state => {
const account = state.getIn(['accounts', me]);
return {
isComposing: state.getIn(['compose', 'is_composing']),
hasComposingText: state.getIn(['compose', 'text']).trim().length !== 0,
hasMediaAttachments: state.getIn(['compose', 'media_attachments']).size > 0,
dropdownMenuIsOpen: state.getIn(['dropdown_menu', 'openId']) !== null,
accessToken: getAccessToken(state),
streamingUrl: state.getIn(['instance', 'urls', 'streaming_api']),
@ -339,9 +336,6 @@ class UI extends React.PureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
children: PropTypes.node,
isComposing: PropTypes.bool,
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
location: PropTypes.object,
intl: PropTypes.object.isRequired,
dropdownMenuIsOpen: PropTypes.bool,
@ -356,17 +350,6 @@ class UI extends React.PureComponent {
mobile: isMobile(window.innerWidth),
};
handleBeforeUnload = (e) => {
const { intl, isComposing, hasComposingText, hasMediaAttachments } = this.props;
if (isComposing && (hasComposingText || hasMediaAttachments)) {
// Setting returnValue to any string causes confirmation dialog.
// Many browsers no longer display this text to users,
// but we set user-friendly message for other browsers, e.g. Edge.
e.returnValue = intl.formatMessage(messages.beforeUnload);
}
}
handleLayoutChange = () => {
// The cached heights are no longer accurate, invalidate
this.props.dispatch(clearHeight());
@ -471,9 +454,8 @@ class UI extends React.PureComponent {
componentDidMount() {
const { account } = this.props;
if (!account) return;
window.addEventListener('beforeunload', this.handleBeforeUnload, false);
window.addEventListener('resize', this.handleResize, { passive: true });
window.addEventListener('resize', this.handleResize, { passive: true });
document.addEventListener('dragenter', this.handleDragEnter, false);
document.addEventListener('dragover', this.handleDragOver, false);
document.addEventListener('drop', this.handleDrop, false);
@ -515,7 +497,6 @@ class UI extends React.PureComponent {
}
componentWillUnmount() {
window.removeEventListener('beforeunload', this.handleBeforeUnload);
window.removeEventListener('resize', this.handleResize);
document.removeEventListener('dragenter', this.handleDragEnter);
document.removeEventListener('dragover', this.handleDragOver);