Fix “Back” button sometimes redirecting out of Mastodon (#25281)

This commit is contained in:
Claire 2023-07-17 17:32:46 +02:00 committed by GitHub
parent d0f00206dc
commit a442a1d1c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 40 additions and 14 deletions

View file

@ -23,9 +23,7 @@ export default class ColumnBackButton extends PureComponent {
if (onClick) { if (onClick) {
onClick(); onClick();
// Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201 } else if (router.history.location?.state?.fromMastodon) {
// When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
} else if (router.route.location.key) {
router.history.goBack(); router.history.goBack();
} else { } else {
router.history.push('/'); router.history.push('/');

View file

@ -63,10 +63,12 @@ class ColumnHeader extends PureComponent {
}; };
handleBackClick = () => { handleBackClick = () => {
if (window.history && window.history.state) { const { router } = this.context;
this.context.router.history.goBack();
if (router.history.location?.state?.fromMastodon) {
router.history.goBack();
} else { } else {
this.context.router.history.push('/'); router.history.push('/');
} }
}; };
@ -83,6 +85,7 @@ class ColumnHeader extends PureComponent {
}; };
render () { render () {
const { router } = this.context;
const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props; const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
const { collapsed, animating } = this.state; const { collapsed, animating } = this.state;
@ -126,7 +129,7 @@ class ColumnHeader extends PureComponent {
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>; pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
} }
if (!pinned && (multiColumn || showBackButton)) { if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
backButton = ( backButton = (
<button onClick={this.handleBackClick} className='column-header__back-button'> <button onClick={this.handleBackClick} className='column-header__back-button'>
<Icon id='chevron-left' className='column-back-button__icon' fixedWidth /> <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />

View file

@ -1,16 +1,26 @@
import type { PropsWithChildren } from 'react'; import type { PropsWithChildren } from 'react';
import React from 'react'; import React from 'react';
import type { History } from 'history';
import { createBrowserHistory } from 'history'; import { createBrowserHistory } from 'history';
import { Router as OriginalRouter } from 'react-router'; import { Router as OriginalRouter } from 'react-router';
import { layoutFromWindow } from 'mastodon/is_mobile'; import { layoutFromWindow } from 'mastodon/is_mobile';
const browserHistory = createBrowserHistory(); interface MastodonLocationState {
const originalPush = browserHistory.push.bind(browserHistory); fromMastodon?: boolean;
mastodonModalKey?: string;
}
const browserHistory = createBrowserHistory<
MastodonLocationState | undefined
>();
const originalPush = browserHistory.push.bind(browserHistory);
const originalReplace = browserHistory.replace.bind(browserHistory);
browserHistory.push = (path: string, state?: MastodonLocationState) => {
state = state ?? {};
state.fromMastodon = true;
browserHistory.push = (path: string, state: History.LocationState) => {
if (layoutFromWindow() === 'multi-column' && !path.startsWith('/deck')) { if (layoutFromWindow() === 'multi-column' && !path.startsWith('/deck')) {
originalPush(`/deck${path}`, state); originalPush(`/deck${path}`, state);
} else { } else {
@ -18,6 +28,19 @@ browserHistory.push = (path: string, state: History.LocationState) => {
} }
}; };
browserHistory.replace = (path: string, state?: MastodonLocationState) => {
if (browserHistory.location.state?.fromMastodon) {
state = state ?? {};
state.fromMastodon = true;
}
if (layoutFromWindow() === 'multi-column' && !path.startsWith('/deck')) {
originalReplace(`/deck${path}`, state);
} else {
originalReplace(path, state);
}
};
export const Router: React.FC<PropsWithChildren> = ({ children }) => { export const Router: React.FC<PropsWithChildren> = ({ children }) => {
return <OriginalRouter history={browserHistory}>{children}</OriginalRouter>; return <OriginalRouter history={browserHistory}>{children}</OriginalRouter>;
}; };

View file

@ -479,10 +479,12 @@ class UI extends PureComponent {
}; };
handleHotkeyBack = () => { handleHotkeyBack = () => {
if (window.history && window.history.state) { const { router } = this.context;
this.context.router.history.goBack();
if (router.history.location?.state?.fromMastodon) {
router.history.goBack();
} else { } else {
this.context.router.history.push('/'); router.history.push('/');
} }
}; };