Moving configuration sections to seperate files.

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+import styles from './Configure.css';
+import {
+  List,
+  ListItem,
+  ListItemContent,
+  ListItemAction,
+  Textfield,
+  Checkbox
+} from 'react-mdl';
+import {updateSettings} from '../../actions/settings';
+
+const updateModeration = (props) => () => {
+  const moderation = props.settings.moderation === 'pre' ? 'post' : 'pre';
+  props.dispatch(updateSettings({moderation}));
+};
+
+const updateInfoBoxEnable = (props) => () => {
+  const infoBoxEnable = !props.settings.infoBoxEnable;
+  props.dispatch(updateSettings({infoBoxEnable}));
+};
+
+const updateInfoBoxContent = (props) => (event) => {
+  const infoBoxContent =  event.target.value;
+  props.dispatch(updateSettings({infoBoxContent}));
+};
+
+const StateLess = (props) => <List>
+  <ListItem className={styles.configSetting}>
+    <ListItemAction>
+      <Checkbox
+        onClick={updateModeration(props)}
+        checked={props.settings.moderation === 'pre'} />
+    </ListItemAction>
+    {lang.t('configure.enable-pre-moderation')}
+  </ListItem>
+  <ListItem threeLine className={styles.configSettingInfoBox}>
+    <ListItemAction>
+      <Checkbox
+        onClick={updateInfoBoxEnable(props)}
+        checked={props.settings.infoBoxEnable} />
+    </ListItemAction>
+    <ListItemContent>
+      {lang.t('configure.include-comment-stream')}
+      <p>
+        {lang.t('configure.include-comment-stream-desc')}
+      </p>
+    </ListItemContent>
+  </ListItem>
+  <ListItem className={`${styles.configSettingInfoBox} ${props.settings.infoBoxEnable ? null : styles.hidden}`} >
+    <ListItemContent>
+      <Textfield
+        onChange={updateInfoBoxContent(props)}
+        value={props.settings.infoBoxContent}
+        label={lang.t('configure.include-text')}
+        rows={3}/>
+    </ListItemContent>
+  </ListItem>
+</List>;
+
+export default StateLess;
+
+const lang = new I18n(translations);

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

@@ -5,30 +5,20 @@ import {
   List,
   ListItem,
   ListItemContent,
-  ListItemAction,
-  Textfield,
-  Checkbox,
   Button,
   Icon
 } from 'react-mdl';
 import styles from './Configure.css';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
