Turn TechSettings to container

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

@@ -4,7 +4,7 @@ import {Button, List, Item} from 'coral-ui';
 import styles from './Configure.css';
 import StreamSettings from '../containers/StreamSettings';
 import ModerationSettings from './ModerationSettings';
-import TechSettings from './TechSettings';
+import TechSettings from '../containers/TechSettings';
 import t from 'coral-framework/services/i18n';
 import {can} from 'coral-framework/services/perms';
 import PropTypes from 'prop-types';
@@ -38,9 +38,9 @@ export default class Configure extends Component {
       break;
     case 'tech':
       sectionComponent = <TechSettings
-        onChangeDomainlist={this.props.updateDomainlist}
+        data={this.props.data}
+        root={this.props.root}
         settings={this.props.settings}
-        updateSettings={this.props.updateSettings}
       />;
     }
 
@@ -110,7 +110,6 @@ export default class Configure extends Component {
 Configure.propTypes = {
   notify: PropTypes.func.isRequired,
   updateWordlist: PropTypes.func.isRequired,
-  updateDomainlist: PropTypes.func.isRequired,
   updateSettings: PropTypes.func.isRequired,
   errors: PropTypes.object.isRequired,
   savePending: PropTypes.func.isRequired,

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

@@ -6,40 +6,57 @@ import EmbedLink from './EmbedLink';
 import styles from './Configure.css';
 import t from 'coral-framework/services/i18n';
 
-const updateCustomCssUrl = (updateSettings) => (event) => {
-  const customCssUrl = event.target.value;
-  updateSettings({customCssUrl});
-};
+class TechSettings extends React.Component {
 
-const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => {
-  return (
-    <div className={styles.Configure}>
-      <h3>{t('configure.tech_settings')}</h3>
-      <Domainlist
-        domains={settings.domains.whitelist}
-        onChangeDomainlist={onChangeDomainlist} />
-      <EmbedLink />
-      <Card className={styles.configSetting}>
-        <div className={styles.wrapper}>
-          <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
-          <p>{t('configure.custom_css_url_desc')}</p>
-          <input
-            className={styles.customCSSInput}
-            value={settings.customCssUrl}
-            onChange={updateCustomCssUrl(updateSettings)} />
-        </div>
-      </Card>
-    </div>
-  );
-};
+  updateCustomCssUrl = (event) => {
+    const updater = {customCssUrl: {$set: event.target.value}};
+    this.props.updatePending({updater});
+  };
+
+  updateDomainlist = (listName, list) => {
+    this.props.updatePending({updater: {
+      domains: {$apply: (domains) => {
+        const changeSet = {[listName]: list};
+        if (!domains) {
+          return changeSet;
+        }
+        return {
+          ...domains,
+          ...changeSet,
+        };
+      }},
+    }});
+  };
+
+  render() {
+    const {settings} = this.props;
+    return (
+      <div className={styles.Configure}>
+        <h3>{t('configure.tech_settings')}</h3>
+        <Domainlist
+          domains={settings.domains.whitelist}
+          onChangeDomainlist={this.updateDomainlist} />
+        <EmbedLink />
+        <Card className={styles.configSetting}>
+          <div className={styles.wrapper}>
+            <div className={styles.settingsHeader}>{t('configure.custom_css_url')}</div>
+            <p>{t('configure.custom_css_url_desc')}</p>
+            <input
+              className={styles.customCSSInput}
+              value={settings.customCssUrl}
+              onChange={this.updateCustomCssUrl} />
+          </div>
+        </Card>
+      </div>
+    );
+  }
+}
 
 TechSettings.propTypes = {
-  settings: PropTypes.shape({
-    domains: PropTypes.shape({
-      whitelist: 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 TechSettings;

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

@@ -10,6 +10,7 @@ import merge from 'lodash/merge';
 import {withUpdateSettings} from 'coral-framework/graphql/mutations';
 import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
+import TechSettings from './TechSettings';
 import {
   updatePending,
   clearPending,
@@ -34,21 +35,6 @@ class ConfigureContainer extends Component {
     }});
   };
 
-  updateDomainlist = (listName, list) => {
-    this.props.updatePending({updater: {
-      domains: {$apply: (domains) => {
-        const changeSet = {[listName]: list};
-        if (!domains) {
-          return changeSet;
-        }
-        return {
-          ...domains,
-          ...changeSet,
-        };
-      }},
-    }});
-  };
-
   updateSettings = (settings, {setError = {}} = {}) => {
     this.props.updatePending({updater: {$merge: settings}, errorUpdater: {$merge: setError}});
   };
@@ -73,7 +59,6 @@ class ConfigureContainer extends Component {
     return <Configure
       notify={this.props.notify}
       updateWordlist={this.updateWordlist}
-      updateDomainlist={this.updateDomainlist}
       updateSettings={this.updateSettings}
       errors={this.props.errors}
       auth={this.props.auth}
@@ -113,11 +98,15 @@ const withConfigureQuery = withQuery(gql`
         whitelist
       }
       ...${getDefinitionName(StreamSettings.fragments.settings)}
+      ...${getDefinitionName(TechSettings.fragments.settings)}
     }
     ...${getDefinitionName(StreamSettings.fragments.root)}
+    ...${getDefinitionName(TechSettings.fragments.root)}
   }
   ${StreamSettings.fragments.root}
   ${StreamSettings.fragments.settings}
+  ${TechSettings.fragments.root}
+  ${TechSettings.fragments.settings}
   `, {
   options: () => ({
     variables: {},

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

@@ -0,0 +1,37 @@
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {compose, gql} from 'react-apollo';
+import TechSettings from '../components/TechSettings';
+import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotFragmentSpreads} from 'coral-framework/utils';
+import {updatePending} from '../../../actions/configure';
+
+const slots = [
+  'adminTechSettings',
+];
+
+const mapDispatchToProps = (dispatch) =>
+  bindActionCreators({
+    updatePending,
+  }, dispatch);
+
+export default compose(
+  withFragments({
+    root: gql`
+      fragment TalkAdmin_TechSettings_root on RootQuery {
+        __typename
+        ${getSlotFragmentSpreads(slots, 'root')}
+      }
+    `,
+    settings: gql`
+      fragment TalkAdmin_TechSettings_settings on Settings {
+        customCssUrl
+        domains {
+          whitelist
+        }
+        ${getSlotFragmentSpreads(slots, 'settings')}
+      }
+    `
+  }),
+  connect(null, mapDispatchToProps),
+)(TechSettings);