Merge branch 'mod-queue-load-more' of github.com:coralproject/talk into mod-queue-load-more

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

@@ -27,23 +27,21 @@ class ModerationContainer extends Component {
 
   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}));
-    key('r', () => this.moderate(false));
-    key('t', () => this.moderate(true));
+    key('j', this.select(true));
+    key('k', this.select(false));
+    key('r', this.moderate(false));
+    key('t', this.moderate(true));
   }
 
-  moderate = (accept) => {
-    const {data, route, acceptComment, rejectComment} = this.props;
+  moderate = (accept) => () => {
+    const {acceptComment, rejectComment} = this.props;
     const {selectedIndex} = this.state;
-    const activeTab = route.path === ':id' ? 'premod' : route.path;
-    const comments = data[activeTab];
+    const comments = this.getComments();
     const commentId = {commentId: comments[selectedIndex].id};
 
     if (accept) {
@@ -51,7 +49,30 @@ class ModerationContainer extends Component {
     } else {
       rejectComment(commentId);
     }
+  }
 
+  getComments = () => {
+    const {data, route} = this.props;
+    const activeTab = route.path === ':id' ? 'premod' : route.path;
+    return data[activeTab];
+  }
+
+  select = (next) => () => {
+    if (next) {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex < this.getComments().length - 1
+            ? prevState.selectedIndex + 1 : prevState.selectedIndex
+        }));
+    } else {
+      this.setState(prevState =>
+        ({
+          ...prevState,
+          selectedIndex: prevState.selectedIndex > 0 ?
+            prevState.selectedIndex - 1 : prevState.selectedIndex
+        }));
+    }
   }
 
   selectSort = (sort) => {
@@ -142,8 +163,10 @@ class ModerationContainer extends Component {
         <BanUserDialog
           open={moderation.banDialog}
           user={moderation.user}
+          commentId={moderation.commentId}
           handleClose={props.hideBanUserDialog}
           handleBanUser={props.banUser}
+          rejectComment={props.rejectComment}
         />
       <ModerationKeysModal
           open={moderation.modalOpen}

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

@@ -10,9 +10,9 @@ const ModerationHeader = props => (
           props.asset ?
             <div className={`mdl-tabs__tab-bar ${styles.moderateAsset}`}>
               <Link className="mdl-tabs__tab" to="/admin/moderate">All Streams</Link>
-              <a className="mdl-tabs__tab">
-                {props.asset.title}
-                <a href={props.asset.url} className={styles.settingsButton}><Icon name="settings"/></a>
+              <a className="mdl-tabs__tab" href={props.asset.url}>
+                <span>{props.asset.title}</span>
+                <Icon className={styles.settingsButton} name="open_in_new"/>
               </a>
               <Link className="mdl-tabs__tab" to="/admin/streams">Select Stream</Link>
             </div>

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

@@ -84,11 +84,10 @@ span {
   margin-bottom: -1px;
 
   .settingsButton {
-    i {
-      vertical-align: middle;
-      margin-left: 10px;
-      margin-top: -4px;
-    }
+    vertical-align: middle;
+    margin-left: 10px;
+    margin-top: -4px;
+    font-size: 16px;
   }
 
   .moderateAsset {
@@ -114,7 +113,15 @@ span {
       }
 
       &:nth-child(2) {
-       text-align: center;
+        span {
+          text-align: center;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+          max-width: 344px;
+          display: inline-block;
+          vertical-align: top;
+        }
       }
 
       &:last-child {