Fix and simplify browser history handling in relation to modals

This simplifies the logic to:
- when the last modal gets closed and we're in our history buffer state, go back
- whenever a modal is open, ensure we're in a history buffer state by
  potentially pushing one
signup-info-prompt
Claire 2021-07-12 17:55:40 +02:00
parent c5b4e6b708
commit 6e3d5cbca2
2 changed files with 24 additions and 18 deletions

View File

@ -76,10 +76,13 @@ export default class ModalRoot extends React.PureComponent {
this.activeElement = null;
}).catch(console.error);
this.handleModalClose();
this._handleModalClose();
}
if (this.props.children && !prevProps.children) {
this.handleModalOpen();
this._handleModalOpen();
}
if (this.props.children) {
this._ensureHistoryBuffer();
}
}
@ -88,22 +91,29 @@ export default class ModalRoot extends React.PureComponent {
window.removeEventListener('keydown', this.handleKeyDown);
}
handleModalClose () {
_handleModalOpen () {
this._modalHistoryKey = Date.now();
this.unlistenHistory = this.history.listen((_, action) => {
if (action === 'POP') {
this.props.onClose();
}
});
}
_handleModalClose () {
this.unlistenHistory();
const state = this.history.location.state;
if (state && state.mastodonModalOpen) {
const { state } = this.history.location;
if (state && state.mastodonModalKey === this._modalHistoryKey) {
this.history.goBack();
}
}
handleModalOpen () {
const history = this.history;
const state = {...history.location.state, mastodonModalOpen: true};
history.push(history.location.pathname, state);
this.unlistenHistory = history.listen(() => {
this.props.onClose();
});
_ensureHistoryBuffer () {
const { pathname, state } = this.history.location;
if (!state || state.mastodonModalKey !== this._modalHistoryKey) {
this.history.push(pathname, { ...state, mastodonModalKey: this._modalHistoryKey });
}
}
getSiblings = () => {

View File

@ -59,12 +59,8 @@ export default class ModalRoot extends React.PureComponent {
backgroundColor: null,
};
getSnapshotBeforeUpdate () {
return { visible: !!this.props.type };
}
componentDidUpdate (prevProps, prevState, { visible }) {
if (visible) {
componentDidUpdate () {
if (!!this.props.type) {
document.body.classList.add('with-modals--active');
document.documentElement.style.marginRight = `${getScrollbarWidth()}px`;
} else {