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`.
master
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