[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, 102 insertions, 0 deletions

diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
new file mode 100644
index 000000000..82936c838
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/components/column_settings.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import { injectIntl, FormattedMessage } from 'react-intl';
+import Toggle from 'react-toggle';
+import AsyncSelect from 'react-select/lib/Async';
+
+@injectIntl
+export default class ColumnSettings extends React.PureComponent {
+
+  static propTypes = {
+    settings: ImmutablePropTypes.map.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onLoad: PropTypes.func.isRequired,
+    intl: PropTypes.object.isRequired,
+  };
+
+  state = {
+    open: this.hasTags(),
+  };
+
+  hasTags () {
+    return ['all', 'any', 'none'].map(mode => this.tags(mode).length > 0).includes(true);
+  }
+
+  tags (mode) {
+    let tags = this.props.settings.getIn(['tags', mode]) || [];
+    if (tags.toJSON) {
+      return tags.toJSON();
+    } else {
+      return tags;
+    }
+  };
+
+  onSelect = (mode) => {
+    return (value) => {
+      this.props.onChange(['tags', mode], value);
+    };
+  };
+
+  onToggle = () => {
+    if (this.state.open && this.hasTags()) {
+      this.props.onChange('tags', {});
+    }
+    this.setState({ open: !this.state.open });
+  };
+
+  modeSelect (mode) {
+    return (
+      <div className='column-settings__section'>
+        {this.modeLabel(mode)}
+        <AsyncSelect
+          isMulti
+          autoFocus
+          value={this.tags(mode)}
+          settings={this.props.settings}
+          settingPath={['tags', mode]}
+          onChange={this.onSelect(mode)}
+          loadOptions={this.props.onLoad}
+          classNamePrefix='column-settings__hashtag-select'
+          name='tags'
+        />
+      </div>
+    );
+  }
+
+  modeLabel (mode) {
+    switch(mode) {
+    case 'any':  return <FormattedMessage id='hashtag.column_settings.tag_mode.any' defaultMessage='Any of these' />;
+    case 'all':  return <FormattedMessage id='hashtag.column_settings.tag_mode.all' defaultMessage='All of these' />;
+    case 'none': return <FormattedMessage id='hashtag.column_settings.tag_mode.none' defaultMessage='None of these' />;
+    }
+    return '';
+  };
+
+  render () {
+    return (
+      <div>
+        <div className='column-settings__row'>
+          <div className='setting-toggle'>
+            <Toggle
+              id='hashtag.column_settings.tag_toggle'
+              onChange={this.onToggle}
+              checked={this.state.open}
+            />
+            <span className='setting-toggle__label'>
+              <FormattedMessage id='hashtag.column_settings.tag_toggle' defaultMessage='Include additional tags in this column' />
+            </span>
+          </div>
+        </div>
+        {this.state.open &&
+          <div className='column-settings__hashtags'>
+            {this.modeSelect('any')}
+            {this.modeSelect('all')}
+            {this.modeSelect('none')}
+          </div>
+        }
+      </div>
+    );
+  }
+
+}