From bdd9204b3c6ba6f67a6196b4d606c99191d572aa Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Tue, 4 Aug 2020 15:21:42 -0500 Subject: [PATCH 1/3] basic filter form component set up --- app/soapbox/components/sidebar_menu.js | 4 +- .../features/compose/components/action_bar.js | 2 +- app/soapbox/features/filters/index.js | 174 +++++++++++++++++- 3 files changed, 174 insertions(+), 6 deletions(-) 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} + + +
+

+ +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ + + + + ); } From 69184ef97c9664fb979eba759ad786706d57f42b Mon Sep 17 00:00:00 2001 From: Mary Kate Date: Tue, 4 Aug 2020 21:15:16 -0500 Subject: [PATCH 2/3] add and remove muted words, filters --- app/soapbox/actions/filters.js | 29 +++++- app/soapbox/features/filters/index.js | 130 ++++++++++++++++++-------- app/soapbox/features/forms/index.js | 9 +- app/styles/application.scss | 1 + app/styles/components/filters.scss | 72 ++++++++++++++ 5 files changed, 199 insertions(+), 42 deletions(-) create mode 100644 app/styles/components/filters.scss diff --git a/app/soapbox/actions/filters.js b/app/soapbox/actions/filters.js index cff647de3..3448e391c 100644 --- a/app/soapbox/actions/filters.js +++ b/app/soapbox/actions/filters.js @@ -1,4 +1,5 @@ import api from '../api'; +import { showAlert } from 'soapbox/actions/alerts'; export const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST'; export const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS'; @@ -8,6 +9,10 @@ export const FILTERS_CREATE_REQUEST = 'FILTERS_CREATE_REQUEST'; export const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS'; export const FILTERS_CREATE_FAIL = 'FILTERS_CREATE_FAIL'; +export const FILTERS_DELETE_REQUEST = 'FILTERS_DELETE_REQUEST'; +export const FILTERS_DELETE_SUCCESS = 'FILTERS_DELETE_SUCCESS'; +export const FILTERS_DELETE_FAIL = 'FILTERS_DELETE_FAIL'; + export const fetchFilters = () => (dispatch, getState) => { if (!getState().get('me')) return; @@ -31,13 +36,33 @@ export const fetchFilters = () => (dispatch, getState) => { })); }; -export function createFilter(params) { +export function createFilter(phrase, expires_at, context, whole_word, irreversible) { return (dispatch, getState) => { dispatch({ type: FILTERS_CREATE_REQUEST }); - return api(getState).post('/api/v1/filters', params).then(response => { + return api(getState).post('/api/v1/filters', { + phrase, + context, + irreversible, + whole_word, + expires_at, + }).then(response => { dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data }); + dispatch(showAlert('', 'Filter added')); }).catch(error => { dispatch({ type: FILTERS_CREATE_FAIL, error }); }); }; } + + +export function deleteFilter(id) { + return (dispatch, getState) => { + dispatch({ type: FILTERS_DELETE_REQUEST }); + return api(getState).delete('/api/v1/filters/'+id).then(response => { + dispatch({ type: FILTERS_DELETE_SUCCESS, filter: response.data }); + dispatch(showAlert('', 'Filter deleted')); + }).catch(error => { + dispatch({ type: FILTERS_DELETE_FAIL, error }); + }); + }; +} diff --git a/app/soapbox/features/filters/index.js b/app/soapbox/features/filters/index.js index 0d603347a..c1a2a66f9 100644 --- a/app/soapbox/features/filters/index.js +++ b/app/soapbox/features/filters/index.js @@ -4,23 +4,26 @@ 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, createFilter } from '../../actions/filters'; +import { fetchFilters, createFilter, deleteFilter } 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'; +import Icon from 'soapbox/components/icon'; +import ColumnSubheading from '../ui/components/column_subheading'; const messages = defineMessages({ heading: { id: 'column.filters', defaultMessage: 'Muted words' }, + subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' }, keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' }, expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' }, + expires_hint: { id: 'column.filters.expires_hint', defaultMessage: 'Expiration dates are not currently supported' }, 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' }, @@ -29,17 +32,20 @@ const messages = defineMessages({ 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' }, + add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Filter' }, + create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' }, + delete_error: { id: 'column.filters.delete_error', defaultMessage: 'Error deleting filter' }, + subheading_filters: { id: 'column.filters.subheading_filters', defaultMessage: 'Current Filters' }, + delete: { id: 'column.filters.delete', defaultMessage: 'Delete' }, }); const expirations = { - 1800: 'Never', - 3600: '30 minutes', - 21600: '1 hour', - 43200: '12 hours', - 86400 : '1 day', - 604800: '1 week', + null: 'Never', + // 3600: '30 minutes', + // 21600: '1 hour', + // 43200: '12 hours', + // 86400 : '1 day', + // 604800: '1 week', }; const mapStateToProps = state => ({ @@ -60,12 +66,10 @@ class Filters extends ImmutablePureComponent { state = { phrase: '', expires_at: '', - context: { - home_timeline: false, - public_timeline: false, - notifications: false, - conversations: false, - }, + home_timeline: true, + public_timeline: false, + notifications: false, + conversations: false, irreversible: false, whole_word: true, } @@ -89,12 +93,37 @@ class Filters extends ImmutablePureComponent { 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()); + const { intl, dispatch } = this.props; + const { phrase, whole_word, expires_at, irreversible } = this.state; + const { home_timeline, public_timeline, notifications, conversations } = this.state; + let context = []; + + if (home_timeline) { + context.push('home'); + }; + if (public_timeline) { + context.push('public'); + }; + if (notifications) { + context.push('notifications'); + }; + if (conversations) { + context.push('thread'); + }; + + dispatch(createFilter(phrase, expires_at, context, whole_word, irreversible)).then(response => { + return dispatch(fetchFilters()); }).catch(error => { - dispatch(showAlert('', intl.formatMessage(messages.error))); + dispatch(showAlert('', intl.formatMessage(messages.create_error))); + }); + } + + handleFilterDelete = e => { + const { intl, dispatch } = this.props; + dispatch(deleteFilter(e.currentTarget.dataset.value)).then(response => { + return dispatch(fetchFilters()); + }).catch(error => { + dispatch(showAlert('', intl.formatMessage(messages.delete_error))); }); } @@ -104,14 +133,10 @@ class Filters extends ImmutablePureComponent { const emptyMessage = ; return ( - - + +
-

- -

-
@@ -119,12 +144,13 @@ class Filters extends ImmutablePureComponent { label={intl.formatMessage(messages.keyword)} required type='text' - name='custom_filter_phrase' + name='phrase' onChange={this.handleInputChange} /> @@ -183,16 +209,46 @@ class Filters extends ImmutablePureComponent {
-