FederationRestrictions: add RestrictedInstance component

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 (
+      <div className={classNames('restricted-instance', { 'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']) })}>
+        {remoteInstance.get('host')}
+      </div>
+    );
+  }
+
+}

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 (
       <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <div className='federation-restrictions'>
-          <ul>
+          {hosts.map(host => <RestrictedInstance key={host} host={host} />)}
-            {hosts.map(host => <li key={host}>{host}</li>)}
-          </ul>
         </div>
       </Column>
     );

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

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

app/styles/components/federation-restrictions.scss

@@ -0,0 +1,11 @@
+.federation-restrictions {
+  padding: 15px;
+}
+
+.restricted-instance {
+  padding: 10px 0;
+
+  &--reject {
+    text-decoration: line-through;
+  }
+}