update ModerationQueue and CommentStream to not use immutable.js deep in the stack

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

@@ -14,8 +14,7 @@ const linkify = new Linkify();
 
 // Render a single comment for the list
 export default props => {
-  const comment = props.comment.toJS();
-  const author = props.author.toJS();
+  const {comment, author} = props;
   let authorStatus = author.status;
   const links = linkify.getMatches(comment.body);
 
@@ -53,8 +52,7 @@ export default props => {
 
 // Get the button of the action performed over a comment if any
 const getActionButton = (action, i, props) => {
-  const comment = props.comment.toJS();
-  const author = props.author.toJS();
+  const {comment, author} = props;
   const status = comment.status;
   const flagged = comment.flagged;
   const banned = (author.status === 'banned');
@@ -74,7 +72,9 @@ const getActionButton = (action, i, props) => {
     );
   }
   return (
-    <FabButton icon={props.actionsMap[action].icon} className={styles.actionButton}
+    <FabButton
+      className={styles.actionButton}
+      icon={props.actionsMap[action].icon}
       cStyle={action}
       key={i}
       onClick={() => props.onClickAction(props.actionsMap[action].status, comment.id)}

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

@@ -4,6 +4,8 @@ import styles from './CommentList.css';
 import key from 'keymaster';
 import Hammer from 'hammerjs';
 import Comment from 'components/Comment';
+import head from 'lodash/head';
+import last from 'lodash/last';
 
 // Each action has different meaning and configuration
 const actions = {
@@ -37,7 +39,7 @@ export default class CommentList extends React.Component {
   // If entering to singleview and no active, active is the first eleement
   componentWillReceiveProps (nextProps) {
     if (nextProps.singleView && !this.state.active) {
-      this.setState({active: nextProps.commentIds.get(0)});
+      this.setState({active: nextProps.commentIds[0]});
     }
   }
 
@@ -81,12 +83,12 @@ export default class CommentList extends React.Component {
     const {commentIds} = this.props;
     const {active} = this.state;
     // check boundaries
-    if (active === null || !commentIds.size) {
-      this.setState({active: commentIds.get(0)});
-    } else if (direction === 'up' && active !== commentIds.first()) {
-      this.setState({active: commentIds.get(commentIds.indexOf(active) - 1)});
-    } else if (direction === 'down' && active !== commentIds.last()) {
-      this.setState({active: commentIds.get(commentIds.indexOf(active) + 1)});
+    if (active === null || !commentIds.length) {
+      this.setState({active: head(commentIds)});
+    } else if (direction === 'up' && active !== head(commentIds)) {
+      this.setState({active: commentIds[commentIds.indexOf(active) - 1]});
+    } else if (direction === 'down' && active !== last(commentIds)) {
+      this.setState({active: commentIds[commentIds.indexOf(active) + 1]});
     }
 
     // scroll to the position
@@ -105,10 +107,10 @@ export default class CommentList extends React.Component {
     // activate the next comment
     if (id === this.state.active) {
       const {commentIds} = this.props;
-      if (commentIds.last() === this.state.active) {
-        this.setState({active: commentIds.get(commentIds.size - 2)});
+      if (last(commentIds) === this.state.active) {
+        this.setState({active: commentIds[commentIds.length - 2]});
       } else {
-        this.setState({active: commentIds.get(Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.size - 1))});
+        this.setState({active: commentIds[Math.min(commentIds.indexOf(this.state.active) + 1, commentIds.l - 1)]});
       }
     }
     this.props.onClickAction(action, id, author_id);
@@ -119,16 +121,20 @@ export default class CommentList extends React.Component {
   }
 
   render () {
-    const {singleView, commentIds, comments, users, hideActive, key} = this.props;
-    const {active} = this.state;
+    const {singleView, commentIds, hideActive, key} = this.props;
+    let {active} = this.state;
+
+    const users = this.props.users.toJS();
+    const comments = this.props.comments.toJS();
 
     return (
       <ul className={`${styles.list} ${singleView ? styles.singleView : ''}`} {...key}>
         {commentIds.map((commentId, index) => {
-          const comment = comments.get(commentId);
+          console.log('inside the map', typeof commentId, commentId, typeof active, active);
+          const comment = comments[commentId];
+          const author = users[comment.author_id];
           return <Comment comment={comment}
-            author={users.get(comment.get('author_id'))}
-            ref={el => { if (el && commentId === active) { this._active = el; } }}
+            author={author}
             key={index}
             index={index}
             onClickAction={this.onClickAction}
@@ -137,7 +143,7 @@ export default class CommentList extends React.Component {
             actionsMap={actions}
             isActive={commentId === active}
             hideActive={hideActive} />;
-        }).toArray()}
+        })}
       </ul>
     );
   }

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

@@ -46,9 +46,9 @@ class CommentStream extends React.Component {
         <CommentBox onSubmit={this.onSubmit} />
         <CommentList isActive hideActive
           singleView={false}
-          commentIds={comments.get('ids')}
-          comments={comments.get('byId')}
-          users={users.get('byId')}
+          commentIds={comments.ids}
+          comments={comments.byId}
+          users={users.byId}
           onClickAction={this.onClickAction}
           actions={['flag']}
           loading={comments.loading} />
@@ -58,4 +58,9 @@ class CommentStream extends React.Component {
   }
 }
 
-export default connect(({comments, users}) => ({comments, users}))(CommentStream);
+const mapStateToProps = state => ({
+  comments: state.comments.toJS(),
+  users: state.users.toJS()
+});
+
+export default connect(mapStateToProps)(CommentStream);

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

@@ -79,6 +79,11 @@ class ModerationQueue extends React.Component {
     const {comments, users} = this.props;
     const {activeTab, singleView, modalOpen} = this.state;
 
+    const c = comments.toJS();
+    const premodIds = c.ids.filter(id => c.byId[id].status === 'premod');
+    const rejectedIds = c.ids.filter(id => c.byId[id].status === 'rejected');
+    const flaggedIds = c.ids.filter(id => c.byId[id].flagged === true);
+
     return (
       <div>
         <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
@@ -94,14 +99,7 @@ class ModerationQueue extends React.Component {
             <CommentList
               isActive={activeTab === 'pending'}
               singleView={singleView}
-              commentIds={
-                comments.get('ids')
-                  .filter(id =>
-                    comments
-                    .get('byId')
-                    .get(id)
-                    .get('status') === 'premod')
-              }
+              commentIds={premodIds}
               comments={comments.get('byId')}
               users={users.get('byId')}
               onClickAction={(action, commentId) => this.onCommentAction(action, commentId)}
@@ -118,15 +116,7 @@ class ModerationQueue extends React.Component {
             <CommentList
               isActive={activeTab === 'rejected'}
               singleView={singleView}
-              commentIds={
-                comments
-                  .get('ids')
-                  .filter(id =>
-                    comments
-                      .get('byId')
-                      .get(id)
-                      .get('status') === 'rejected')
-              }
+              commentIds={rejectedIds}
               comments={comments.get('byId')}
               users={users.get('byId')}
               onClickAction={(action, id) => this.onCommentAction(action, id)}
@@ -137,10 +127,7 @@ class ModerationQueue extends React.Component {
             <CommentList
               isActive={activeTab === 'rejected'}
               singleView={singleView}
-              commentIds={comments.get('ids').filter(id => {
-                const data = comments.get('byId').get(id);
-                return !data.get('status') && data.get('flagged') === true;
-              })}
+              commentIds={flaggedIds}
               comments={comments.get('byId')}
               users={users.get('byId')}
               onClickAction={(action, id) => this.onCommentAction(action, id)}