Turn ModerationSettings into container

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -3,7 +3,7 @@ import React, {Component} from 'react';
 import {Button, List, Item} from 'coral-ui';
 import styles from './Configure.css';
 import StreamSettings from '../containers/StreamSettings';
-import ModerationSettings from './ModerationSettings';
+import ModerationSettings from '../containers/ModerationSettings';
 import TechSettings from '../containers/TechSettings';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
@@ -20,33 +20,25 @@ export default class Configure extends Component {
   }
 
   getSection (section) {
-    let sectionComponent;
+    let SectionComponent;
     switch(section){
     case 'stream':
-      sectionComponent = <StreamSettings
-        data={this.props.data}
-        root={this.props.root}
-        settings={this.props.settings}
-      />;
+      SectionComponent = StreamSettings;
       break;
     case 'moderation':
-      sectionComponent = <ModerationSettings
-        onChangeWordlist={this.props.updateWordlist}
-        settings={this.props.settings}
-        updateSettings={this.props.updateSettings}
-      />;
+      SectionComponent = ModerationSettings;
       break;
     case 'tech':
-      sectionComponent = <TechSettings
-        data={this.props.data}
-        root={this.props.root}
-        settings={this.props.settings}
-      />;
+      SectionComponent = TechSettings;
     }
 
     return (
       <div className={styles.settingsSection}>
-        {sectionComponent}
+        <SectionComponent
+          data={this.props.data}
+          root={this.props.root}
+          settings={this.props.settings}
+        />
       </div>
     );
   }

client/coral-admin/src/routes/Configure/components/ModerationSettings.js

@@ -6,86 +6,101 @@ import {Checkbox} from 'react-mdl';
 import Wordlist from './Wordlist';
 import t from 'coral-framework/services/i18n';
 
-const updateModeration = (updateSettings, mod) => () => {
-  const moderation = mod === 'PRE' ? 'POST' : 'PRE';
-  updateSettings({moderation});
-};
+class ModerationSettings extends React.Component {
 
-const updateEmailConfirmation = (updateSettings, verify) => () => {
-  updateSettings({requireEmailConfirmation: !verify});
-};
+  updateModeration = () => {
+    const updater = {moderation: {$set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE'}};
+    this.props.updatePending({updater});
+  };
 
-const updatePremodLinksEnable = (updateSettings, premodLinks) => () => {
-  const premodLinksEnable = !premodLinks;
-  updateSettings({premodLinksEnable});
-};
+  updateEmailConfirmation = () => {
+    const updater = {requireEmailConfirmation: {$set: !this.props.settings.requireEmailConfirmation}};
+    this.props.updatePending({updater});
+  };
 
-const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => {
+  updatePremodLinksEnable = () => {
+    const updater = {premodLinksEnable: {$set: !this.props.settings.premodLinksEnable}};
+    this.props.updatePending({updater});
+  };
 
-  // just putting this here for shorthand below
-  const on = styles.enabledSetting;
-  const off = styles.disabledSetting;
+  updateWordlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      wordlist: {$apply: (wordlist) => {
+        const changeSet = {[listName]: list};
+        if (!wordlist) {
+          return changeSet;
+        }
+        return {
+          ...wordlist,
+          ...changeSet,
+        };
+      }},
+    }});
+  };
 
