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 (
+