+import EmbedLink from './EmbedLink';
+import CommentSettings from './CommentSettings';
 
 class Configure extends React.Component {
   constructor (props) {
     super(props);
 
-    this.state = {activeSection: 'comments', copied: false};
-
-    this.copyToClipBoard = this.copyToClipBoard.bind(this);
-
-    // Update settings
-    this.updateModeration = this.updateModeration.bind(this);
-    // InfoBox has two settings. Enable or not and the content of it if it is enable.
-    this.updateInfoBoxEnable = this.updateInfoBoxEnable.bind(this);
-    this.updateInfoBoxContent = this.updateInfoBoxContent.bind(this);
-
+    this.state = {activeSection: 'comments'};
     this.saveSettings = this.saveSettings.bind(this);
   }
 
@@ -36,95 +26,37 @@ class Configure extends React.Component {
     this.props.dispatch(fetchSettings());
   }
 
-  updateModeration () {
-    const moderation = this.props.settings.moderation === 'pre' ? 'post' : 'pre';
-    this.props.dispatch(updateSettings({moderation}));
-  }
-
-  updateInfoBoxEnable () {
-    const infoBoxEnable = !this.props.settings.infoBoxEnable;
-    this.props.dispatch(updateSettings({infoBoxEnable}));
-  }
-
-  updateInfoBoxContent (event) {
-    const infoBoxContent =  event.target.value;
-    this.props.dispatch(updateSettings({infoBoxContent}));
-  }
-
   saveSettings () {
     this.props.dispatch(saveSettingsToServer());
   }
 
-  getCommentSettings () {
-    return <List>
-      <ListItem className={styles.configSetting}>
-        <ListItemAction>
-          <Checkbox
-            onClick={this.updateModeration}
-            checked={this.props.settings.moderation === 'pre'} />
-        </ListItemAction>
-        {lang.t('configure.enable-pre-moderation')}
-      </ListItem>
-      <ListItem threeLine className={styles.configSettingInfoBox}>
-        <ListItemAction>
-          <Checkbox
-            onClick={this.updateInfoBoxEnable}
-            checked={this.props.settings.infoBoxEnable} />
-        </ListItemAction>
-        <ListItemContent>
-          {lang.t('configure.include-comment-stream')}
-          <p>
-            {lang.t('configure.include-comment-stream-desc')}
-          </p>
-        </ListItemContent>
-      </ListItem>
-      <ListItem className={`${styles.configSettingInfoBox} ${this.props.settings.infoBoxEnable ? null : styles.hidden}`} >
-        <ListItemContent>
-          <Textfield
-            onChange={this.updateInfoBoxContent}
-            value={this.props.settings.infoBoxContent}
-            label={lang.t('configure.include-text')}
-            rows={3}/>
-        </ListItemContent>
-      </ListItem>
-    </List>;
-  }
-
-  copyToClipBoard () {
-    const copyTextarea = document.querySelector(`.${  styles.embedInput}`);
-    copyTextarea.select();
-
-    try {
-      document.execCommand('copy');
-      this.setState({copied: true});
-    } catch (err) {
-      console.error('Unable to copy', err);
-    }
-  }
-
-  getEmbed () {
-    const embedText = `<div id='coralStreamEmbed'></div><script type='text/javascript' src='${window.location.protocol}//pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embed/stream', {title: 'Comments'});</script>`;
-
-    return <List>
-      <ListItem className={styles.configSettingEmbed}>
-        <p>{lang.t('configure.copy-and-paste')}</p>
-        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
-        <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
-          {lang.t('embedlink.copy')}
-        </Button>
-        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
-      </ListItem>
-    </List>;
-  }
-
   changeSection (activeSection) {
     this.setState({activeSection});
   }
 
+  getSection (section) {
+    switch(section){
+    case 'comments':
+      return <CommentSettings settings={this.props.settings}/>;
+    case 'embed':
+      return <EmbedLink/>;
+    }
+  }
+
+  getPageTitle (section) {
+    switch(section) {
+    case 'comments':
+      return lang.t('configure.comment-settings');
+    case 'embed':
+      return lang.t('configure.embed-comment-stream');
+    case 'wordlist':
+      return lang.t('configure.wordlist');
+    }
+  }
+
   render () {
-    let pageTitle = this.state.activeSection === 'comments'
-      ? lang.t('configure.comment-settings')
-      : lang.t('configure.embed-comment-stream');
+    let pageTitle = this.getPageTitle(this.state.activeSection);
+    const section = this.getSection(this.state.activeSection);
 
     if (this.props.fetchingSettings) {
       pageTitle += ' - Loading...';
@@ -158,11 +90,7 @@ class Configure extends React.Component {
             <h1>{pageTitle}</h1>
             { this.props.saveFetchingError }
             { this.props.fetchSettingsError }
-            {
-              this.state.activeSection === 'comments'
-              ? this.getCommentSettings()
-              : this.getEmbed()
-            }
+            { section }
           </div>
         </div>
     );

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

@@ -0,0 +1,49 @@
+import React, {Component} from 'react'
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+import styles from './Configure.css';
+import {
+  List,
+  ListItem,
+  Button
+} from 'react-mdl';
+
+class EmbedLink extends Component {
+
+  constructor (props) {
+    super(props);
+
+    this.state = {copied: false};
+  }
+
+  copyToClipBoard = () => {
+    const copyTextarea = document.querySelector(`.${styles.embedInput}`);
+    copyTextarea.select();
+
+    try {
+      document.execCommand('copy');
+      this.setState({copied: true});
+    } catch (err) {
+      console.error('Unable to copy', err);
+    }
+  }
+
+  render () {
+    const embedText = `<div id='coralStreamEmbed'></div><script type='text/javascript' src='${window.location.protocol}//pym.nprapps.org/pym.v1.min.js'></script><script>var pymParent = new pym.Parent('coralStreamEmbed', '${window.location.protocol}//${window.location.host}/embed/stream', {title: 'Comments'});</script>`;
+
+    return <List>
+      <ListItem className={styles.configSettingEmbed}>
+        <p>{lang.t('configure.copy-and-paste')}</p>
+        <textarea rows={5} type='text' className={styles.embedInput} value={embedText} readOnly={true}/>
+        <Button raised colored className={styles.copyButton} onClick={this.copyToClipBoard}>
+          {lang.t('embedlink.copy')}
+        </Button>
+        <div className={styles.copiedText}>{this.state.copied && 'Copied!'}</div>
+      </ListItem>
+    </List>;
+  }
+}
+
+export default EmbedLink
+
+const lang = new I18n(translations);

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../../translations.json';
+import styles from './Configure.css';
+import {
+  Card
+} from 'react-mdl';
+
+const Wordlist = () => <Card id='bannedWordlist'>
+  <h4 className={styles.bannedWordHeader}>Write the bannned words list</h4>
+  <p className={styles.bannedWordText}>Comments which contain these words or phrases, not seperated by commas and not
+  case sensitive, will be automatically removed from the comment stream.</p>
+</Card>;
+
+export default Wordlist;
+
+const lang = new I18n(translations);

client/coral-admin/src/translations.json

@@ -72,6 +72,7 @@
       "include-text": "Incluir tu texto aqui.",
       "comment-settings": "Configuración de Comentarios",
       "embed-comment-stream": "Colocar Hilo de Comentarios",
+      "wordlist": "tracundeme",
       "save-changes": "Guardar Cambios",
       "copy-and-paste": "Copiar y pegar el código de más abajo en tu CMS para colocar la caja de comentarios en tus articulos",
       "moderate": "Moderar",