Adding keyboard selection of comments.

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import timeago from 'timeago.js';
-import Linkify from 'react-linkify';
-
-import styles from './ModerationList.css';
-
-import I18n from 'coral-framework/modules/i18n/i18n';
-import translations from '../translations.json';
-
-import Highlighter from 'react-highlight-words';
-import {Icon} from 'coral-ui';
-import ActionButton from './ActionButton';
-
-const linkify = new Linkify();
-
-// Render a single comment for the list
-const Comment = props => {
-  const {comment, author} = props;
-  let authorStatus = author.status;
-  const links = linkify.getMatches(comment.body);
-
-  return (
-    <li tabIndex={props.index} className={`mdl-card mdl-shadow--2dp ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
-      <div className={styles.itemHeader}>
-        <div className={styles.author}>
-          <span>{author.username || lang.t('comment.anon')}</span>
-          <span className={styles.created}>{timeago().format(comment.createdAt || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}</span>
-          {comment.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
-        </div>
-        <div className={styles.sideActions}>
-          {links ?
-          <span className={styles.hasLinks}><Icon name='error_outline'/> Contains Link</span> : null}
-          <div className={`actions ${styles.actions}`}>
-            {props.modActions.map(
-              (action, i) =>
-              <ActionButton
-                option={action}
-                key={i}
-                type='COMMENTS'
-                comment={comment}
-                user={author}
-                menuOptionsMap={props.menuOptionsMap}
-                onClickAction={props.onClickAction}
-                onClickShowBanDialog={props.onClickShowBanDialog}/>
-            )}
-          </div>
-          {authorStatus === 'banned' ?
-          <span className={styles.banned}><Icon name='error_outline'/> {lang.t('comment.banned_user')}</span> : null}
-        </div>
-      </div>
-      <div className={styles.itemBody}>
-        <span className={styles.body}>
-          <Linkify  component='span' properties={{style: linkStyles}}>
-            <Highlighter
-              searchWords={props.suspectWords}
-              textToHighlight={comment.body} />
-          </Linkify>
-        </span>
-      </div>
-    </li>
-  );
-};
-
-export default Comment;
-
-const linkStyles = {
-  backgroundColor: 'rgb(255, 219, 135)',
-  padding: '1px 2px'
-};
-
-const lang = new I18n(translations);

client/coral-admin/src/components/ModerationList.css

@@ -178,6 +178,10 @@
   }
 }
 
+.selected {
+  border-radius: 10px;
+}
+
 
 .actionButton {
   transform: scale(.8);

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

@@ -20,13 +20,20 @@ import NotFoundAsset from './components/NotFoundAsset';
 import ModerationKeysModal from '../../components/ModerationKeysModal';
 
 class ModerationContainer extends Component {
+  state = {
+    selectedIndex: 0
+  }
+
   componentWillMount() {
     const {toggleModal, singleView} = this.props;
+    const {selectedIndex} = this.state;
 
     this.props.fetchSettings();
     key('s', () => singleView());
     key('shift+/', () => toggleModal(true));
     key('esc', () => toggleModal(false));
+    key('j', () => this.setState({selectedIndex: selectedIndex + 1}));
+    key('k', () => this.setState({selectedIndex: selectedIndex > 0 ? selectedIndex + 1 : selectedIndex}));
   }
 
   componentWillUnmount() {
@@ -81,6 +88,7 @@ class ModerationContainer extends Component {
           currentAsset={asset}
           comments={comments}
           activeTab={activeTab}
+          selectedIndex={this.state.selectedIndex}
           suspectWords={settings.wordlist.suspect}
           showBanUserDialog={props.showBanUserDialog}
           acceptComment={props.acceptComment}

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

@@ -7,7 +7,7 @@ import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations';
 
 const lang = new I18n(translations);
-const ModerationQueue = ({comments, ...props}) => {
+const ModerationQueue = ({comments, selectedIndex, ...props}) => {
   return (
     <div id="moderationList">
       <ul style={{paddingLeft: 0}}>
@@ -20,6 +20,7 @@ const ModerationQueue = ({comments, ...props}) => {
             index={i}
             comment={comment}
             commentType={props.activeTab}
+            selected={i === selectedIndex}
             suspectWords={props.suspectWords}
             actions={actionsMap[status]}
             showBanUserDialog={props.showBanUserDialog}

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

@@ -22,7 +22,7 @@ const Comment = ({actions = [], ...props}) => {
   const actionSummaries = props.comment.action_summaries;
   return (
     <li tabIndex={props.index}
-        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
+        className={`mdl-card mdl-shadow--2dp ${styles.Comment} ${styles.listItem} ${props.selected ? styles.selected : ''} ${props.isActive && !props.hideActive ? styles.activeItem : ''}`}>
       <div className={styles.container}>
         <div className={styles.itemHeader}>
         <div className={styles.author}>

client/coral-admin/src/containers/ModerationQueue/components/styles.css

@@ -186,6 +186,10 @@ span {
     border-bottom: none;
   }
 
+  &.selected {
+    box-shadow: 0px 0px 15px 5px rgb(255, 255, 111);
+  }
+
   .context {
     a {
       color: #f36451;