highlight suspect words

client/coral-admin/src/components/Comment.js

@@ -8,6 +8,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../translations.json';
 
 import {Icon} from 'react-mdl';
+import Highlighter from 'react-highlight-words';
 import {FabButton, Button} from 'coral-ui';
 
 const linkify = new Linkify();
@@ -31,7 +32,7 @@ export default props => {
           {links ?
           <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
           <div className={`actions ${styles.actions}`}>
-            {props.actions.map((action, i) => getActionButton(action, i, props))}
+            {props.modActions.map((action, i) => getActionButton(action, i, props))}
           </div>
         </div>
         <div>
@@ -42,7 +43,9 @@ export default props => {
       <div className={styles.itemBody}>
         <span className={styles.body}>
           <Linkify  component='span' properties={{style: linkStyles}}>
-            {comment.body}
+            <Highlighter
+              searchWords={props.suspectWords}
+              textToHighlight={comment.body} />
           </Linkify>
         </span>
       </div>

client/coral-admin/src/components/CommentList.js

@@ -5,7 +5,7 @@ import Hammer from 'hammerjs';
 import Comment from 'components/Comment';
 
 // Each action has different meaning and configuration
-const actions = {
+const modActions = {
   'reject': {status: 'rejected', icon: 'close', key: 'r'},
   'approve': {status: 'accepted', icon: 'done', key: 't'},
   'flag': {status: 'flagged', icon: 'flag', filter: 'Untouched'},
@@ -21,18 +21,12 @@ export default class CommentList extends React.Component {
     comments: PropTypes.object.isRequired,
     users: PropTypes.object.isRequired,
     onClickAction: PropTypes.func,
-    actions: PropTypes.arrayOf(PropTypes.string),
+    modActions: PropTypes.arrayOf(PropTypes.string),
     loading: PropTypes.bool,
     // list of actions (flags, etc) associated with the comments
-    commentActions: PropTypes.arrayOf(
-      PropTypes.shape({
-        action_type: PropTypes.string,
-        count: PropTypes.number,
-        current_user: PropTypes.string,
-        item_id: PropTypes.string,
-        item_type: PropTypes.string
-      })
-    ),
+    actions: PropTypes.shape({
+      ids: PropTypes.arrayOf(PropTypes.string)
+    }).isRequired,
     suspectWords: PropTypes.arrayOf(PropTypes.string)
   }
 
@@ -65,22 +59,22 @@ export default class CommentList extends React.Component {
 
   // Add swipe to approve or reject
   bindGestures () {
-    const {actions} = this.props;
+    const {modActions} = this.props;
     this._hammer = new Hammer(this.base);
     this._hammer.get('swipe').set({direction: Hammer.DIRECTION_HORIZONTAL});
 
-    if (actions.indexOf('reject') !== -1) {
+    if (modActions.indexOf('reject') !== -1) {
       this._hammer.on('swipeleft', () => this.props.singleView && this.actionKeyHandler('Rejected'));
     }
-    if (actions.indexOf('approve') !== -1) {
+    if (modActions.indexOf('approve') !== -1) {
       this._hammer.on('swiperight', () => this.props.singleView && this.actionKeyHandler('Approved'));
     }
   }
 
   // Add key handlers. Each action has one and added j/k for moving around
   bindKeyHandlers () {
-    this.props.actions.filter(action => actions[action].key).forEach(action => {
-      key(actions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(actions[action].status));
+    this.props.modActions.filter(action => modActions[action].key).forEach(action => {
+      key(modActions[action].key, 'commentList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status));
     });
     key('j', 'commentList', () => this.props.isActive && this.moveKeyHandler('down'));
     key('k', 'commentList', () => this.props.isActive && this.moveKeyHandler('up'));
@@ -143,7 +137,7 @@ export default class CommentList extends React.Component {
   }
 
   render () {
-    const {singleView, commentIds, comments, users, hideActive, key, suspectWords, commentActions} = this.props;
+    const {singleView, commentIds, comments, users, hideActive, key, suspectWords} = this.props;
     const {active} = this.state;
 
     return (
@@ -154,9 +148,7 @@ export default class CommentList extends React.Component {
         {commentIds.map((commentId, index) => {
           const comment = comments[commentId];
           const author = users[comment.author_id];
-          const localActions = commentActions.filter(action => action.item_id === commentId);
           return <Comment
-            commentActions={localActions}
             suspectWords={suspectWords}
             comment={comment}
             author={author}
@@ -164,8 +156,8 @@ export default class CommentList extends React.Component {
             index={index}
             onClickAction={this.onClickAction}
             onClickShowBanDialog={this.onClickShowBanDialog}
-            actions={this.props.actions}
-            actionsMap={actions}
+            modActions={this.props.modActions}
+            actionsMap={modActions}
             isActive={commentId === active}
             hideActive={hideActive} />;
         })}

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

@@ -111,7 +111,7 @@ class ModerationQueue extends React.Component {
           <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
             <CommentList
               suspectWords={['fishy', 'shady']}
-              commentActions={[]}
+              actions={actions}
               isActive={activeTab === 'pending'}
               singleView={singleView}
               commentIds={premodIds}
@@ -119,7 +119,7 @@ class ModerationQueue extends React.Component {
               users={users.byId}
               onClickAction={(action, comment) => this.onCommentAction(action, comment)}
               onClickShowBanDialog={(userId, userName, commentId) => this.showBanUserDialog(userId, userName, commentId)}
-              actions={['reject', 'approve', 'ban']}
+              modActions={['reject', 'approve', 'ban']}
               loading={comments.loading} />
             <BanUserDialog
               open={comments.showBanUserDialog}
@@ -129,26 +129,28 @@ class ModerationQueue extends React.Component {
         </div>
           <div className={`mdl-tabs__panel ${styles.listContainer}`} id='rejected'>
             <CommentList
-              commentActions={[]}
+              actions={actions}
+              suspectWords={[]}
               isActive={activeTab === 'rejected'}
               singleView={singleView}
               commentIds={rejectedIds}
               comments={comments.byId}
               users={users.byId}
               onClickAction={(action, comment) => this.onCommentAction(action, comment)}
-              actions={['approve']}
+              modActions={['approve']}
               loading={comments.loading} />
           </div>
           <div className={`mdl-tabs__panel ${styles.listContainer}`} id='flagged'>
             <CommentList
               isActive={activeTab === 'rejected'}
-              commentActions={[]}
+              actions={actions}
+              suspectWords={[]}
               singleView={singleView}
               commentIds={flaggedIds}
               comments={comments.byId}
               users={users.byId}
               onClickAction={(action, comment) => this.onCommentAction(action, comment)}
-              actions={['reject', 'approve']}
+              modActions={['reject', 'approve']}
               loading={comments.loading} />
           </div>
           <ModerationKeysModal open={modalOpen}

package.json

@@ -127,6 +127,7 @@
     "react": "15.3.2",
     "react-addons-test-utils": "15.3.2",
     "react-dom": "15.3.2",
+    "react-highlight-words": "^0.6.0",
     "react-linkify": "^0.1.3",
     "react-mdl": "^1.7.2",
     "react-mdl-selectfield": "^0.2.0",