Port 4c03e05a4e 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`.
main
Thibaut Girka
6 years ago
committed by
ThibG
parent
6073195a7d
commit
4be7313298
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { connect } from 'react-redux';
|
||||||
|
import ColumnSettings from '../components/column_settings';
|
||||||
|
import { changeColumnParams } from 'flavours/glitch/actions/columns';
|
||||||
|
import api from 'flavours/glitch/util/api';
|
||||||
|
|
||||||
|
const mapStateToProps = (state, { columnId }) => {
|
||||||
|
const columns = state.getIn(['settings', 'columns']);
|
||||||
|
const index = columns.findIndex(c => c.get('uuid') === columnId);
|
||||||
|
|
||||||
|
if (!(columnId && index >= 0)) {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { settings: columns.get(index).get('params') };
|
||||||
|
};
|
||||||
|
|
||||||
|
const mapDispatchToProps = (dispatch, { columnId }) => ({
|
||||||
|
onChange (key, value) {
|
||||||
|
dispatch(changeColumnParams(columnId, key, value));
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad (value) {
|
||||||
|
return api().get('/api/v2/search', { params: { q: value } }).then(response => {
|
||||||
|
return (response.data.hashtags || []).map((tag) => {
|
||||||
|
return { value: tag.name, label: `#${tag.name}` };
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings);
|
||||||
Loading…
Reference in new issue