diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.js b/app/soapbox/features/federation_restrictions/components/restricted_instance.js new file mode 100644 index 000000000..30775c10c --- /dev/null +++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.js @@ -0,0 +1,33 @@ +import React from 'react'; +import { connect } from 'react-redux'; +import PropTypes from 'prop-types'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { makeGetRemoteInstance } from 'soapbox/selectors'; +import classNames from 'classnames'; + +const getRemoteInstance = makeGetRemoteInstance(); + +const mapStateToProps = (state, ownProps) => { + return { + remoteInstance: getRemoteInstance(state, ownProps.host), + }; +}; + +export default @connect(mapStateToProps) +class RestrictedInstance extends ImmutablePureComponent { + + static propTypes = { + host: PropTypes.string.isRequired, + } + + render() { + const { remoteInstance } = this.props; + + return ( +
+ {remoteInstance.get('host')} +
+ ); + } + +} diff --git a/app/soapbox/features/federation_restrictions/index.js b/app/soapbox/features/federation_restrictions/index.js index 4056da630..13cbfdaaa 100644 --- a/app/soapbox/features/federation_restrictions/index.js +++ b/app/soapbox/features/federation_restrictions/index.js @@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import Column from '../ui/components/column'; import { createSelector } from 'reselect'; import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable'; +import RestrictedInstance from './components/restricted_instance'; const getHosts = createSelector([ state => state.getIn(['instance', 'pleroma', 'metadata', 'federation', 'mrf_simple'], ImmutableMap()), @@ -39,9 +40,7 @@ class FederationRestrictions extends ImmutablePureComponent { return (
- + {hosts.map(host => )}
); diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js index b1bd570f7..5ba6f6088 100644 --- a/app/soapbox/selectors/index.js +++ b/app/soapbox/selectors/index.js @@ -230,10 +230,12 @@ const getSimplePolicy = (state, host) => ( export const makeGetRemoteInstance = () => { return createSelector([ + (state, host) => host, getRemoteInstanceFavicon, getSimplePolicy, - ], (favicon, federation) => { + ], (host, favicon, federation) => { return ImmutableMap({ + host, favicon, federation, }); diff --git a/app/styles/application.scss b/app/styles/application.scss index f6611fdf0..7bdea4c13 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -83,6 +83,6 @@ @import 'components/crypto-donate'; @import 'components/datepicker'; @import 'components/remote-timeline'; - +@import 'components/federation-restrictions'; // Holiday @import 'holiday/halloween'; diff --git a/app/styles/components/federation-restrictions.scss b/app/styles/components/federation-restrictions.scss new file mode 100644 index 000000000..5b869c6d5 --- /dev/null +++ b/app/styles/components/federation-restrictions.scss @@ -0,0 +1,11 @@ +.federation-restrictions { + padding: 15px; +} + +.restricted-instance { + padding: 10px 0; + + &--reject { + text-decoration: line-through; + } +}