diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js index f33802371..12ae23f57 100644 --- a/app/soapbox/components/sidebar_menu.js +++ b/app/soapbox/components/sidebar_menu.js @@ -168,10 +168,10 @@ class SidebarMenu extends ImmutablePureComponent { {intl.formatMessage(messages.mutes)} - {/* + {intl.formatMessage(messages.filters)} - */} + { isStaff && {intl.formatMessage(messages.admin_settings)} diff --git a/app/soapbox/features/compose/components/action_bar.js b/app/soapbox/features/compose/components/action_bar.js index 411a30f17..fa763d806 100644 --- a/app/soapbox/features/compose/components/action_bar.js +++ b/app/soapbox/features/compose/components/action_bar.js @@ -76,7 +76,7 @@ class ActionBar extends React.PureComponent { menu.push({ text: intl.formatMessage(messages.mutes), to: '/mutes' }); menu.push({ text: intl.formatMessage(messages.blocks), to: '/blocks' }); menu.push({ text: intl.formatMessage(messages.domain_blocks), to: '/domain_blocks' }); - // menu.push({ text: intl.formatMessage(messages.filters), to: '/filters' }); + menu.push({ text: intl.formatMessage(messages.filters), to: '/filters' }); menu.push(null); menu.push({ text: intl.formatMessage(messages.keyboard_shortcuts), action: this.handleHotkeyClick }); if (isStaff) { diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js index 7ae71daac..0d603347a 100644 --- a/app/soapbox/features/filters/index.js +++ b/app/soapbox/features/filters/index.js @@ -4,16 +4,49 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import PropTypes from 'prop-types'; import Column from '../ui/components/column'; -import { fetchFilters } from '../../actions/filters'; +import { fetchFilters, createFilter } from '../../actions/filters'; +import ScrollableList from '../../components/scrollable_list'; +import Button from 'soapbox/components/button'; +import { + SimpleForm, + SimpleInput, + FieldsGroup, + TextInput, + SelectDropdown, + Checkbox, +} from 'soapbox/features/forms'; +import { showAlert } from 'soapbox/actions/alerts'; const messages = defineMessages({ heading: { id: 'column.filters', defaultMessage: 'Muted words' }, + keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' }, + expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' }, + home_timeline: { id: 'column.filters.home_timeline', defaultMessage: 'Home timeline' }, + public_timeline: { id: 'column.filters.public_timeline', defaultMessage: 'Public timeline' }, + notifications: { id: 'column.filters.notifications', defaultMessage: 'Notifications' }, + conversations: { id: 'column.filters.conversations', defaultMessage: 'Conversations' }, + drop_header: { id: 'column.filters.drop_header', defaultMessage: 'Drop instead of hide' }, + drop_hint: { id: 'column.filters.drop_hint', defaultMessage: 'Filtered posts will disappear irreversibly, even if filter is later removed' }, + whole_word_header: { id: 'column.filters.whole_word_header', defaultMessage: 'Whole word' }, + whole_word_hint: { id: 'column.filters.whole_word_hint', defaultMessage: 'When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word' }, + add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Muted Word' }, + error: { id: 'column.filters.error', defaultMessage: 'Error adding filter' }, }); +const expirations = { + 1800: 'Never', + 3600: '30 minutes', + 21600: '1 hour', + 43200: '12 hours', + 86400 : '1 day', + 604800: '1 week', +}; + const mapStateToProps = state => ({ filters: state.get('filters'), }); + export default @connect(mapStateToProps) @injectIntl class Filters extends ImmutablePureComponent { @@ -24,17 +57,152 @@ class Filters extends ImmutablePureComponent { intl: PropTypes.object.isRequired, }; + state = { + phrase: '', + expires_at: '', + context: { + home_timeline: false, + public_timeline: false, + notifications: false, + conversations: false, + }, + irreversible: false, + whole_word: true, + } + + componentDidMount() { this.props.dispatch(fetchFilters()); } + handleInputChange = e => { + this.setState({ [e.target.name]: e.target.value }); + } + + handleSelectChange = e => { + this.setState({ [e.target.name]: e.target.value }); + } + + handleCheckboxChange = e => { + this.setState({ [e.target.name]: e.target.checked }); + } + + handleAddNew = e => { + e.preventDefault(); + const { intl, dispatch } = this.state; + const { phrase, context, whole_word, expires_at } = this.state; + dispatch(createFilter(phrase, context, whole_word, expires_at)).then(response => { + dispatch(fetchFilters()); + }).catch(error => { + dispatch(showAlert('', intl.formatMessage(messages.error))); + }); + } + + render() { - const { intl } = this.props; + const { intl, filters } = this.props; const emptyMessage = ; return ( - {emptyMessage} + + +
+

+ +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + +
); }