Merge pull request #509 from ThibG/glitch-soc/fixes/router-history-navigation

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

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)) {
+    if (window.history.state) {
-      this.context.router.history.push('/');
-    } else {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 

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)) {
+    if (window.history.state) {
-      this.context.router.history.push('/');
-    } else {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 

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)) {
+    if (window.history.state) {
-      this.context.router.history.push('/');
-    } else {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 

app/javascript/flavours/glitch/features/ui/index.js

@@ -99,10 +99,6 @@ const keyMap = {
 @withRouter
 export default class UI extends React.Component {
 
-  static contextTypes = {
-    router: PropTypes.object.isRequired,
-  };
-
   static propTypes = {
     dispatch: PropTypes.func.isRequired,
     children: PropTypes.node,
@@ -113,6 +109,7 @@ export default class UI extends React.Component {
     isComposing: PropTypes.bool,
     hasComposingText: PropTypes.bool,
     location: PropTypes.object,
+    router: PropTypes.object,
     intl: PropTypes.object.isRequired,
     dropdownMenuIsOpen: PropTypes.bool,
   };
@@ -200,7 +197,7 @@ export default class UI extends React.Component {
 
   handleServiceWorkerPostMessage = ({ data }) => {
     if (data.type === 'navigate') {
-      this.context.router.history.push(data.path);
+      this.props.router.history.push(data.path);
     } else {
       console.warn('Unknown message type:', data.type);
     }
@@ -305,10 +302,11 @@ export default class UI extends React.Component {
   }
 
   handleHotkeyBack = () => {
-    if (window.history && window.history.length === 1) {
+    // if history is exhausted, or we would leave mastodon, just go to root.
-      this.context.router.history.push('/');
+    if (window.history.state) {
-    } else {
       this.context.router.history.goBack();
+    } else {
+      this.context.router.history.push('/');
     }
   }
 
@@ -318,54 +316,54 @@ export default class UI extends React.Component {
 
   handleHotkeyToggleHelp = () => {
     if (this.props.location.pathname === '/keyboard-shortcuts') {
-      this.context.router.history.goBack();
+      this.props.router.history.goBack();
     } else {
-      this.context.router.history.push('/keyboard-shortcuts');
+      this.props.router.history.push('/keyboard-shortcuts');
     }
   }
 
   handleHotkeyGoToHome = () => {
-    this.context.router.history.push('/timelines/home');
+    this.props.router.history.push('/timelines/home');
   }
 
   handleHotkeyGoToNotifications = () => {
-    this.context.router.history.push('/notifications');
+    this.props.router.history.push('/notifications');
   }
 
   handleHotkeyGoToLocal = () => {
-    this.context.router.history.push('/timelines/public/local');
+    this.props.router.history.push('/timelines/public/local');
   }
 
   handleHotkeyGoToFederated = () => {
-    this.context.router.history.push('/timelines/public');
+    this.props.router.history.push('/timelines/public');
   }
 
   handleHotkeyGoToDirect = () => {
-    this.context.router.history.push('/timelines/direct');
+    this.props.router.history.push('/timelines/direct');
   }
 
   handleHotkeyGoToStart = () => {
-    this.context.router.history.push('/getting-started');
+    this.props.router.history.push('/getting-started');
   }
 
   handleHotkeyGoToFavourites = () => {
-    this.context.router.history.push('/favourites');
+    this.props.router.history.push('/favourites');
   }
 
   handleHotkeyGoToPinned = () => {
-    this.context.router.history.push('/pinned');
+    this.props.router.history.push('/pinned');
   }
 
   handleHotkeyGoToProfile = () => {
-    this.context.router.history.push(`/accounts/${me}`);
+    this.props.router.history.push(`/accounts/${me}`);
   }
 
   handleHotkeyGoToBlocked = () => {
-    this.context.router.history.push('/blocks');
+    this.props.router.history.push('/blocks');
   }
 
   handleHotkeyGoToMuted = () => {
-    this.context.router.history.push('/mutes');
+    this.props.router.history.push('/mutes');
   }
 
   render () {

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;
-    }
   });
 }