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}
+
+
+
+
+
+
+
+
+
+
+
+
+ {filters.map((filter, i) => (
+
+ ))}
+
+
+
+
+
+
+
+
);
}