diff options
author | James Kiesel <james.kiesel@gmail.com> | 2018-11-06 06:53:25 +1300 |
---|---|---|
committer | Eugen Rochko <eugen@zeonfederated.com> | 2018-11-05 18:53:25 +0100 |
commit | 4c03e05a4e1a237f8a414a0861c03abe3269dbc8 (patch) | |
tree | 6caa724b3ce982af4e40237a43ecf38d7595030a /app/javascript/mastodon/features/hashtag_timeline/index.js | |
parent | bb5558de627ca9bc26949570025f6193cd7cbd98 (diff) |
Allow joining several hashtags in a single column (#8904)
* Nascent tag menu on frontend * Hook up frontend to search * Tag intersection backend first pass * Update yarnlock * WIP * Fix for tags not searching correctly * Make radio buttons function * Simplify radio buttons with modeOption * Better naming * Rearrange options * Add all/any/none functionality on backend * Small PR cleanup * Move to service from scope * Small cleanup, add proper service tests * Don't use send with user input :D * Set appropriate column header * Handle auto updating timeline * Fix up toggle function * Use tag value correctly * A bit more correct to use 'self' rather than 'all' in status scope * Fix some style issues * Fix more code style issues * Style select dropdown more better * Only use to_id'ed value to ensure no SQL injection * Revamp frontend to allow for multiple selects * Update backend / col header to account for more flexible tagging * Update brakeman ignore * Codeclimate suggestions * Fix presenter tag_url * Implement initial PR feedback * Handle additional tag streaming * CodeClimate tweak
Diffstat (limited to 'app/javascript/mastodon/features/hashtag_timeline/index.js')
-rw-r--r-- | app/javascript/mastodon/features/hashtag_timeline/index.js | 72 |
1 files changed, 56 insertions, 16 deletions
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.js b/app/javascript/mastodon/features/hashtag_timeline/index.js index 63efdf1bd..86658cb66 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/index.js +++ b/app/javascript/mastodon/features/hashtag_timeline/index.js @@ -4,7 +4,8 @@ import PropTypes from 'prop-types'; import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; import ColumnHeader from '../../components/column_header'; -import { expandHashtagTimeline } from '../../actions/timelines'; +import ColumnSettingsContainer from './containers/column_settings_container'; +import { expandHashtagTimeline, clearTimeline } from '../../actions/timelines'; import { addColumn, removeColumn, moveColumn } from '../../actions/columns'; import { FormattedMessage } from 'react-intl'; import { connectHashtagStream } from '../../actions/streaming'; @@ -16,6 +17,8 @@ const mapStateToProps = (state, props) => ({ export default @connect(mapStateToProps) class HashtagTimeline extends React.PureComponent { + disconnects = []; + static propTypes = { params: PropTypes.object.isRequired, columnId: PropTypes.string, @@ -35,6 +38,30 @@ 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)); @@ -44,30 +71,40 @@ 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 })); } } @@ -80,7 +117,8 @@ 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 () { @@ -93,14 +131,16 @@ 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} |