diff --git a/app/soapbox/actions/remote_timeline.js b/app/soapbox/actions/remote_timeline.js index 65ec69e82..38249c009 100644 --- a/app/soapbox/actions/remote_timeline.js +++ b/app/soapbox/actions/remote_timeline.js @@ -1,6 +1,6 @@ import { getSettings, changeSetting } from 'soapbox/actions/settings'; -const getPinnedPosts = state => { +const getPinnedHosts = state => { const settings = getSettings(state); return settings.getIn(['remote_timeline', 'pinnedHosts']); }; @@ -8,7 +8,7 @@ const getPinnedPosts = state => { export function pinHost(host) { return (dispatch, getState) => { const state = getState(); - const pinnedHosts = getPinnedPosts(state); + const pinnedHosts = getPinnedHosts(state); return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.add(host))); }; @@ -17,7 +17,7 @@ export function pinHost(host) { export function unpinHost(host) { return (dispatch, getState) => { const state = getState(); - const pinnedHosts = getPinnedPosts(state); + const pinnedHosts = getPinnedHosts(state); return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.delete(host))); }; diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js index dc204f0eb..a424ec988 100644 --- a/app/soapbox/features/public_timeline/index.js +++ b/app/soapbox/features/public_timeline/index.js @@ -7,6 +7,7 @@ import Column from '../../components/column'; import ColumnSettingsContainer from './containers/column_settings_container'; import HomeColumnHeader from '../../components/home_column_header'; import Accordion from 'soapbox/features/ui/components/accordion'; +import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker'; import { expandPublicTimeline } from '../../actions/timelines'; import { connectPublicStream } from '../../actions/streaming'; import { Link } from 'react-router-dom'; @@ -101,6 +102,7 @@ class CommunityTimeline extends React.PureComponent { + {showExplanationBox &&
} diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js new file mode 100644 index 000000000..0305268b0 --- /dev/null +++ b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.js @@ -0,0 +1,51 @@ +'use strict'; + +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import classNames from 'classnames'; +import { Link } from 'react-router-dom'; +import { getSettings } from 'soapbox/actions/settings'; + +const mapStateToProps = state => { + const settings = getSettings(state); + + return { + pinnedHosts: settings.getIn(['remote_timeline', 'pinnedHosts']), + }; +}; + +class PinnedHostPicker extends React.PureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + dispatch: PropTypes.func.isRequired, + pinnedHosts: ImmutablePropTypes.orderedSet, + host: PropTypes.string, + }; + + render() { + const { pinnedHosts, host: activeHost } = this.props; + + if (!pinnedHosts || pinnedHosts.isEmpty()) return null; + + return ( +
+
+ {pinnedHosts.map(host => ( +
+ {host} +
+ ))} +
+
+ ); + } + +} + +export default connect(mapStateToProps)(PinnedHostPicker); diff --git a/app/soapbox/features/remote_timeline/index.js b/app/soapbox/features/remote_timeline/index.js index ee08192ff..5f22c4930 100644 --- a/app/soapbox/features/remote_timeline/index.js +++ b/app/soapbox/features/remote_timeline/index.js @@ -5,6 +5,7 @@ import PropTypes from 'prop-types'; import StatusListContainer from '../ui/containers/status_list_container'; import Column from '../../components/column'; import HomeColumnHeader from '../../components/home_column_header'; +import PinnedHostsPicker from './components/pinned_hosts_picker'; import IconButton from 'soapbox/components/icon_button'; import { expandRemoteTimeline } from '../../actions/timelines'; import { connectRemoteStream } from '../../actions/streaming'; @@ -84,6 +85,7 @@ class RemoteTimeline extends React.PureComponent { return ( +