-  return (
-    <div className={styles.Configure}>
-      <h3>{t('configure.moderation_settings')}</h3>
-      <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateEmailConfirmation(updateSettings, settings.requireEmailConfirmation)}
-            checked={settings.requireEmailConfirmation} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
-          <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
-            {t('configure.require_email_verification_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updateModeration(updateSettings, settings.moderation)}
-            checked={settings.moderation === 'PRE'} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
-          <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
-            {t('configure.enable_pre_moderation_text')}
-          </p>
-        </div>
-      </Card>
-      <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
-        <div className={styles.action}>
-          <Checkbox
-            onChange={updatePremodLinksEnable(updateSettings, settings.premodLinksEnable)}
-            checked={settings.premodLinksEnable} />
-        </div>
-        <div className={styles.content}>
-          <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
-          <p>
-            {t('configure.enable_premod_links_text')}
-          </p>
-        </div>
-      </Card>
-      <Wordlist
-        bannedWords={settings.wordlist.banned}
-        suspectWords={settings.wordlist.suspect}
-        onChangeWordlist={onChangeWordlist} />
-    </div>
-  );
-};
+  render() {
+    const {settings} = this.props;
+
+    // just putting this here for shorthand below
+    const on = styles.enabledSetting;
+    const off = styles.disabledSetting;
+
+    return (
+      <div className={styles.Configure}>
+        <h3>{t('configure.moderation_settings')}</h3>
+        <Card className={`${styles.configSetting} ${settings.requireEmailConfirmation ? on : off}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updateEmailConfirmation}
+              checked={settings.requireEmailConfirmation} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>{t('configure.require_email_verification')}</div>
+            <p className={settings.requireEmailConfirmation ? '' : styles.disabledSettingText}>
+              {t('configure.require_email_verification_text')}
+            </p>
+          </div>
+        </Card>
+        <Card className={`${styles.configSetting} ${settings.moderation === 'PRE' ? on : off}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updateModeration}
+              checked={settings.moderation === 'PRE'} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>{t('configure.enable_pre_moderation')}</div>
+            <p className={settings.moderation === 'PRE' ? '' : styles.disabledSettingText}>
+              {t('configure.enable_pre_moderation_text')}
+            </p>
+          </div>
+        </Card>
+        <Card className={`${styles.configSetting} ${settings.premodLinksEnable ? on : off}`}>
+          <div className={styles.action}>
+            <Checkbox
+              onChange={this.updatePremodLinksEnable}
+              checked={settings.premodLinksEnable} />
+          </div>
+          <div className={styles.content}>
+            <div className={styles.settingsHeader}>{t('configure.enable_premod_links')}</div>
+            <p>
+              {t('configure.enable_premod_links_text')}
+            </p>
+          </div>
+        </Card>
+        <Wordlist
+          bannedWords={settings.wordlist.banned}
+          suspectWords={settings.wordlist.suspect}
+          onChangeWordlist={this.updateWordlist} />
+      </div>
+    );
+  }
+}
 
 ModerationSettings.propTypes = {
-  onChangeWordlist: PropTypes.func.isRequired,
-  settings: PropTypes.shape({
-    moderation: PropTypes.string.isRequired,
-    wordlist: PropTypes.shape({
-      banned: PropTypes.array.isRequired,
-      suspect: PropTypes.array.isRequired
-    })
-  }).isRequired,
-  updateSettings: PropTypes.func.isRequired
+  updatePending: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  settings: PropTypes.object.isRequired,
 };
 
 export default ModerationSettings;

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -11,6 +11,7 @@ import {withUpdateSettings} from 'coral-framework/graphql/mutations';
 import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
+import ModerationSettings from './ModerationSettings';
 import {
   updatePending,
   clearPending,
@@ -99,14 +100,18 @@ const withConfigureQuery = withQuery(gql`
       }
       ...${getDefinitionName(StreamSettings.fragments.settings)}
       ...${getDefinitionName(TechSettings.fragments.settings)}
+      ...${getDefinitionName(ModerationSettings.fragments.settings)}
     }
     ...${getDefinitionName(StreamSettings.fragments.root)}
     ...${getDefinitionName(TechSettings.fragments.root)}
+    ...${getDefinitionName(ModerationSettings.fragments.root)}
   }
   ${StreamSettings.fragments.root}
   ${StreamSettings.fragments.settings}
   ${TechSettings.fragments.root}
   ${TechSettings.fragments.settings}
+  ${ModerationSettings.fragments.root}
+  ${ModerationSettings.fragments.settings}
   `, {
   options: () => ({
     variables: {},

client/coral-admin/src/routes/Configure/containers/ModerationSettings.js

@@ -0,0 +1,40 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import ModerationSettings from '../components/ModerationSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminModerationSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_ModerationSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_ModerationSettings_settings on Settings {
+        requireEmailConfirmation
+        moderation
+        premodLinksEnable
+        wordlist {
+          suspect
+          banned
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(ModerationSettings);