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.lolsob-rspec
parent
56ac8eb6ea
commit
b13b71d1f5
|
@ -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) {
|
||||||
} else {
|
router.history.goBack();
|
||||||
this.context.router.history.goBack();
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.context.router.history.push('/');
|
router.history.push('/');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
||||||
} else {
|
router.history.goBack();
|
||||||
this.context.router.history.goBack();
|
|
||||||
}
|
|
||||||
} else {
|
} else {
|
||||||
this.context.router.history.push('/');
|
router.history.push('/');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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 => {
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue