diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js
index e05021df6..bbb04f36f 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area.js
+++ b/app/javascript/mastodon/features/ui/components/columns_area.js
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import ReactSwipeableViews from 'react-swipeable-views';
-import TabsBar, { links, getIndex, getLink } from './tabs_bar';
+import TabsBar, { getSwipeableIndex, getSwipeableLink } from './tabs_bar';
import { Link } from 'react-router-dom';
import { disableSwiping, place_tab_bar_at_bottom } from 'mastodon/initial_state';
@@ -75,6 +75,7 @@ class ColumnsArea extends ImmutablePureComponent {
isModalOpen: PropTypes.bool.isRequired,
singleColumn: PropTypes.bool,
children: PropTypes.node,
+ links: PropTypes.node,
};
// Corresponds to (max-width: 600px + (285px * 1) + (10px * 1)) in SCSS
@@ -86,7 +87,7 @@ class ColumnsArea extends ImmutablePureComponent {
}
componentWillReceiveProps() {
- if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getIndex(this.context.router.history.location.pathname)) {
+ if (typeof this.pendingIndex !== 'number' && this.lastIndex !== getSwipeableIndex(this.context.router.history.location.pathname)) {
this.setState({ shouldAnimate: false });
}
}
@@ -105,7 +106,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.setState({ renderComposePanel: !this.mediaQuery.matches });
}
- this.lastIndex = getIndex(this.context.router.history.location.pathname);
+ this.lastIndex = getSwipeableIndex(this.context.router.history.location.pathname);
this.isRtlLayout = document.getElementsByTagName('body')[0].classList.contains('rtl');
this.setState({ shouldAnimate: true });
@@ -122,7 +123,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : false);
}
- const newIndex = getIndex(this.context.router.history.location.pathname);
+ const newIndex = getSwipeableIndex(this.context.router.history.location.pathname);
if (this.lastIndex !== newIndex) {
this.lastIndex = newIndex;
@@ -158,7 +159,7 @@ class ColumnsArea extends ImmutablePureComponent {
handleSwipe = (index) => {
this.pendingIndex = index;
- const nextLinkTranslationId = links[index].props['data-preview-title-id'];
+ const nextLinkTranslationId = this.props.links[index].props['data-preview-title-id'];
const currentLinkSelector = '.tabs-bar__link.active';
const nextLinkSelector = `.tabs-bar__link[data-preview-title-id="${nextLinkTranslationId}"]`;
@@ -168,14 +169,14 @@ class ColumnsArea extends ImmutablePureComponent {
document.querySelector(nextLinkSelector).classList.add('active');
if (!this.state.shouldAnimate && typeof this.pendingIndex === 'number') {
- this.context.router.history.push(getLink(this.pendingIndex));
+ this.context.router.history.push(getSwipeableLink(this.pendingIndex));
this.pendingIndex = null;
}
}
handleAnimationEnd = () => {
if (typeof this.pendingIndex === 'number') {
- this.context.router.history.push(getLink(this.pendingIndex));
+ this.context.router.history.push(getSwipeableLink(this.pendingIndex));
this.pendingIndex = null;
}
}
@@ -193,7 +194,7 @@ class ColumnsArea extends ImmutablePureComponent {
}
renderView = (link, index) => {
- const columnIndex = getIndex(this.context.router.history.location.pathname);
+ const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] });
const icon = link.props['data-preview-icon'];
@@ -217,10 +218,10 @@ class ColumnsArea extends ImmutablePureComponent {
}
render () {
- const { columns, children, singleColumn, isModalOpen, intl } = this.props;
+ const { columns, children, singleColumn, isModalOpen, links, intl } = this.props;
const { shouldAnimate, renderComposePanel } = this.state;
- const columnIndex = getIndex(this.context.router.history.location.pathname);
+ const columnIndex = getSwipeableIndex(this.context.router.history.location.pathname);
if (singleColumn) {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null :