From 50487db1224851a49ee523bbc013d5f8686a7a55 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 25 Aug 2022 04:27:47 +0200 Subject: Add ability to filter individual posts (#18945) * Add database table for status-specific filters * Add REST endpoints, entities and attributes * Show status filters in /filters interface * Perform server-side filtering for individual posts filters * Fix filtering on context mismatch * Refactor `toServerSideType` by moving it to its own module * Move loupe and delete icons to their own module * Add ability to filter individual posts from WebUI * Replace keyword list by warnings (expired, context mismatch) * Refactor server-side filtering code * Add tests --- app/javascript/mastodon/actions/filters.js | 93 ++++++++++ app/javascript/mastodon/actions/statuses.js | 4 +- app/javascript/mastodon/components/status.js | 1 + .../mastodon/components/status_action_bar.js | 16 +- .../mastodon/containers/status_container.js | 9 +- .../compose/components/language_dropdown.js | 19 +- .../mastodon/features/filters/added_to_filter.js | 102 +++++++++++ .../mastodon/features/filters/select_filter.js | 192 +++++++++++++++++++++ .../features/ui/components/filter_modal.js | 134 ++++++++++++++ .../mastodon/features/ui/components/modal_root.js | 2 + .../mastodon/features/ui/util/async-components.js | 4 + app/javascript/mastodon/reducers/filters.js | 11 +- app/javascript/mastodon/selectors/index.js | 19 +- app/javascript/mastodon/utils/filters.js | 16 ++ app/javascript/mastodon/utils/icons.js | 13 ++ app/javascript/styles/mastodon/components.scss | 18 ++ 16 files changed, 611 insertions(+), 42 deletions(-) create mode 100644 app/javascript/mastodon/actions/filters.js create mode 100644 app/javascript/mastodon/features/filters/added_to_filter.js create mode 100644 app/javascript/mastodon/features/filters/select_filter.js create mode 100644 app/javascript/mastodon/features/ui/components/filter_modal.js create mode 100644 app/javascript/mastodon/utils/filters.js create mode 100644 app/javascript/mastodon/utils/icons.js (limited to 'app/javascript') diff --git a/app/javascript/mastodon/actions/filters.js b/app/javascript/mastodon/actions/filters.js new file mode 100644 index 000000000..76326802e --- /dev/null +++ b/app/javascript/mastodon/actions/filters.js @@ -0,0 +1,93 @@ +import api from '../api'; +import { openModal } from './modal'; + +export const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST'; +export const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS'; +export const FILTERS_FETCH_FAIL = 'FILTERS_FETCH_FAIL'; + +export const FILTERS_STATUS_CREATE_REQUEST = 'FILTERS_STATUS_CREATE_REQUEST'; +export const FILTERS_STATUS_CREATE_SUCCESS = 'FILTERS_STATUS_CREATE_SUCCESS'; +export const FILTERS_STATUS_CREATE_FAIL = 'FILTERS_STATUS_CREATE_FAIL'; + +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 initAddFilter = (status, { contextType }) => dispatch => + dispatch(openModal('FILTER', { + statusId: status?.get('id'), + contextType: contextType, + })); + +export const fetchFilters = () => (dispatch, getState) => { + dispatch({ + type: FILTERS_FETCH_REQUEST, + skipLoading: true, + }); + + api(getState) + .get('/api/v2/filters') + .then(({ data }) => dispatch({ + type: FILTERS_FETCH_SUCCESS, + filters: data, + skipLoading: true, + })) + .catch(err => dispatch({ + type: FILTERS_FETCH_FAIL, + err, + skipLoading: true, + skipAlert: true, + })); +}; + +export const createFilterStatus = (params, onSuccess, onFail) => (dispatch, getState) => { + dispatch(createFilterStatusRequest()); + + api(getState).post(`/api/v1/filters/${params.filter_id}/statuses`, params).then(response => { + dispatch(createFilterStatusSuccess(response.data)); + if (onSuccess) onSuccess(); + }).catch(error => { + dispatch(createFilterStatusFail(error)); + if (onFail) onFail(); + }); +}; + +export const createFilterStatusRequest = () => ({ + type: FILTERS_STATUS_CREATE_REQUEST, +}); + +export const createFilterStatusSuccess = filter_status => ({ + type: FILTERS_STATUS_CREATE_SUCCESS, + filter_status, +}); + +export const createFilterStatusFail = error => ({ + type: FILTERS_STATUS_CREATE_FAIL, + error, +}); + +export const createFilter = (params, onSuccess, onFail) => (dispatch, getState) => { + dispatch(createFilterRequest()); + + api(getState).post('/api/v2/filters', params).then(response => { + dispatch(createFilterSuccess(response.data)); + if (onSuccess) onSuccess(response.data); + }).catch(error => { + dispatch(createFilterFail(error)); + if (onFail) onFail(); + }); +}; + +export const createFilterRequest = () => ({ + type: FILTERS_CREATE_REQUEST, +}); + +export const createFilterSuccess = filter => ({ + type: FILTERS_CREATE_SUCCESS, + filter, +}); + +export const createFilterFail = error => ({ + type: FILTERS_CREATE_FAIL, + error, +}); diff --git a/app/javascript/mastodon/actions/statuses.js b/app/javascript/mastodon/actions/statuses.js index adc24eabf..32a4f1f85 100644 --- a/app/javascript/mastodon/actions/statuses.js +++ b/app/javascript/mastodon/actions/statuses.js @@ -42,9 +42,9 @@ export function fetchStatusRequest(id, skipLoading) { }; }; -export function fetchStatus(id) { +export function fetchStatus(id, forceFetch = false) { return (dispatch, getState) => { - const skipLoading = getState().getIn(['statuses', id], null) !== null; + const skipLoading = !forceFetch && getState().getIn(['statuses', id], null) !== null; dispatch(fetchContext(id)); diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index dee935a6c..d36311c67 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -80,6 +80,7 @@ class Status extends ImmutablePureComponent { onOpenMedia: PropTypes.func, onOpenVideo: PropTypes.func, onBlock: PropTypes.func, + onAddFilter: PropTypes.func, onEmbed: PropTypes.func, onHeightChange: PropTypes.func, onToggleHidden: PropTypes.func, diff --git a/app/javascript/mastodon/components/status_action_bar.js b/app/javascript/mastodon/components/status_action_bar.js index d44da482d..4b384e6e5 100644 --- a/app/javascript/mastodon/components/status_action_bar.js +++ b/app/javascript/mastodon/components/status_action_bar.js @@ -44,6 +44,7 @@ const messages = defineMessages({ unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' }, unmute: { id: 'account.unmute', defaultMessage: 'Unmute @{name}' }, unblock: { id: 'account.unblock', defaultMessage: 'Unblock @{name}' }, + filter: { id: 'status.filter', defaultMessage: 'Filter this post' }, }); const mapStateToProps = (state, { status }) => ({ @@ -80,6 +81,7 @@ class StatusActionBar extends ImmutablePureComponent { onPin: PropTypes.func, onBookmark: PropTypes.func, onFilter: PropTypes.func, + onAddFilter: PropTypes.func, withDismiss: PropTypes.bool, withCounters: PropTypes.bool, scrollKey: PropTypes.string, @@ -211,8 +213,8 @@ class StatusActionBar extends ImmutablePureComponent { this.props.onMuteConversation(this.props.status); } - handleFilter = () => { - this.props.onFilter(); + handleFilterClick = () => { + this.props.onAddFilter(this.props.status); } handleCopy = () => { @@ -235,7 +237,7 @@ class StatusActionBar extends ImmutablePureComponent { } - handleFilterClick = () => { + handleHideClick = () => { this.props.onFilter(); } @@ -294,6 +296,12 @@ class StatusActionBar extends ImmutablePureComponent { menu.push({ text: intl.formatMessage(messages.block, { name: account.get('username') }), action: this.handleBlockClick }); } + if (!this.props.onFilter) { + menu.push(null); + menu.push({ text: intl.formatMessage(messages.filter), action: this.handleFilterClick }); + menu.push(null); + } + menu.push({ text: intl.formatMessage(messages.report, { name: account.get('username') }), action: this.handleReport }); if (account.get('acct') !== account.get('username')) { @@ -343,7 +351,7 @@ class StatusActionBar extends ImmutablePureComponent { ); const filterButton = this.props.onFilter && ( - + ); return ( diff --git a/app/javascript/mastodon/containers/status_container.js b/app/javascript/mastodon/containers/status_container.js index ef0aca13a..28698b082 100644 --- a/app/javascript/mastodon/containers/status_container.js +++ b/app/javascript/mastodon/containers/status_container.js @@ -34,6 +34,9 @@ import { blockDomain, unblockDomain, } from '../actions/domain_blocks'; +import { + initAddFilter, +} from '../actions/filters'; import { initMuteModal } from '../actions/mutes'; import { initBlockModal } from '../actions/blocks'; import { initBoostModal } from '../actions/boosts'; @@ -66,7 +69,7 @@ const makeMapStateToProps = () => { return mapStateToProps; }; -const mapDispatchToProps = (dispatch, { intl }) => ({ +const mapDispatchToProps = (dispatch, { intl, contextType }) => ({ onReply (status, router) { dispatch((_, getState) => { @@ -176,6 +179,10 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(initReport(status.get('account'), status)); }, + onAddFilter (status) { + dispatch(initAddFilter(status, { contextType })); + }, + onMute (account) { dispatch(initMuteModal(account)); }, diff --git a/app/javascript/mastodon/features/compose/components/language_dropdown.js b/app/javascript/mastodon/features/compose/components/language_dropdown.js index d76490c77..0af3db7a4 100644 --- a/app/javascript/mastodon/features/compose/components/language_dropdown.js +++ b/app/javascript/mastodon/features/compose/components/language_dropdown.js @@ -8,6 +8,7 @@ import spring from 'react-motion/lib/spring'; import { supportsPassiveEvents } from 'detect-passive-events'; import classNames from 'classnames'; import { languages as preloadedLanguages } from 'mastodon/initial_state'; +import { loupeIcon, deleteIcon } from 'mastodon/utils/icons'; import fuzzysort from 'fuzzysort'; const messages = defineMessages({ @@ -16,22 +17,6 @@ const messages = defineMessages({ clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' }, }); -// Copied from emoji-mart for consistency with emoji picker and since -// they don't export the icons in the package -const icons = { - loupe: ( - - - - ), - - delete: ( - - - - ), -}; - const listenerOptions = supportsPassiveEvents ? { passive: true } : false; class LanguageDropdownMenu extends React.PureComponent { @@ -242,7 +227,7 @@ class LanguageDropdownMenu extends React.PureComponent {
- +
diff --git a/app/javascript/mastodon/features/filters/added_to_filter.js b/app/javascript/mastodon/features/filters/added_to_filter.js new file mode 100644 index 000000000..3785eb3c5 --- /dev/null +++ b/app/javascript/mastodon/features/filters/added_to_filter.js @@ -0,0 +1,102 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { FormattedMessage } from 'react-intl'; +import { toServerSideType } from 'mastodon/utils/filters'; +import Button from 'mastodon/components/button'; +import { connect } from 'react-redux'; + +const mapStateToProps = (state, { filterId }) => ({ + filter: state.getIn(['filters', filterId]), +}); + +export default @connect(mapStateToProps) +class AddedToFilter extends React.PureComponent { + + static propTypes = { + onClose: PropTypes.func.isRequired, + contextType: PropTypes.string, + filter: ImmutablePropTypes.map.isRequired, + dispatch: PropTypes.func.isRequired, + }; + + handleCloseClick = () => { + const { onClose } = this.props; + onClose(); + }; + + render () { + const { filter, contextType } = this.props; + + let expiredMessage = null; + if (filter.get('expires_at') && filter.get('expires_at') < new Date()) { + expiredMessage = ( + +

+

+ +

+ + ); + } + + let contextMismatchMessage = null; + if (contextType && !filter.get('context').includes(toServerSideType(contextType))) { + contextMismatchMessage = ( + +

+

+ +

+ + ); + } + + const settings_link = ( + + + + ); + + return ( + +

+

+ +

+ + {expiredMessage} + {contextMismatchMessage} + +

+

+ +

+ +
+ +
+ +
+ + ); + } + +} diff --git a/app/javascript/mastodon/features/filters/select_filter.js b/app/javascript/mastodon/features/filters/select_filter.js new file mode 100644 index 000000000..b5b354529 --- /dev/null +++ b/app/javascript/mastodon/features/filters/select_filter.js @@ -0,0 +1,192 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { toServerSideType } from 'mastodon/utils/filters'; +import { loupeIcon, deleteIcon } from 'mastodon/utils/icons'; +import Icon from 'mastodon/components/icon'; +import fuzzysort from 'fuzzysort'; + +const messages = defineMessages({ + search: { id: 'filter_modal.select_filter.search', defaultMessage: 'Search or create' }, + clear: { id: 'emoji_button.clear', defaultMessage: 'Clear' }, +}); + +const mapStateToProps = (state, { contextType }) => ({ + filters: Array.from(state.get('filters').values()).map((filter) => [ + filter.get('id'), + filter.get('title'), + filter.get('keywords')?.map((keyword) => keyword.get('keyword')).join('\n'), + filter.get('expires_at') && filter.get('expires_at') < new Date(), + contextType && !filter.get('context').includes(toServerSideType(contextType)), + ]), +}); + +export default @connect(mapStateToProps) +@injectIntl +class SelectFilter extends React.PureComponent { + + static propTypes = { + onSelectFilter: PropTypes.func.isRequired, + onNewFilter: PropTypes.func.isRequired, + filters: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.object)), + intl: PropTypes.object.isRequired, + }; + + state = { + searchValue: '', + }; + + search () { + const { filters } = this.props; + const { searchValue } = this.state; + + if (searchValue === '') { + return filters; + } + + return fuzzysort.go(searchValue, filters, { + keys: ['1', '2'], + limit: 5, + threshold: -10000, + }).map(result => result.obj); + } + + renderItem = filter => { + let warning = null; + if (filter[3] || filter[4]) { + warning = ( + + ( + {filter[3] && } + {filter[3] && filter[4] && ', '} + {filter[4] && } + ) + + ); + } + + return ( +
+ {filter[1]} {warning} +
+ ); + } + + renderCreateNew (name) { + return ( +
+ +
+ ); + } + + handleSearchChange = ({ target }) => { + this.setState({ searchValue: target.value }); + } + + setListRef = c => { + this.listNode = c; + } + + handleKeyDown = e => { + const index = Array.from(this.listNode.childNodes).findIndex(node => node === e.currentTarget); + + let element = null; + + switch(e.key) { + case ' ': + case 'Enter': + e.currentTarget.click(); + break; + case 'ArrowDown': + element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; + break; + case 'ArrowUp': + element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; + break; + case 'Tab': + if (e.shiftKey) { + element = this.listNode.childNodes[index - 1] || this.listNode.lastChild; + } else { + element = this.listNode.childNodes[index + 1] || this.listNode.firstChild; + } + break; + case 'Home': + element = this.listNode.firstChild; + break; + case 'End': + element = this.listNode.lastChild; + break; + } + + if (element) { + element.focus(); + e.preventDefault(); + e.stopPropagation(); + } + } + + handleSearchKeyDown = e => { + let element = null; + + switch(e.key) { + case 'Tab': + case 'ArrowDown': + element = this.listNode.firstChild; + + if (element) { + element.focus(); + e.preventDefault(); + e.stopPropagation(); + } + + break; + } + } + + handleClear = () => { + this.setState({ searchValue: '' }); + } + + handleItemClick = e => { + const value = e.currentTarget.getAttribute('data-index'); + + e.preventDefault(); + + this.props.onSelectFilter(value); + } + + handleNewFilterClick = e => { + e.preventDefault(); + + this.props.onNewFilter(this.state.searchValue); + }; + + render () { + const { intl } = this.props; + + const { searchValue } = this.state; + const isSearching = searchValue !== ''; + const results = this.search(); + + return ( + +

+

+ +
+ + +
+ +
+ {results.map(this.renderItem)} + {isSearching && this.renderCreateNew(searchValue) } +
+ + + ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/filter_modal.js b/app/javascript/mastodon/features/ui/components/filter_modal.js new file mode 100644 index 000000000..376db961d --- /dev/null +++ b/app/javascript/mastodon/features/ui/components/filter_modal.js @@ -0,0 +1,134 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import { fetchStatus } from 'mastodon/actions/statuses'; +import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions/filters'; +import PropTypes from 'prop-types'; +import { defineMessages, FormattedMessage, injectIntl } from 'react-intl'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import IconButton from 'mastodon/components/icon_button'; +import SelectFilter from 'mastodon/features/filters/select_filter'; +import AddedToFilter from 'mastodon/features/filters/added_to_filter'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); + +export default @connect(undefined) +@injectIntl +class FilterModal extends ImmutablePureComponent { + + static propTypes = { + statusId: PropTypes.string.isRequired, + contextType: PropTypes.string, + dispatch: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + state = { + step: 'select', + filterId: null, + isSubmitting: false, + isSubmitted: false, + }; + + handleNewFilterSuccess = (result) => { + this.handleSelectFilter(result.id); + }; + + handleSuccess = () => { + const { dispatch, statusId } = this.props; + dispatch(fetchStatus(statusId, true)); + this.setState({ isSubmitting: false, isSubmitted: true, step: 'submitted' }); + }; + + handleFail = () => { + this.setState({ isSubmitting: false }); + }; + + handleNextStep = step => { + this.setState({ step }); + }; + + handleSelectFilter = (filterId) => { + const { dispatch, statusId } = this.props; + + this.setState({ isSubmitting: true, filterId }); + + dispatch(createFilterStatus({ + filter_id: filterId, + status_id: statusId, + }, this.handleSuccess, this.handleFail)); + }; + + handleNewFilter = (title) => { + const { dispatch } = this.props; + + this.setState({ isSubmitting: true }); + + dispatch(createFilter({ + title, + context: ['home', 'notifications', 'public', 'thread', 'account'], + action: 'warn', + }, this.handleNewFilterSuccess, this.handleFail)); + }; + + componentDidMount () { + const { dispatch } = this.props; + + dispatch(fetchFilters()); + } + + render () { + const { + intl, + statusId, + contextType, + onClose, + } = this.props; + + const { + step, + filterId, + } = this.state; + + let stepComponent; + + switch(step) { + case 'select': + stepComponent = ( + + ); + break; + case 'create': + stepComponent = null; + break; + case 'submitted': + stepComponent = ( + + ); + } + + return ( +
+
+ + +
+ +
+ {stepComponent} +
+
+ ); + } + +} diff --git a/app/javascript/mastodon/features/ui/components/modal_root.js b/app/javascript/mastodon/features/ui/components/modal_root.js index 3fc235849..b2c30e079 100644 --- a/app/javascript/mastodon/features/ui/components/modal_root.js +++ b/app/javascript/mastodon/features/ui/components/modal_root.js @@ -20,6 +20,7 @@ import { ListEditor, ListAdder, CompareHistoryModal, + FilterModal, } from 'mastodon/features/ui/util/async-components'; const MODAL_COMPONENTS = { @@ -37,6 +38,7 @@ const MODAL_COMPONENTS = { 'FOCAL_POINT': () => Promise.resolve({ default: FocalPointModal }), 'LIST_ADDER': ListAdder, 'COMPARE_HISTORY': CompareHistoryModal, + 'FILTER': FilterModal, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/util/async-components.js b/app/javascript/mastodon/features/ui/util/async-components.js index 92c683e2f..29b06206a 100644 --- a/app/javascript/mastodon/features/ui/util/async-components.js +++ b/app/javascript/mastodon/features/ui/util/async-components.js @@ -161,3 +161,7 @@ export function CompareHistoryModal () { export function Explore () { return import(/* webpackChunkName: "features/explore" */'../../explore'); } + +export function FilterModal () { + return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal'); +} diff --git a/app/javascript/mastodon/reducers/filters.js b/app/javascript/mastodon/reducers/filters.js index 14b704027..cc1d3349c 100644 --- a/app/javascript/mastodon/reducers/filters.js +++ b/app/javascript/mastodon/reducers/filters.js @@ -1,4 +1,5 @@ import { FILTERS_IMPORT } from '../actions/importer'; +import { FILTERS_FETCH_SUCCESS, FILTERS_CREATE_SUCCESS } from '../actions/filters'; import { Map as ImmutableMap, is, fromJS } from 'immutable'; const normalizeFilter = (state, filter) => { @@ -7,13 +8,17 @@ const normalizeFilter = (state, filter) => { title: filter.title, context: filter.context, filter_action: filter.filter_action, + keywords: filter.keywords, expires_at: filter.expires_at ? Date.parse(filter.expires_at) : null, }); if (is(state.get(filter.id), normalizedFilter)) { return state; } else { - return state.set(filter.id, normalizedFilter); + // Do not overwrite keywords when receiving a partial filter + return state.update(filter.id, ImmutableMap(), (old) => ( + old.mergeWith(((old_value, new_value) => (new_value === undefined ? old_value : new_value)), normalizedFilter) + )); } }; @@ -27,6 +32,10 @@ const normalizeFilters = (state, filters) => { export default function filters(state = ImmutableMap(), action) { switch(action.type) { + case FILTERS_CREATE_SUCCESS: + return normalizeFilter(state, action.filter); + case FILTERS_FETCH_SUCCESS: + //TODO: handle deleting obsolete filters case FILTERS_IMPORT: return normalizeFilters(state, action.filters); default: diff --git a/app/javascript/mastodon/selectors/index.js b/app/javascript/mastodon/selectors/index.js index 187e3306d..3dd7f4897 100644 --- a/app/javascript/mastodon/selectors/index.js +++ b/app/javascript/mastodon/selectors/index.js @@ -1,5 +1,6 @@ import { createSelector } from 'reselect'; import { List as ImmutableList, Map as ImmutableMap } from 'immutable'; +import { toServerSideType } from 'mastodon/utils/filters'; import { me } from '../initial_state'; const getAccountBase = (state, id) => state.getIn(['accounts', id], null); @@ -20,23 +21,6 @@ export const makeGetAccount = () => { }); }; -const toServerSideType = columnType => { - switch (columnType) { - case 'home': - case 'notifications': - case 'public': - case 'thread': - case 'account': - return columnType; - default: - if (columnType.indexOf('list:') > -1) { - return 'home'; - } else { - return 'public'; // community, account, hashtag - } - } -}; - const getFilters = (state, { contextType }) => { if (!contextType) return null; @@ -73,6 +57,7 @@ export const makeGetStatus = () => { if (filterResults.some((result) => filters.getIn([result.get('filter'), 'filter_action']) === 'hide')) { return null; } + filterResults = filterResults.filter(result => filters.has(result.get('filter'))); if (!filterResults.isEmpty()) { filtered = filterResults.map(result => filters.getIn([result.get('filter'), 'title'])); } diff --git a/app/javascript/mastodon/utils/filters.js b/app/javascript/mastodon/utils/filters.js new file mode 100644 index 000000000..97b433a99 --- /dev/null +++ b/app/javascript/mastodon/utils/filters.js @@ -0,0 +1,16 @@ +export const toServerSideType = columnType => { + switch (columnType) { + case 'home': + case 'notifications': + case 'public': + case 'thread': + case 'account': + return columnType; + default: + if (columnType.indexOf('list:') > -1) { + return 'home'; + } else { + return 'public'; // community, account, hashtag + } + } +}; diff --git a/app/javascript/mastodon/utils/icons.js b/app/javascript/mastodon/utils/icons.js new file mode 100644 index 000000000..be566032e --- /dev/null +++ b/app/javascript/mastodon/utils/icons.js @@ -0,0 +1,13 @@ +// Copied from emoji-mart for consistency with emoji picker and since +// they don't export the icons in the package +export const loupeIcon = ( + + + +); + +export const deleteIcon = ( + + + +); diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index a0a39812b..f5377a858 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -5233,6 +5233,16 @@ a.status-card.compact:hover { line-height: 22px; color: lighten($inverted-text-color, 16%); margin-bottom: 30px; + + a { + text-decoration: none; + color: $inverted-text-color; + font-weight: 500; + + &:hover { + text-decoration: underline; + } + } } &__actions { @@ -5379,6 +5389,14 @@ a.status-card.compact:hover { background: transparent; margin: 15px 0; } + + .emoji-mart-search { + padding-right: 10px; + } + + .emoji-mart-search-icon { + right: 10px + 5px; + } } .report-modal__container { -- cgit From afb8bc97d08c2738da7873ca42fea68e4672d65b Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 25 Aug 2022 04:29:00 +0200 Subject: Fix quickly switching notification filters resulting in empty or incorrect list (#18960) --- app/javascript/mastodon/actions/notifications.js | 6 +++--- app/javascript/mastodon/reducers/notifications.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js index 3c42f71da..7f62e6c04 100644 --- a/app/javascript/mastodon/actions/notifications.js +++ b/app/javascript/mastodon/actions/notifications.js @@ -141,13 +141,13 @@ const excludeTypesFromFilter = filter => { const noOp = () => {}; -export function expandNotifications({ maxId } = {}, done = noOp) { +export function expandNotifications({ maxId, forceLoad } = {}, done = noOp) { return (dispatch, getState) => { const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']); const notifications = getState().get('notifications'); const isLoadingMore = !!maxId; - if (notifications.get('isLoading')) { + if (notifications.get('isLoading') && !forceLoad) { done(); return; } @@ -243,7 +243,7 @@ export function setFilter (filterType) { path: ['notifications', 'quickFilter', 'active'], value: filterType, }); - dispatch(expandNotifications()); + dispatch(expandNotifications({ forceLoad: true })); dispatch(saveSettings()); }; }; diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js index 4563118ea..eb34edb63 100644 --- a/app/javascript/mastodon/reducers/notifications.js +++ b/app/javascript/mastodon/reducers/notifications.js @@ -41,7 +41,7 @@ const initialState = ImmutableMap({ lastReadId: '0', readMarkerId: '0', isTabVisible: true, - isLoading: false, + isLoading: 0, browserSupport: false, browserPermission: 'default', }); @@ -115,7 +115,7 @@ const expandNormalizedNotifications = (state, notifications, next, isLoadingRece } } - mutable.set('isLoading', false); + mutable.update('isLoading', (nbLoading) => nbLoading - 1); }); }; @@ -214,9 +214,9 @@ export default function notifications(state = initialState, action) { case NOTIFICATIONS_LOAD_PENDING: return state.update('items', list => state.get('pendingItems').concat(list.take(40))).set('pendingItems', ImmutableList()).set('unread', 0); case NOTIFICATIONS_EXPAND_REQUEST: - return state.set('isLoading', true); + return state.update('isLoading', (nbLoading) => nbLoading + 1); case NOTIFICATIONS_EXPAND_FAIL: - return state.set('isLoading', false); + return state.update('isLoading', (nbLoading) => nbLoading - 1); case NOTIFICATIONS_FILTER_SET: return state.set('items', ImmutableList()).set('pendingItems', ImmutableList()).set('hasMore', true); case NOTIFICATIONS_SCROLL_TOP: -- cgit From ba745ca99a4ce4b953e11776827aabb68d621e79 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 25 Aug 2022 04:30:53 +0200 Subject: Fix media modal link button (#18877) Fixes regression from #18697 --- app/javascript/mastodon/components/icon_button.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/icon_button.js b/app/javascript/mastodon/components/icon_button.js index 81743a1db..47945c475 100644 --- a/app/javascript/mastodon/components/icon_button.js +++ b/app/javascript/mastodon/components/icon_button.js @@ -131,17 +131,9 @@ export default class IconButton extends React.PureComponent { ); - if (href) { - return ( - + if (href && !this.prop) { + contents = ( + {contents} ); -- cgit From 66b8abf218a87e65fab8a7fae6fc6ea73c41d750 Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Thu, 25 Aug 2022 11:37:40 +0900 Subject: Fix case where boolean was passed to onFilter on StatusActionBar (#18923) --- app/javascript/mastodon/components/status.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js index d36311c67..6fc132bf5 100644 --- a/app/javascript/mastodon/components/status.js +++ b/app/javascript/mastodon/components/status.js @@ -516,7 +516,7 @@ class Status extends ImmutablePureComponent { {media} - +
-- cgit From 5d70a16a1417e53b0c6cc97def9688fda21f337c Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Thu, 25 Aug 2022 11:38:01 +0900 Subject: Fix action type for unfollowHashtag (#18924) --- app/javascript/mastodon/actions/tags.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/mastodon/actions/tags.js b/app/javascript/mastodon/actions/tags.js index 216e5b541..37e79d4cb 100644 --- a/app/javascript/mastodon/actions/tags.js +++ b/app/javascript/mastodon/actions/tags.js @@ -75,18 +75,18 @@ export const unfollowHashtag = name => (dispatch, getState) => { }; export const unfollowHashtagRequest = name => ({ - type: HASHTAG_FETCH_REQUEST, + type: HASHTAG_UNFOLLOW_REQUEST, name, }); export const unfollowHashtagSuccess = (name, tag) => ({ - type: HASHTAG_FETCH_SUCCESS, + type: HASHTAG_UNFOLLOW_SUCCESS, name, tag, }); export const unfollowHashtagFail = (name, error) => ({ - type: HASHTAG_FETCH_FAIL, + type: HASHTAG_UNFOLLOW_FAIL, name, error, }); -- cgit From 68564a622ca812f7ce512aaa02d8dccfb9c70a1e Mon Sep 17 00:00:00 2001 From: Takeshi Umeda Date: Thu, 25 Aug 2022 11:38:01 +0900 Subject: [Glitch] Fix action type for unfollowHashtag Port 5d70a16a1417e53b0c6cc97def9688fda21f337c to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/tags.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/actions/tags.js b/app/javascript/flavours/glitch/actions/tags.js index 3933da8ba..4016cf96f 100644 --- a/app/javascript/flavours/glitch/actions/tags.js +++ b/app/javascript/flavours/glitch/actions/tags.js @@ -75,18 +75,18 @@ export const unfollowHashtag = name => (dispatch, getState) => { }; export const unfollowHashtagRequest = name => ({ - type: HASHTAG_FETCH_REQUEST, + type: HASHTAG_UNFOLLOW_REQUEST, name, }); export const unfollowHashtagSuccess = (name, tag) => ({ - type: HASHTAG_FETCH_SUCCESS, + type: HASHTAG_UNFOLLOW_SUCCESS, name, tag, }); export const unfollowHashtagFail = (name, error) => ({ - type: HASHTAG_FETCH_FAIL, + type: HASHTAG_UNFOLLOW_FAIL, name, error, }); -- cgit From 3c80b62045b59f197ea5003357c03b16c1b1bac7 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 25 Aug 2022 04:30:53 +0200 Subject: [Glitch] Fix media modal link button Port ba745ca99a4ce4b953e11776827aabb68d621e79 to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/components/icon_button.js | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/components/icon_button.js b/app/javascript/flavours/glitch/components/icon_button.js index be2468d68..9ff745355 100644 --- a/app/javascript/flavours/glitch/components/icon_button.js +++ b/app/javascript/flavours/glitch/components/icon_button.js @@ -139,17 +139,9 @@ export default class IconButton extends React.PureComponent { ); - if (href) { - return ( - + if (href && !this.prop) { + contents = ( + {contents} ); -- cgit From 448ed92f76981f40d6faf48ed9d798ee716a04b2 Mon Sep 17 00:00:00 2001 From: Claire Date: Thu, 25 Aug 2022 04:29:00 +0200 Subject: [Glitch] Fix quickly switching notification filters resulting in empty or incorrect list Port afb8bc97d08c2738da7873ca42fea68e4672d65b to glitch-soc Signed-off-by: Claire --- app/javascript/flavours/glitch/actions/notifications.js | 6 +++--- app/javascript/flavours/glitch/reducers/notifications.js | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) (limited to 'app/javascript') diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js index 3993b1ea5..63c1fe038 100644 --- a/app/javascript/flavours/glitch/actions/notifications.js +++ b/app/javascript/flavours/glitch/actions/notifications.js @@ -158,13 +158,13 @@ const excludeTypesFromFilter = filter => { const noOp = () => {}; -export function expandNotifications({ maxId } = {}, done = noOp) { +export function expandNotifications({ maxId, forceLoad } = {}, done = noOp) { return (dispatch, getState) => { const activeFilter = getState().getIn(['settings', 'notifications', 'quickFilter', 'active']); const notifications = getState().get('notifications'); const isLoadingMore = !!maxId; - if (notifications.get('isLoading')) { + if (notifications.get('isLoading') && !forceLoad) { done(); return; } @@ -343,7 +343,7 @@ export function setFilter (filterType) { path: ['notifications', 'quickFilter', 'active'], value: filterType, }); - dispatch(expandNotifications()); + dispatch(expandNotifications({ forceLoad: true })); dispatch(saveSettings()); }; }; diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js index 1e61526b1..51d7886d7 100644 --- a/app/javascript/flavours/glitch/reducers/notifications.js +++ b/app/javascript/flavours/glitch/reducers/notifications.js @@ -43,7 +43,7 @@ const initialState = ImmutableMap({ unread: 0, lastReadId: '0', readMarkerId: '0', - isLoading: false, + isLoading: 0, cleaningMode: false, isTabVisible: true, browserSupport: false, @@ -121,7 +121,7 @@ const expandNormalizedNotifications = (state, notifications, next, isLoadingRece } } - mutable.set('isLoading', false); + mutable.update('isLoading', (nbLoading) => nbLoading - 1); }); }; @@ -249,10 +249,10 @@ export default function notifications(state = initialState, action) { return state.update('items', list => state.get('pendingItems').concat(list.take(40))).set('pendingItems', ImmutableList()).set('unread', 0); case NOTIFICATIONS_EXPAND_REQUEST: case NOTIFICATIONS_DELETE_MARKED_REQUEST: - return state.set('isLoading', true); + return state.set('isLoading', (nbLoading) => nbLoading + 1); case NOTIFICATIONS_DELETE_MARKED_FAIL: case NOTIFICATIONS_EXPAND_FAIL: - return state.set('isLoading', false); + return state.set('isLoading', (nbLoading) => nbLoading - 1); case NOTIFICATIONS_FILTER_SET: return state.set('items', ImmutableList()).set('hasMore', true); case NOTIFICATIONS_SCROLL_TOP: @@ -287,7 +287,7 @@ export default function notifications(state = initialState, action) { return markForDelete(state, action.id, action.yes); case NOTIFICATIONS_DELETE_MARKED_SUCCESS: - return deleteMarkedNotifs(state).set('isLoading', false); + return deleteMarkedNotifs(state).set('isLoading', (nbLoading) => nbLoading - 1); case NOTIFICATIONS_ENTER_CLEARING_MODE: st = state.set('cleaningMode', action.yes); -- cgit