[Glitch] Allow joining several hashtags in a single column

Port 4c03e05a4e1a237f8a414a0861c03abe3269dbc8 to glitch-soc

This introduces new requirements in the API:

  `/api/v1/timelines/tag/:tag` now accepts new params: `any`, `all` and `none`
  It now returns status matching tag :tag or any of the :any, provided that
  they also include all tags in `all` and none of `none`.

1 files changed, 56 insertions, 16 deletions

diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
index 311fabb63..4455f8957 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.js
@@ -4,7 +4,8 @@ import PropTypes from 'prop-types';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import { expandHashtagTimeline } from 'flavours/glitch/actions/timelines';
+import ColumnSettingsContainer from './containers/column_settings_container';
+import { expandHashtagTimeline, clearTimeline } from 'flavours/glitch/actions/timelines';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
 import { FormattedMessage } from 'react-intl';
 import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
@@ -16,6 +17,8 @@ const mapStateToProps = (state, props) => ({
 @connect(mapStateToProps)
 export default class HashtagTimeline extends React.PureComponent {
 
+  disconnects = [];
+
   static propTypes = {
     params: PropTypes.object.isRequired,
     columnId: PropTypes.string,
@@ -34,6 +37,30 @@ export default class HashtagTimeline extends React.PureComponent {
     }
   }
 
+  title = () => {
+    let title = [this.props.params.id];
+    if (this.additionalFor('any')) {
+      title.push(<FormattedMessage id='hashtag.column_header.tag_mode.any'  values={{ additional: this.additionalFor('any') }} defaultMessage=' or {additional}' />);
+    }
+    if (this.additionalFor('all')) {
+      title.push(<FormattedMessage id='hashtag.column_header.tag_mode.all'  values={{ additional: this.additionalFor('all') }} defaultMessage=' and {additional}' />);
+    }
+    if (this.additionalFor('none')) {
+      title.push(<FormattedMessage id='hashtag.column_header.tag_mode.none' values={{ additional: this.additionalFor('none') }} defaultMessage=' without {additional}' />);
+    }
+    return title;
+  }
+
+  additionalFor = (mode) => {
+    const { tags } = this.props.params;
+
+    if (tags && (tags[mode] || []).length > 0) {
+      return tags[mode].map(tag => tag.value).join('/');
+    } else {
+      return '';
+    }
+  }
+
   handleMove = (dir) => {
     const { columnId, dispatch } = this.props;
     dispatch(moveColumn(columnId, dir));
@@ -43,30 +70,40 @@ export default class HashtagTimeline extends React.PureComponent {
     this.column.scrollTop();
   }
 
-  _subscribe (dispatch, id) {
-    this.disconnect = dispatch(connectHashtagStream(id));
+  _subscribe (dispatch, id, tags = {}) {
+    let any  = (tags.any || []).map(tag => tag.value);
+    let all  = (tags.all || []).map(tag => tag.value);
+    let none = (tags.none || []).map(tag => tag.value);
+
+    [id, ...any].map((tag) => {
+      this.disconnects.push(dispatch(connectHashtagStream(id, tag, (status) => {
+        let tags = status.tags.map(tag => tag.name);
+        return all.filter(tag => tags.includes(tag)).length === all.length &&
+               none.filter(tag => tags.includes(tag)).length === 0;
+      })));
+    });
   }
 
   _unsubscribe () {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
+    this.disconnects.map(disconnect => disconnect());
+    this.disconnects = [];
   }
 
   componentDidMount () {
     const { dispatch } = this.props;
-    const { id } = this.props.params;
+    const { id, tags } = this.props.params;
 
-    dispatch(expandHashtagTimeline(id));
-    this._subscribe(dispatch, id);
+    dispatch(expandHashtagTimeline(id, { tags }));
   }
 
   componentWillReceiveProps (nextProps) {
-    if (nextProps.params.id !== this.props.params.id) {
-      this.props.dispatch(expandHashtagTimeline(nextProps.params.id));
+    const { dispatch, params } = this.props;
+    const { id, tags } = nextProps.params;
+    if (id !== params.id || tags !== params.tags) {
       this._unsubscribe();
-      this._subscribe(this.props.dispatch, nextProps.params.id);
+      this._subscribe(dispatch, id, tags);
+      this.props.dispatch(clearTimeline(`hashtag:${id}`));
+      this.props.dispatch(expandHashtagTimeline(id, { tags }));
     }
   }
 
@@ -79,7 +116,8 @@ export default class HashtagTimeline extends React.PureComponent {
   }
 
   handleLoadMore = maxId => {
-    this.props.dispatch(expandHashtagTimeline(this.props.params.id, { maxId }));
+    const { id, tags } = this.props.params;
+    this.props.dispatch(expandHashtagTimeline(id, { maxId, tags }));
   }
 
   render () {
@@ -92,14 +130,16 @@ export default class HashtagTimeline extends React.PureComponent {
         <ColumnHeader
           icon='hashtag'
           active={hasUnread}
-          title={id}
+          title={this.title()}
           onPin={this.handlePin}
           onMove={this.handleMove}
           onClick={this.handleHeaderClick}
           pinned={pinned}
           multiColumn={multiColumn}
           showBackButton
-        />
+        >
+          {columnId && <ColumnSettingsContainer columnId={columnId} />}
+        </ColumnHeader>
 
         <StatusListContainer
           trackScroll={!pinned}