Use history.state to decide whether we should goBack() or go to / (fixes #247)

So far, glitch-soc used history.length to decide whether to call `goBack()` or
go to / in order to not leave the webUI. This made clicking the “Back” button
go to the “Getting started” column instead of going back in the browser's
history when such an action would leave the web UI, but also when:
- The WebUI is refreshed (F5)
- A tab is restored
- The history length reaches its maximum (e.g., 50 in Firefox)

This commit fixes these shortcomings by checking `window.history.state`.
Indeed, we only want to go back in the browser's history when the current
location has been reached from within the WebUI, which only happens via
`pushState` as far as I know. Since browser store the serialized state in
the browser history, this also survives page reload and session restoration.

5 files changed, 13 insertions, 17 deletions

diff --git a/app/javascript/flavours/glitch/components/column_back_button.js b/app/javascript/flavours/glitch/components/column_back_button.js
index 50c3bf11f..a562ef9b9 100644
--- a/app/javascript/flavours/glitch/components/column_back_button.js
+++ b/app/javascript/flavours/glitch/components/column_back_button.js
@@ -10,10 +10,10 @@ export default class ColumnBackButton extends React.PureComponent {
 
   handleClick = () => {
     // if history is exhausted, or we would leave mastodon, just go to root.
-    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
-      this.context.router.history.push('/');
-    } else {
+    if (window.history.state) {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 
diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.js b/app/javascript/flavours/glitch/components/column_back_button_slim.js
index 2cdf1b25b..c99c202af 100644
--- a/app/javascript/flavours/glitch/components/column_back_button_slim.js
+++ b/app/javascript/flavours/glitch/components/column_back_button_slim.js
@@ -10,10 +10,10 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
 
   handleClick = () => {
     // if history is exhausted, or we would leave mastodon, just go to root.
-    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
-      this.context.router.history.push('/');
-    } else {
+    if (window.history.state) {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 
diff --git a/app/javascript/flavours/glitch/components/column_header.js b/app/javascript/flavours/glitch/components/column_header.js
index bfad6467d..72207637d 100644
--- a/app/javascript/flavours/glitch/components/column_header.js
+++ b/app/javascript/flavours/glitch/components/column_header.js
@@ -66,10 +66,10 @@ export default class ColumnHeader extends React.PureComponent {
 
   handleBackClick = () => {
     // if history is exhausted, or we would leave mastodon, just go to root.
-    if (window.history && (window.history.length === 1 || window.history.length === window._mastoInitialHistoryLen)) {
-      this.context.router.history.push('/');
-    } else {
+    if (window.history.state) {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 
diff --git a/app/javascript/flavours/glitch/features/ui/index.js b/app/javascript/flavours/glitch/features/ui/index.js
index 756a24a76..4a7a7d0f4 100644
--- a/app/javascript/flavours/glitch/features/ui/index.js
+++ b/app/javascript/flavours/glitch/features/ui/index.js
@@ -302,10 +302,11 @@ export default class UI extends React.Component {
   }
 
   handleHotkeyBack = () => {
-    if (window.history && window.history.length === 1) {
-      this.props.router.history.push('/');
+    // if history is exhausted, or we would leave mastodon, just go to root.
+    if (window.history.state) {
+      this.context.router.history.goBack();
     } else {
-      this.props.router.history.goBack();
+      this.context.router.history.push('/');
     }
   }
 
diff --git a/app/javascript/flavours/glitch/util/main.js b/app/javascript/flavours/glitch/util/main.js
index c00210677..b76826481 100644
--- a/app/javascript/flavours/glitch/util/main.js
+++ b/app/javascript/flavours/glitch/util/main.js
@@ -28,11 +28,6 @@ function main() {
       store.dispatch(registerPushNotifications.register());
     }
     perf.stop('main()');
-
-    // remember the initial URL
-    if (window.history && typeof window._mastoInitialHistoryLen === 'undefined') {
-      window._mastoInitialHistoryLen = window.history.length;
-    }
   });
 }