From 155b342081f48b88d2e64f58f465b60eabd31117 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 25 Jul 2021 15:08:14 -0500
Subject: [PATCH] FederationRestrictions: add RestrictedInstance component

---
 .../components/restricted_instance.js         | 33 +++++++++++++++++++
 .../features/federation_restrictions/index.js |  5 ++-
 app/soapbox/selectors/index.js                |  4 ++-
 app/styles/application.scss                   |  2 +-
 .../components/federation-restrictions.scss   | 11 +++++++
 5 files changed, 50 insertions(+), 5 deletions(-)
 create mode 100644 app/soapbox/features/federation_restrictions/components/restricted_instance.js
 create mode 100644 app/styles/components/federation-restrictions.scss

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 (
+      <div className={classNames('restricted-instance', { 'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']) })}>
+        {remoteInstance.get('host')}
+      </div>
+    );
+  }
+
+}
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 (
       <Column icon='gavel' heading={intl.formatMessage(messages.heading)} backBtnSlim>
         <div className='federation-restrictions'>
-          <ul>
-            {hosts.map(host => <li key={host}>{host}</li>)}
-          </ul>
+          {hosts.map(host => <RestrictedInstance key={host} host={host} />)}
         </div>
       </Column>
     );
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;
+  }
+}