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.

app/javascript/flavours/glitch/components/column_back_button.jsx

@@ -14,17 +14,15 @@ export default class ColumnBackButton extends React.PureComponent {
     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) {
+      router.history.goBack();
     } else {
-        this.context.router.history.goBack();
+      router.history.push('/');
-      }
-    } else {
-      this.context.router.history.push('/');
     }
   };
 

app/javascript/flavours/glitch/components/column_back_button_slim.jsx

@@ -9,17 +9,15 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
     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) {
+      router.history.goBack();
     } else {
-        this.context.router.history.goBack();
+      router.history.push('/');
-      }
-    } else {
-      this.context.router.history.push('/');
     }
   };
 

app/javascript/flavours/glitch/components/column_header.jsx

@@ -42,20 +42,6 @@ class ColumnHeader extends React.PureComponent {
     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) => {
     e.stopPropagation();
     this.setState({ collapsed: !this.state.collapsed, animating: true });
@@ -73,8 +59,16 @@ class ColumnHeader extends React.PureComponent {
     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 = () => {
@@ -83,8 +77,9 @@ class ColumnHeader extends React.PureComponent {
 
   handlePin = () => {
     if (!this.props.pinned) {
-      this.historyBack();
+      this.context.router.history.replace('/');
     }
+
     this.props.onPin();
   };
 

app/javascript/flavours/glitch/components/permalink.jsx

@@ -24,9 +24,7 @@ export default class Permalink extends React.PureComponent {
 
       if (this.context.router) {
         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);
       }
     }
   };

app/javascript/flavours/glitch/components/status.jsx

@@ -368,9 +368,7 @@ class Status extends ImmutablePureComponent {
             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();
     }
@@ -441,16 +439,12 @@ class Status extends ImmutablePureComponent {
   };
 
   handleHotkeyOpen = () => {
-    let state = { ...this.context.router.history.location.state };
-    state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
     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 = () => {
-    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 => {

app/javascript/flavours/glitch/components/status_action_bar.jsx

@@ -163,10 +163,9 @@ class StatusActionBar extends ImmutablePureComponent {
   handleOpen = () => {
     let state = { ...this.context.router.history.location.state };
     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 {
-      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);
     }
   };
 

app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx

@@ -21,9 +21,7 @@ export default class MovedNote extends ImmutablePureComponent {
   handleAccountClick = e => {
     if (e.button === 0) {
       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();

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -59,9 +59,7 @@ class Conversation extends ImmutablePureComponent {
         }
         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();
     }
   };

app/javascript/flavours/glitch/features/status/components/detailed_status.jsx

@@ -55,9 +55,7 @@ class DetailedStatus extends ImmutablePureComponent {
   handleAccountClick = (e) => {
     if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
       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();
@@ -66,9 +64,7 @@ class DetailedStatus extends ImmutablePureComponent {
   parseClick = (e, destination) => {
     if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
       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();

app/javascript/flavours/glitch/features/status/index.jsx

@@ -502,9 +502,7 @@ class Status extends ImmutablePureComponent {
   };
 
   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 => {

app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx

@@ -62,9 +62,7 @@ class BoostModal extends ImmutablePureComponent {
     if (e.button === 0) {
       e.preventDefault();
       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);
     }
   };
 

app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx

@@ -43,9 +43,7 @@ class FavouriteModal extends ImmutablePureComponent {
     if (e.button === 0) {
       e.preventDefault();
       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);
     }
   };