diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index 34b266262..5beba817a 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -127,6 +127,13 @@ export const defaultSettings = ImmutableMap({ }), }), + account_timeline: ImmutableMap({ + shows: ImmutableMap({ + reblog: true, + pinned: 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..7836c01f0 --- /dev/null +++ b/app/soapbox/features/account_timeline/components/column_settings.js @@ -0,0 +1,41 @@ +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..ba0040623 100644 --- a/app/soapbox/features/account_timeline/index.js +++ b/app/soapbox/features/account_timeline/index.js @@ -4,9 +4,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts'; import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines'; +import Icon from 'soapbox/components/icon'; import StatusList from '../../components/status_list'; import LoadingIndicator from '../../components/loading_indicator'; import Column from '../ui/components/column'; +import ColumnSettingsContainer from './containers/column_settings_container'; import { OrderedSet as ImmutableOrderedSet } from 'immutable'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { FormattedMessage } from 'react-intl'; @@ -15,47 +17,57 @@ 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 { getSettings } from 'soapbox/actions/settings'; +import { makeGetStatusIds } from 'soapbox/selectors'; +import classNames from 'classnames'; + +const makeMapStateToProps = () => { + const getStatusIds = makeGetStatusIds(); + + 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); + + 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); - - 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 path = withReplies ? `${accountId}:with_replies` : accountId; - - 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: 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 path = withReplies ? `${accountId}:with_replies` : accountId; + + const isBlocked = state.getIn(['relationships', accountId, 'blocked_by'], false); + const unavailable = (me === accountId) ? false : isBlocked; + const showPins = getSettings(state).getIn(['account_timeline', 'shows', 'pinned']) && !withReplies; + + return { + accountId, + unavailable, + accountUsername, + accountApId, + isAccount: !!state.getIn(['accounts', accountId]), + statusIds: getStatusIds(state, { type: `account:${path}`, prefix: 'account_timeline' }), + featuredStatusIds: showPins ? getStatusIds(state, { type: `account:${accountId}:pinned`, prefix: 'account_timeline' }) : ImmutableOrderedSet(), + 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 = { @@ -70,6 +82,11 @@ class AccountTimeline extends ImmutablePureComponent { unavailable: PropTypes.bool, }; + state = { + collapsed: true, + animating: false, + } + componentDidMount() { const { params: { username }, accountId, accountApId, withReplies, me, patronEnabled } = this.props; @@ -115,8 +132,18 @@ class AccountTimeline extends ImmutablePureComponent { } } + handleToggleClick = (e) => { + e.stopPropagation(); + this.setState({ collapsed: !this.state.collapsed, animating: true }); + } + + handleTransitionEnd = () => { + this.setState({ animating: false }); + } + render() { const { statusIds, featuredStatusIds, isLoading, hasMore, isAccount, accountId, unavailable, accountUsername } = this.props; + const { collapsed, animating } = this.state; if (!isAccount && accountId !== -1) { return ( @@ -156,6 +183,16 @@ class AccountTimeline extends ImmutablePureComponent { +
+ +
+ +
+
+ +
-
- } /> -
-
} />
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); + }); +});