From dcf7dd216ffb4e4c9eadda5601af6b0c72ed1d4a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Wed, 11 Aug 2021 15:31:46 -0500 Subject: [PATCH] AccountTimeline: let it be configurable like other timelines --- app/soapbox/actions/settings.js | 6 ++ .../components/column_settings.js | 28 +++++++ .../containers/column_settings_container.js | 17 +++++ .../features/account_timeline/index.js | 73 ++++++++++--------- .../components/column_settings.js | 4 - .../ui/containers/status_list_container.js | 19 +---- app/soapbox/selectors/index.js | 15 ++++ 7 files changed, 108 insertions(+), 54 deletions(-) create mode 100644 app/soapbox/features/account_timeline/components/column_settings.js create mode 100644 app/soapbox/features/account_timeline/containers/column_settings_container.js diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index 34b266262..d04a0ed40 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -127,6 +127,12 @@ export const defaultSettings = ImmutableMap({ }), }), + account_timeline: ImmutableMap({ + shows: ImmutableMap({ + reblog: true, + }), + }), + trends: ImmutableMap({ show: true, }), diff --git a/app/soapbox/features/account_timeline/components/column_settings.js b/app/soapbox/features/account_timeline/components/column_settings.js new file mode 100644 index 000000000..c19e7f76f --- /dev/null +++ b/app/soapbox/features/account_timeline/components/column_settings.js @@ -0,0 +1,28 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, FormattedMessage } from 'react-intl'; +import SettingToggle from '../../notifications/components/setting_toggle'; + +export default @injectIntl +class ColumnSettings extends React.PureComponent { + + static propTypes = { + settings: ImmutablePropTypes.map.isRequired, + onChange: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + }; + + render() { + const { settings, onChange } = this.props; + + return ( +
+
+ } /> +
+
+ ); + } + +} diff --git a/app/soapbox/features/account_timeline/containers/column_settings_container.js b/app/soapbox/features/account_timeline/containers/column_settings_container.js new file mode 100644 index 000000000..e5045e54e --- /dev/null +++ b/app/soapbox/features/account_timeline/containers/column_settings_container.js @@ -0,0 +1,17 @@ +import { connect } from 'react-redux'; +import ColumnSettings from '../components/column_settings'; +import { getSettings, changeSetting } from '../../../actions/settings'; + +const mapStateToProps = state => ({ + settings: getSettings(state).get('account_timeline'), +}); + +const mapDispatchToProps = (dispatch) => { + return { + onChange(key, checked) { + dispatch(changeSetting(['account_timeline', ...key], checked)); + }, + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(ColumnSettings); diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js index 313b42c27..c3ce2f645 100644 --- a/app/soapbox/features/account_timeline/index.js +++ b/app/soapbox/features/account_timeline/index.js @@ -15,47 +15,54 @@ import MissingIndicator from 'soapbox/components/missing_indicator'; import { NavLink } from 'react-router-dom'; import { fetchPatronAccount } from '../../actions/patron'; import { getSoapboxConfig } from 'soapbox/actions/soapbox'; +import { makeGetStatusIds } from 'soapbox/selectors'; -const mapStateToProps = (state, { params, withReplies = false }) => { - const username = params.username || ''; - const me = state.get('me'); - const accounts = state.getIn(['accounts']); - const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() === username.toLowerCase()); - const soapboxConfig = getSoapboxConfig(state); +const makeMapStateToProps = () => { + const getStatusIds = makeGetStatusIds(); - let accountId = -1; - let accountUsername = username; - let accountApId = null; - if (accountFetchError) { - accountId = null; - } else { - const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase()); - accountId = account ? account.getIn(['id'], null) : -1; - accountUsername = account ? account.getIn(['acct'], '') : ''; - accountApId = account ? account.get('url') : ''; - } + const mapStateToProps = (state, { params, withReplies = false }) => { + const username = params.username || ''; + const me = state.get('me'); + const accounts = state.getIn(['accounts']); + const accountFetchError = (state.getIn(['accounts', -1, 'username'], '').toLowerCase() === username.toLowerCase()); + const soapboxConfig = getSoapboxConfig(state); - const path = withReplies ? `${accountId}:with_replies` : accountId; + let accountId = -1; + let accountUsername = username; + let accountApId = null; + if (accountFetchError) { + accountId = null; + } else { + const account = accounts.find(acct => username.toLowerCase() === acct.getIn(['acct'], '').toLowerCase()); + accountId = account ? account.getIn(['id'], null) : -1; + accountUsername = account ? account.getIn(['acct'], '') : ''; + accountApId = account ? account.get('url') : ''; + } - const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false); - const unavailable = (me === accountId) ? false : isBlocked; + const path = withReplies ? `${accountId}:with_replies` : accountId; - return { - accountId, - unavailable, - accountUsername, - accountApId, - isAccount: !!state.getIn(['accounts', accountId]), - statusIds: state.getIn(['timelines', `account:${path}`, 'items'], ImmutableOrderedSet()), - featuredStatusIds: withReplies ? ImmutableOrderedSet() : state.getIn(['timelines', `account:${accountId}:pinned`, 'items'], ImmutableOrderedSet()), - isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), - hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), - me, - patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']), + const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false); + const unavailable = (me === accountId) ? false : isBlocked; + + return { + accountId, + unavailable, + accountUsername, + accountApId, + isAccount: !!state.getIn(['accounts', accountId]), + statusIds: getStatusIds(state, { type: `account:${path}`, prefix: 'account_timeline' }), + featuredStatusIds: withReplies ? ImmutableOrderedSet() : getStatusIds(state, { type: `account:${accountId}:pinned`, prefix: 'account_timeline' }), + isLoading: state.getIn(['timelines', `account:${path}`, 'isLoading']), + hasMore: state.getIn(['timelines', `account:${path}`, 'hasMore']), + me, + patronEnabled: soapboxConfig.getIn(['extensions', 'patron', 'enabled']), + }; }; + + return mapStateToProps; }; -export default @connect(mapStateToProps) +export default @connect(makeMapStateToProps) class AccountTimeline extends ImmutablePureComponent { static propTypes = { diff --git a/app/soapbox/features/community_timeline/components/column_settings.js b/app/soapbox/features/community_timeline/components/column_settings.js index 6ac69bcf2..60636ffee 100644 --- a/app/soapbox/features/community_timeline/components/column_settings.js +++ b/app/soapbox/features/community_timeline/components/column_settings.js @@ -18,10 +18,6 @@ class ColumnSettings extends React.PureComponent { return (
-
- } /> -
-
} />
diff --git a/app/soapbox/features/ui/containers/status_list_container.js b/app/soapbox/features/ui/containers/status_list_container.js index 95fa64cc2..c5afed275 100644 --- a/app/soapbox/features/ui/containers/status_list_container.js +++ b/app/soapbox/features/ui/containers/status_list_container.js @@ -1,25 +1,10 @@ import { connect } from 'react-redux'; import StatusList from '../../../components/status_list'; -import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable'; -import { createSelector } from 'reselect'; +import { OrderedSet as ImmutableOrderedSet } from 'immutable'; +import { makeGetStatusIds } from 'soapbox/selectors'; import { debounce } from 'lodash'; import { dequeueTimeline } from 'soapbox/actions/timelines'; import { scrollTopTimeline } from '../../../actions/timelines'; -import { getSettings } from 'soapbox/actions/settings'; -import { shouldFilter } from 'soapbox/utils/timelines'; - -const makeGetStatusIds = () => createSelector([ - (state, { type }) => getSettings(state).get(type, ImmutableMap()), - (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()), - (state) => state.get('statuses'), - (state) => state.get('me'), -], (columnSettings, statusIds, statuses, me) => { - return statusIds.filter(id => { - const status = statuses.get(id); - if (!status) return true; - return !shouldFilter(status, columnSettings); - }); -}); const makeMapStateToProps = () => { const getStatusIds = makeGetStatusIds(); diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js index 35ee305fb..8a5bf3b20 100644 --- a/app/soapbox/selectors/index.js +++ b/app/soapbox/selectors/index.js @@ -6,6 +6,8 @@ import { } from 'immutable'; import { getDomain } from 'soapbox/utils/accounts'; import ConfigDB from 'soapbox/utils/config_db'; +import { getSettings } from 'soapbox/actions/settings'; +import { shouldFilter } from 'soapbox/utils/timelines'; const getAccountBase = (state, id) => state.getIn(['accounts', id], null); const getAccountCounters = (state, id) => state.getIn(['accounts_counters', id], null); @@ -262,3 +264,16 @@ export const makeGetRemoteInstance = () => { }); }); }; + +export const makeGetStatusIds = () => createSelector([ + (state, { type, prefix }) => getSettings(state).get(prefix || type, ImmutableMap()), + (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()), + (state) => state.get('statuses'), + (state) => state.get('me'), +], (columnSettings, statusIds, statuses, me) => { + return statusIds.filter(id => { + const status = statuses.get(id); + if (!status) return true; + return !shouldFilter(status, columnSettings); + }); +});