Greatly simplify history management code (#2230)

Fixes #2220

This drops the ability to shift+click on “Back” to get back to a pinned
column, but that was inconsistent, broken, and undocumented.

This also brings us slightly closer to upstream.
This commit is contained in:
Claire 2023-05-25 19:14:51 +02:00 committed by GitHub
parent 2f2f74efd8
commit cb6f445b90
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 41 additions and 73 deletions

View file

@ -14,17 +14,15 @@ export default class ColumnBackButton extends React.PureComponent {
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
}; };
handleClick = (event) => { handleClick = () => {
// if history is exhausted, or we would leave mastodon, just go to root. const { router } = this.context;
if (window.history.state) {
const state = this.context.router.history.location.state; // Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201
if (event.shiftKey && state && state.mastodonBackSteps) { // When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
this.context.router.history.go(-state.mastodonBackSteps); if (router.route.location.key) {
router.history.goBack();
} else { } else {
this.context.router.history.goBack(); router.history.push('/');
}
} else {
this.context.router.history.push('/');
} }
}; };

View file

@ -9,17 +9,15 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
router: PropTypes.object, router: PropTypes.object,
}; };
handleClick = (event) => { handleClick = () => {
// if history is exhausted, or we would leave mastodon, just go to root. const { router } = this.context;
if (window.history.state) {
const state = this.context.router.history.location.state; // Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201
if (event.shiftKey && state && state.mastodonBackSteps) { // When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
this.context.router.history.go(-state.mastodonBackSteps); if (router.route.location.key) {
router.history.goBack();
} else { } else {
this.context.router.history.goBack(); router.history.push('/');
}
} else {
this.context.router.history.push('/');
} }
}; };

View file

@ -42,20 +42,6 @@ class ColumnHeader extends React.PureComponent {
animating: false, animating: false,
}; };
historyBack = (skip) => {
// if history is exhausted, or we would leave mastodon, just go to root.
if (window.history.state) {
const state = this.context.router.history.location.state;
if (skip && state && state.mastodonBackSteps) {
this.context.router.history.go(-state.mastodonBackSteps);
} else {
this.context.router.history.goBack();
}
} else {
this.context.router.history.push('/');
}
};
handleToggleClick = (e) => { handleToggleClick = (e) => {
e.stopPropagation(); e.stopPropagation();
this.setState({ collapsed: !this.state.collapsed, animating: true }); this.setState({ collapsed: !this.state.collapsed, animating: true });
@ -73,8 +59,16 @@ class ColumnHeader extends React.PureComponent {
this.props.onMove(1); this.props.onMove(1);
}; };
handleBackClick = (event) => { handleBackClick = () => {
this.historyBack(event.shiftKey); const { router } = this.context;
// Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201
// When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
if (router.route.location.key) {
router.history.goBack();
} else {
router.history.push('/');
}
}; };
handleTransitionEnd = () => { handleTransitionEnd = () => {
@ -83,8 +77,9 @@ class ColumnHeader extends React.PureComponent {
handlePin = () => { handlePin = () => {
if (!this.props.pinned) { if (!this.props.pinned) {
this.historyBack(); this.context.router.history.replace('/');
} }
this.props.onPin(); this.props.onPin();
}; };

View file

@ -24,9 +24,7 @@ export default class Permalink extends React.PureComponent {
if (this.context.router) { if (this.context.router) {
e.preventDefault(); e.preventDefault();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(this.props.to);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(this.props.to, state);
} }
} }
}; };

View file

@ -368,9 +368,7 @@ class Status extends ImmutablePureComponent {
status.getIn(['reblog', 'id'], status.get('id')) status.getIn(['reblog', 'id'], status.get('id'))
}`; }`;
} }
let state = { ...router.history.location.state }; router.history.push(destination);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
router.history.push(destination, state);
} }
e.preventDefault(); e.preventDefault();
} }
@ -441,16 +439,12 @@ class Status extends ImmutablePureComponent {
}; };
handleHotkeyOpen = () => { handleHotkeyOpen = () => {
let state = { ...this.context.router.history.location.state };
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
const status = this.props.status; const status = this.props.status;
this.context.router.history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`, state); this.context.router.history.push(`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`);
}; };
handleHotkeyOpenProfile = () => { handleHotkeyOpenProfile = () => {
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state);
}; };
handleHotkeyMoveUp = e => { handleHotkeyMoveUp = e => {

View file

@ -163,10 +163,9 @@ class StatusActionBar extends ImmutablePureComponent {
handleOpen = () => { handleOpen = () => {
let state = { ...this.context.router.history.location.state }; let state = { ...this.context.router.history.location.state };
if (state.mastodonModalKey) { if (state.mastodonModalKey) {
this.context.router.history.replace(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}`, { mastodonBackSteps: (state.mastodonBackSteps || 0) + 1 }); this.context.router.history.replace(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}`);
} else { } else {
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}`);
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/${this.props.status.get('id')}`, state);
} }
}; };

View file

@ -21,9 +21,7 @@ export default class MovedNote extends ImmutablePureComponent {
handleAccountClick = e => { handleAccountClick = e => {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.to.get('acct')}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.to.get('acct')}`, state);
} }
e.stopPropagation(); e.stopPropagation();

View file

@ -59,9 +59,7 @@ class Conversation extends ImmutablePureComponent {
} }
destination = `/statuses/${lastStatus.get('id')}`; destination = `/statuses/${lastStatus.get('id')}`;
} }
let state = { ...router.history.location.state }; router.history.push(destination);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
router.history.push(destination, state);
e.preventDefault(); e.preventDefault();
} }
}; };

View file

@ -55,9 +55,7 @@ class DetailedStatus extends ImmutablePureComponent {
handleAccountClick = (e) => { handleAccountClick = (e) => {
if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) { if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
e.preventDefault(); e.preventDefault();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state);
} }
e.stopPropagation(); e.stopPropagation();
@ -66,9 +64,7 @@ class DetailedStatus extends ImmutablePureComponent {
parseClick = (e, destination) => { parseClick = (e, destination) => {
if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) { if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
e.preventDefault(); e.preventDefault();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(destination);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(destination, state);
} }
e.stopPropagation(); e.stopPropagation();

View file

@ -502,9 +502,7 @@ class Status extends ImmutablePureComponent {
}; };
handleHotkeyOpenProfile = () => { handleHotkeyOpenProfile = () => {
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state);
}; };
handleMoveUp = id => { handleMoveUp = id => {

View file

@ -62,9 +62,7 @@ class BoostModal extends ImmutablePureComponent {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.props.onClose(); this.props.onClose();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state);
} }
}; };

View file

@ -43,9 +43,7 @@ class FavouriteModal extends ImmutablePureComponent {
if (e.button === 0) { if (e.button === 0) {
e.preventDefault(); e.preventDefault();
this.props.onClose(); this.props.onClose();
let state = { ...this.context.router.history.location.state }; this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`, state);
} }
}; };