Merge branch 'account-timeline-filters' into 'develop'

Account timeline column settings

See merge request soapbox-pub/soapbox-fe!669

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,
   }),

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 (
+      <div>
+        <div className='column-settings__row'>
+          <SettingToggle
+            prefix='account_timeline'
+            settings={settings}
+            settingPath={['shows', 'pinned']}
+            onChange={onChange}
+            label={<FormattedMessage id='account_timeline.column_settings.show_pinned' defaultMessage='Show pinned posts' />}
+          />
+          <SettingToggle
+            prefix='account_timeline'
+            settings={settings}
+            settingPath={['shows', 'reblog']}
+            onChange={onChange}
+            label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />}
+          />
+        </div>
+      </div>
+    );
+  }
+
+}

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);

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 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;
+    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 {
           <NavLink exact to={`/@${accountUsername}/media`}>
             <FormattedMessage id='account.media' defaultMessage='Media' />
           </NavLink>
+          <div className='column-header__buttons'>
+            <button onClick={this.handleToggleClick}>
+              <Icon id='sliders' />
+            </button>
+          </div>
+        </div>
+        <div className={classNames('column-header__collapsible', { collapsed, animating })} onTransitionEnd={this.handleTransitionEnd}>
+          <div className='column-header__collapsible-inner'>
+            <ColumnSettingsContainer />
+          </div>
         </div>
         <StatusList
           scrollKey='account_timeline'

app/soapbox/features/community_timeline/components/column_settings.js

@@ -18,10 +18,6 @@ class ColumnSettings extends React.PureComponent {
 
     return (
       <div>
-        <div className='column-settings__row'>
-          <SettingToggle prefix='community_timeline' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_reblogs' defaultMessage='Show reposts' />} />
-        </div>
-
         <div className='column-settings__row'>
           <SettingToggle prefix='community_timeline' settings={settings} settingPath={['shows', 'reply']} onChange={onChange} label={<FormattedMessage id='home.column_settings.show_replies' defaultMessage='Show replies' />} />
         </div>

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();

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);
+  });
+});