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.
This commit is contained in:
		@@ -14,17 +14,15 @@ export default class ColumnBackButton extends React.PureComponent {
 | 
				
			|||||||
    multiColumn: PropTypes.bool,
 | 
					    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) {
 | 
				
			||||||
      } else {
 | 
					      router.history.goBack();
 | 
				
			||||||
        this.context.router.history.goBack();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
      this.context.router.history.push('/');
 | 
					      router.history.push('/');
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -9,17 +9,15 @@ export default class ColumnBackButtonSlim extends React.PureComponent {
 | 
				
			|||||||
    router: PropTypes.object,
 | 
					    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) {
 | 
				
			||||||
      } else {
 | 
					      router.history.goBack();
 | 
				
			||||||
        this.context.router.history.goBack();
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    } else {
 | 
					    } else {
 | 
				
			||||||
      this.context.router.history.push('/');
 | 
					      router.history.push('/');
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -42,20 +42,6 @@ class ColumnHeader extends React.PureComponent {
 | 
				
			|||||||
    animating: false,
 | 
					    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) => {
 | 
					  handleToggleClick = (e) => {
 | 
				
			||||||
    e.stopPropagation();
 | 
					    e.stopPropagation();
 | 
				
			||||||
    this.setState({ collapsed: !this.state.collapsed, animating: true });
 | 
					    this.setState({ collapsed: !this.state.collapsed, animating: true });
 | 
				
			||||||
@@ -73,8 +59,16 @@ class ColumnHeader extends React.PureComponent {
 | 
				
			|||||||
    this.props.onMove(1);
 | 
					    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 = () => {
 | 
					  handleTransitionEnd = () => {
 | 
				
			||||||
@@ -83,8 +77,9 @@ class ColumnHeader extends React.PureComponent {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
  handlePin = () => {
 | 
					  handlePin = () => {
 | 
				
			||||||
    if (!this.props.pinned) {
 | 
					    if (!this.props.pinned) {
 | 
				
			||||||
      this.historyBack();
 | 
					      this.context.router.history.replace('/');
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    this.props.onPin();
 | 
					    this.props.onPin();
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -24,9 +24,7 @@ export default class Permalink extends React.PureComponent {
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
      if (this.context.router) {
 | 
					      if (this.context.router) {
 | 
				
			||||||
        e.preventDefault();
 | 
					        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);
 | 
					 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -368,9 +368,7 @@ class Status extends ImmutablePureComponent {
 | 
				
			|||||||
            status.getIn(['reblog', 'id'], status.get('id'))
 | 
					            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();
 | 
					      e.preventDefault();
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
@@ -441,16 +439,12 @@ class Status extends ImmutablePureComponent {
 | 
				
			|||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  handleHotkeyOpen = () => {
 | 
					  handleHotkeyOpen = () => {
 | 
				
			||||||
    let state = { ...this.context.router.history.location.state };
 | 
					 | 
				
			||||||
    state.mastodonBackSteps = (state.mastodonBackSteps || 0) + 1;
 | 
					 | 
				
			||||||
    const status = this.props.status;
 | 
					    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 = () => {
 | 
					  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 => {
 | 
					  handleHotkeyMoveUp = e => {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -163,10 +163,9 @@ class StatusActionBar extends ImmutablePureComponent {
 | 
				
			|||||||
  handleOpen = () => {
 | 
					  handleOpen = () => {
 | 
				
			||||||
    let state = { ...this.context.router.history.location.state };
 | 
					    let state = { ...this.context.router.history.location.state };
 | 
				
			||||||
    if (state.mastodonModalKey) {
 | 
					    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 {
 | 
					    } 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);
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -21,9 +21,7 @@ export default class MovedNote extends ImmutablePureComponent {
 | 
				
			|||||||
  handleAccountClick = e => {
 | 
					  handleAccountClick = e => {
 | 
				
			||||||
    if (e.button === 0) {
 | 
					    if (e.button === 0) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      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();
 | 
					    e.stopPropagation();
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -59,9 +59,7 @@ class Conversation extends ImmutablePureComponent {
 | 
				
			|||||||
        }
 | 
					        }
 | 
				
			||||||
        destination = `/statuses/${lastStatus.get('id')}`;
 | 
					        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();
 | 
					      e.preventDefault();
 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -55,9 +55,7 @@ class DetailedStatus extends ImmutablePureComponent {
 | 
				
			|||||||
  handleAccountClick = (e) => {
 | 
					  handleAccountClick = (e) => {
 | 
				
			||||||
    if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
 | 
					    if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      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();
 | 
					    e.stopPropagation();
 | 
				
			||||||
@@ -66,9 +64,7 @@ class DetailedStatus extends ImmutablePureComponent {
 | 
				
			|||||||
  parseClick = (e, destination) => {
 | 
					  parseClick = (e, destination) => {
 | 
				
			||||||
    if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
 | 
					    if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey) && this.context.router) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      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();
 | 
					    e.stopPropagation();
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -502,9 +502,7 @@ class Status extends ImmutablePureComponent {
 | 
				
			|||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  handleHotkeyOpenProfile = () => {
 | 
					  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 => {
 | 
					  handleMoveUp = id => {
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -62,9 +62,7 @@ class BoostModal extends ImmutablePureComponent {
 | 
				
			|||||||
    if (e.button === 0) {
 | 
					    if (e.button === 0) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      e.preventDefault();
 | 
				
			||||||
      this.props.onClose();
 | 
					      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);
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -43,9 +43,7 @@ class FavouriteModal extends ImmutablePureComponent {
 | 
				
			|||||||
    if (e.button === 0) {
 | 
					    if (e.button === 0) {
 | 
				
			||||||
      e.preventDefault();
 | 
					      e.preventDefault();
 | 
				
			||||||
      this.props.onClose();
 | 
					      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);
 | 
					 | 
				
			||||||
    }
 | 
					    }
 | 
				
			||||||
  };
 | 
					  };
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user