From 0c45bed333885622276649deb2370191299d2624 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Mon, 17 Jul 2023 17:32:46 +0200
Subject: [PATCH] =?UTF-8?q?[Glitch]=20Fix=20=E2=80=9CBack=E2=80=9D=20butto?=
 =?UTF-8?q?n=20sometimes=20redirecting=20out=20of=20Mastodon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port a442a1d1c69e5d477ca1c05f0bc5fc0f6894b223 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/components/column_back_button.jsx  |  4 +--
 .../glitch/components/column_header.jsx       |  7 ++---
 .../flavours/glitch/components/router.tsx     | 31 ++++++++++++++++---
 .../flavours/glitch/features/ui/index.jsx     |  9 +++---
 4 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/app/javascript/flavours/glitch/components/column_back_button.jsx b/app/javascript/flavours/glitch/components/column_back_button.jsx
index 0934d4b33..5a11a3d5e 100644
--- a/app/javascript/flavours/glitch/components/column_back_button.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button.jsx
@@ -20,9 +20,7 @@ export default class ColumnBackButton extends PureComponent {
   handleClick = () => {
     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) {
+    if (router.history.location?.state?.fromMastodon) {
       router.history.goBack();
     } else {
       router.history.push('/');
diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx
index e8c056c0b..8a68036e9 100644
--- a/app/javascript/flavours/glitch/components/column_header.jsx
+++ b/app/javascript/flavours/glitch/components/column_header.jsx
@@ -65,9 +65,7 @@ class ColumnHeader extends PureComponent {
   handleBackClick = () => {
     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) {
+    if (router.history.location?.state?.fromMastodon) {
       router.history.goBack();
     } else {
       router.history.push('/');
@@ -87,6 +85,7 @@ class ColumnHeader extends PureComponent {
   };
 
   render () {
+    const { router } = this.context;
     const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
     const { collapsed, animating } = this.state;
 
@@ -130,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>;
     }
 
-    if (!pinned && (multiColumn || showBackButton)) {
+    if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
           <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
diff --git a/app/javascript/flavours/glitch/components/router.tsx b/app/javascript/flavours/glitch/components/router.tsx
index 018f66e15..f09371651 100644
--- a/app/javascript/flavours/glitch/components/router.tsx
+++ b/app/javascript/flavours/glitch/components/router.tsx
@@ -1,16 +1,26 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
-import type { History } from 'history';
 import { createBrowserHistory } from 'history';
 import { Router as OriginalRouter } from 'react-router';
 
 import { layoutFromWindow } from 'flavours/glitch/is_mobile';
 
-const browserHistory = createBrowserHistory();
-const originalPush = browserHistory.push.bind(browserHistory);
+interface MastodonLocationState {
+  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')) {
     originalPush(`/deck${path}`, state);
   } 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 }) => {
   return <OriginalRouter history={browserHistory}>{children}</OriginalRouter>;
 };
diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx
index cbd2637af..df25b90a1 100644
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@@ -528,11 +528,12 @@ class UI extends Component {
   };
 
   handleHotkeyBack = () => {
-    // if history is exhausted, or we would leave mastodon, just go to root.
-    if (window.history.state) {
-      this.props.history.goBack();
+    const { history } = this.props;
+
+    if (history.location?.state?.fromMastodon) {
+      history.goBack();
     } else {
-      this.props.history.push('/');
+      history.push('/');
     }
   };