add tag package to simplify wordlist ui

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

@@ -19,6 +19,7 @@ import translations from '../../translations.json';
 import EmbedLink from './EmbedLink';
 import CommentSettings from './CommentSettings';
 import Wordlist from './Wordlist';
+import has from 'lodash/has';
 
 class Configure extends React.Component {
   constructor (props) {
@@ -26,8 +27,6 @@ class Configure extends React.Component {
 
     this.state = {
       activeSection: 'comments',
-      banned: [],
-      suspect: [],
       changed: false,
       errors: {}
     };
@@ -37,18 +36,6 @@ class Configure extends React.Component {
     this.props.dispatch(fetchSettings());
   }
 
-  componentWillUpdate = (newProps) => {
-    if ((!this.props.settings
-      || !this.props.settings.wordlist)
-      && newProps.settings.wordlist
-      && newProps.settings.wordlist.length !== 0 ) {
-      this.setState({
-        banned: newProps.settings.wordlist.banned.join(', '),
-        suspect: newProps.settings.wordlist.suspect.join(', ')
-      });
-    }
-  }
-
   saveSettings = () => {
     this.props.dispatch(saveSettingsToServer());
     this.setState({changed: false});
@@ -58,11 +45,8 @@ class Configure extends React.Component {
     this.setState({activeSection});
   }
 
-  onChangeWordlist = (event, list) => {
-    event.preventDefault();
-    const newlist = event.target.value.toLowerCase();
-    this.setState({[list]: newlist, changed: true});
-    this.props.dispatch(updateWordlist(list, newlist.split(',').map(word => word.trim()) ));
+  onChangeWordlist = (listName, list) => {
+    this.props.dispatch(updateWordlist(listName, list));
   }
 
   onSettingUpdate = (setting) => {
@@ -81,6 +65,7 @@ class Configure extends React.Component {
 
   getSection (section) {
     const pageTitle = this.getPageTitle(section);
+    console.log('getSection', this.props);
     switch(section){
     case 'comments':
       return <CommentSettings
@@ -93,10 +78,12 @@ class Configure extends React.Component {
     case 'embed':
       return <EmbedLink title={pageTitle} />;
     case 'wordlist':
-      return <Wordlist
-        bannedWords={this.state.banned}
-        suspectWords={this.state.suspect}
-        onChangeWordlist={this.onChangeWordlist}/>;
+      return has(this, 'props.settings.wordlist')
+        ? <Wordlist
+          bannedWords={this.props.settings.wordlist.banned}
+          suspectWords={this.props.settings.wordlist.suspect}
+          onChangeWordlist={this.onChangeWordlist} />
+        : <p>loading wordlists</p>;
     }
   }
 

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

@@ -1,10 +1,14 @@
 import React from 'react';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
+import TagsInput from 'react-tagsinput';
+import tagStyles from 'react-tagsinput/react-tagsinput.css';
+
 import styles from './Configure.css';
-import {
-  Card
-} from 'react-mdl';
+
+import {Card} from 'react-mdl';
+
+console.log('tagStyles', tagStyles);
 
 const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
   <div>
@@ -12,23 +16,19 @@ const Wordlist = ({suspectWords, bannedWords, onChangeWordlist}) => (
     <Card id={styles.bannedWordlist} shadow={2}>
       <p className={styles.wordlistHeader}>{lang.t('configure.banned-word-header')}</p>
       <p className={styles.wordlistDesc}>{lang.t('configure.banned-word-text')}</p>
-      <textarea
-        rows={5}
-        type='text'
-        className={styles.wordlistInput}
-        onChange={e => onChangeWordlist(e, 'banned')}
-        value={bannedWords} />
+      <TagsInput
+        value={bannedWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={tags => onChangeWordlist('banned', tags)} />
     </Card>
     <h3>{lang.t('configure.suspect-words-title')}</h3>
     <Card id={styles.suspectWordlist} shadow={2}>
       <p className={styles.wordlistHeader}>{lang.t('configure.suspect-word-header')}</p>
       <p className={styles.wordlistDesc}>{lang.t('configure.suspect-word-text')}</p>
-      <textarea
-        rows={5}
-        type='text'
-        className={styles.wordlistInput}
-        onChange={e => onChangeWordlist(e, 'suspect')}
-        value={suspectWords} />
+      <TagsInput
+        value={suspectWords}
+        inputProps={{placeholder: 'word or phrase'}}
+        onChange={tags => onChangeWordlist('suspect', tags)} />
     </Card>
   </div>
 );

client/coral-admin/src/reducers/settings.js

@@ -24,7 +24,6 @@ export default (state = initialState, action) => {
 };
 
 const updateSettings = (state, action) => {
-  console.log('updateSettings', state, action);
   const s = state.set('fetchingSettings', false).set('fetchSettingsError', null);
   const settings = s.get('settings').merge(action.settings);
   return s.set('settings', settings);
@@ -42,6 +41,7 @@ const updateWordlist = (state, action) => {
 const saveComplete = (state, action) => {
   const s = state.set('fetchingSettings', false).set('saveSettingsError', null);
   const settings = s.get('settings').merge(action.settings);
+  console.log('saveComplete', settings.toJS());
   return s.set('settings', settings);
 };
 

package.json

@@ -132,6 +132,7 @@
     "react-onclickoutside": "^5.7.1",
     "react-redux": "^4.4.5",
     "react-router": "^3.0.0",
+    "react-tagsinput": "^3.14.0",
     "redux": "^3.6.0",
     "redux-mock-store": "^1.2.1",
     "redux-thunk": "^2.1.0",

views/admin.ejs

@@ -13,6 +13,56 @@
         margin: 0;
         background: #fff;
       }
+      .react-tagsinput {
+        background-color: #fff;
+        border: 1px solid #ccc;
+        overflow: hidden;
+        padding-left: 5px;
+        padding-top: 5px;
+      }
+
+      .react-tagsinput--focused {
+        border-color: rgb(142, 76, 65);
+      }
+
+      .react-tagsinput-tag {
+        background-color: rgb(244, 126, 107);
+        border-radius: 2px;
+        border: 1px solid rgb(142, 76, 65);
+        color: rgb(142, 76, 65);
+        display: inline-block;
+        font-family: sans-serif;
+        font-size: 13px;
+        font-weight: 400;
+        margin-bottom: 5px;
+        margin-right: 5px;
+        padding: 5px;
+      }
+
+      .react-tagsinput-remove {
+        cursor: pointer;
+        font-weight: bold;
+        color: rgb(101, 24, 23);
+      }
+
+      .react-tagsinput-tag a::before {
+        content: " ×";
+      }
+
+      .react-tagsinput-input {
+        background: transparent;
+        border: 0;
+        color: #777;
+        font-family: sans-serif;
+        font-size: 13px;
+        font-weight: 400;
+        margin-bottom: 6px;
+        margin-top: 1px;
+        outline: none;
+        padding: 5px;
+        width: 90px;
+      }
+
     </style>
   </head>
   <body>