EditFederationModal: improve UI

app/soapbox/features/ui/components/edit_federation_modal.js

@@ -1,12 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
 import { SimpleForm, Checkbox } from 'soapbox/features/forms';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
+import { Map as ImmutableMap } from 'immutable';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
+const messages = defineMessages({
+  reject: { id: 'edit_federation.reject', defaultMessage: 'Reject all activities' },
+  mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
+  forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
+  unlisted: { id: 'edit_federation.unlisted', defaultMessage: 'Force posts unlisted' },
+  followersOnly: { id: 'edit_federation.followers_only', defaultMessage: 'Hide posts except to followers' },
+  save: { id: 'edit_federation.save', defaultMessage: 'Save' },
+});
+
 const mapStateToProps = (state, { host }) => {
   return {
     remoteInstance: getRemoteInstance(state, host),
@@ -14,15 +26,47 @@ const mapStateToProps = (state, { host }) => {
 };
 
 export default @connect(mapStateToProps)
-class EditFederationModal extends React.PureComponent {
+@injectIntl
+class EditFederationModal extends ImmutablePureComponent {
 
   static propTypes = {
     host: PropTypes.string.isRequired,
     remoteInstance: ImmutablePropTypes.map,
   };
 
-  render() {
+  state = {
+    data: ImmutableMap(),
+  }
+
+  componentDidMount() {
     const { remoteInstance } = this.props;
+    this.setState({ data: remoteInstance.get('federation') });
+  }
+
+  handleDataChange = key => {
+    return ({ target }) => {
+      const { data } = this.state;
+      this.setState({ data: data.set(key, target.checked) });
+    };
+  }
+
+  handleMediaRemoval = ({ target: { checked } }) => {
+    const data = this.state.data.merge({
+      avatar_removal: checked,
+      banner_removal: checked,
+      media_removal: checked,
+    });
+
+    this.setState({ data });
+  }
+
+  handleSubmit = e => {
+    // TODO
+  }
+
+  render() {
+    const { intl, remoteInstance } = this.props;
+    const { data } = this.state;
 
     const {
       avatar_removal,
@@ -32,19 +76,52 @@ class EditFederationModal extends React.PureComponent {
       media_nsfw,
       media_removal,
       reject,
-    } = remoteInstance.get('federation').toJS();
+    } = data.toJS();
+
+    const fullMediaRemoval = avatar_removal && banner_removal && media_removal;
 
     return (
       <div className='modal-root__modal edit-federation-modal'>
-        <h3>{remoteInstance.get('host')}</h3>
-        <SimpleForm>
-          <Checkbox label='reject' checked={reject} />
-          <Checkbox label='media removal' checked={avatar_removal && banner_removal && media_removal} />
-          <Checkbox label='force nsfw' checked={media_nsfw} />
-          <Checkbox label='unlisted' checked={federated_timeline_removal} />
-          <Checkbox label='followers only' checked={followers_only} />
+        <div>
+          <div className='edit-federation-modal__title'>
+            {remoteInstance.get('host')}
+          </div>
+          <SimpleForm onSubmit={this.handleSubmit}>
+            <Checkbox
+              label={intl.formatMessage(messages.reject)}
+              checked={reject}
+              onChange={this.handleDataChange('reject')}
+            />
+            <Checkbox
+              label={intl.formatMessage(messages.mediaRemoval)}
+              disabled={reject}
+              checked={fullMediaRemoval}
+              onChange={this.handleMediaRemoval}
+            />
+            <Checkbox
+              label={intl.formatMessage(messages.forceNsfw)}
+              disabled={reject || media_removal}
+              checked={media_nsfw}
+              onChange={this.handleDataChange('media_nsfw')}
+            />
+            <Checkbox
+              label={intl.formatMessage(messages.followersOnly)}
+              disabled={reject}
+              checked={followers_only}
+              onChange={this.handleDataChange('followers_only')}
+            />
+            <Checkbox
+              label={intl.formatMessage(messages.unlisted)}
+              disabled={reject || followers_only}
+              checked={federated_timeline_removal}
+              onChange={this.handleDataChange('federated_timeline_removal')}
+            />
+            <button type='submit' className='edit-federation-modal__submit'>
+              {intl.formatMessage(messages.save)}
+            </button>
           </SimpleForm>
         </div>
+      </div>
     );
   }
 

app/styles/components/federation-restrictions.scss

@@ -68,4 +68,16 @@
   background: var(--foreground-color);
   border-radius: 8px;
   padding: 20px;
+
+  &__title {
+    font-size: 18px;
+    margin-bottom: 15px;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  &__submit {
+    margin-bottom: 0 !important;
+    margin-top: 20px;
+  }
 }