Sending actions to ModerationList.

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

@@ -5,7 +5,7 @@ import Hammer from 'hammerjs';
 import Comment from 'components/Comment';
 
 // Each action has different meaning and configuration
-const modActions = {
+const actionsMap = {
   'reject': {status: 'rejected', icon: 'close', key: 'r'},
   'approve': {status: 'accepted', icon: 'done', key: 't'},
   'flag': {status: 'flagged', icon: 'flag', filter: 'Untouched'},
@@ -17,12 +17,12 @@ export default class ModerationList extends React.Component {
   static propTypes = {
     isActive: PropTypes.bool,
     singleView: PropTypes.bool,
-    commentIds: PropTypes.arrayOf(PropTypes.string),
-    actionIds: PropTypes.arrayOf(PropTypes.string),
-    comments: PropTypes.object,
-    users: PropTypes.object,
-    actions: PropTypes.object,
-    onClickAction: PropTypes.func,
+    commentIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    actionIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+    comments: PropTypes.object.isRequired,
+    users: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+    onClickAction: PropTypes.func.isRequired,
 
     // list of actions (flags, etc) associated with the comments
     modActions: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -74,11 +74,12 @@ export default class ModerationList extends React.Component {
 
   // Add key handlers. Each action has one and added j/k for moving around
   bindKeyHandlers () {
-    this.props.modActions.filter(action => modActions[action].key).forEach(action => {
-      key(modActions[action].key, 'moderationList', () => this.props.isActive && this.actionKeyHandler(modActions[action].status));
+    const {modActions, isActive} = this.props;
+    modActions.filter(action => modActions[action].key).forEach(action => {
+      key(modActions[action].key, 'moderationList', () => isActive && this.actionKeyHandler(modActions[action].status));
     });
-    key('j', 'moderationList', () => this.props.isActive && this.moveKeyHandler('down'));
-    key('k', 'moderationList', () => this.props.isActive && this.moveKeyHandler('up'));
+    key('j', 'moderationList', () => isActive && this.moveKeyHandler('down'));
+    key('k', 'moderationList', () => isActive && this.moveKeyHandler('up'));
     key.setScope('moderationList');
   }
 
@@ -138,6 +139,7 @@ export default class ModerationList extends React.Component {
   }
 
   mapModItems = (itemId, index) => {
+
     const {comments, users, actions, modActions, suspectWords, hideActive} = this.props;
     const {active} = this.state;
 
@@ -147,6 +149,7 @@ export default class ModerationList extends React.Component {
     let modItem;
 
     if (item.body) {
+
       // If the item is a comment...
       const author = users[item.author_id];
       modItem = <Comment
@@ -158,10 +161,11 @@ export default class ModerationList extends React.Component {
         onClickAction={this.onClickAction}
         onClickShowBanDialog={this.onClickShowBanDialog}
         modActions={modActions}
-        actionsMap={modActions}
+        actionsMap={actionsMap}
         isActive={itemId === active}
         hideActive={hideActive} />;
     } else {
+
       // If the item is an action...
       modItem = <h2>Action</h2>;
     }

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

@@ -32,4 +32,3 @@ export default connect(
   mapStateToProps,
   mapDispatchToProps
 )(LayoutContainer);
-

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

@@ -10,15 +10,15 @@ import translations from '../../translations.json';
 
 const lang = new I18n(translations);
 
-export default ({onTabClick, ...props}) => (
+export default (props) => (
   <div>
     <div className='mdl-tabs mdl-js-tabs mdl-js-ripple-effect'>
       <div className={`mdl-tabs__tab-bar ${styles.tabBar}`}>
-        <a href='#pending' onClick={() => onTabClick('pending')}
+        <a href='#pending' onClick={() => props.onTabClick('pending')}
            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.pending')}</a>
-        <a href='#rejected' onClick={() => onTabClick('rejected')}
+        <a href='#rejected' onClick={() => props.onTabClick('rejected')}
            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.rejected')}</a>
-        <a href='#flagged' onClick={() => onTabClick('flagged')}
+        <a href='#flagged' onClick={() => props.onTabClick('flagged')}
            className={`mdl-tabs__tab ${styles.tab}`}>{lang.t('modqueue.flagged')}</a>
       </div>
       <div className={`mdl-tabs__panel is-active ${styles.listContainer}`} id='pending'>
@@ -29,6 +29,8 @@ export default ({onTabClick, ...props}) => (
           commentIds={props.premodIds}
           comments={props.comments.byId}
           users={props.users.byId}
+          actionIds={props.actions.ids}
+          actions={props.actions.byId}
           onClickAction={props.updateStatus}
           onClickShowBanDialog={props.showBanUserDialog}
           modActions={['reject', 'approve', 'ban']}
@@ -48,6 +50,8 @@ export default ({onTabClick, ...props}) => (
           commentIds={props.rejectedIds}
           comments={props.comments.byId}
           users={props.users.byId}
+          actionIds={props.actions.ids}
+          actions={props.actions.byId}
           onClickAction={props.updateStatus}
           modActions={['approve']}
           loading={props.comments.loading}
@@ -61,6 +65,8 @@ export default ({onTabClick, ...props}) => (
           commentIds={props.flaggedIds}
           comments={props.comments.byId}
           users={props.users.byId}
+          actionIds={props.actions.ids}
+          actions={props.actions.byId}
           onClickAction={props.updateStatus}
           modActions={['reject', 'approve']}
           loading={props.comments.loading}/>

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

@@ -2,7 +2,8 @@ import {Map, Set} from 'immutable';
 import * as types from '../constants/actions';
 
 const initialState = Map({
-  ids: Set()
+  ids: Set(),
+  byId: Map()
 });
 
 export default (state = initialState, action) => {
@@ -19,6 +20,5 @@ const addActions = (state, action) => {
     memo[action.item_id] = action;
     return memo;
   }, {});
-  const newIds = state.get('ids').concat(ids);
-  return state.merge(map).set('ids', newIds);
+  return state.set('byId', map).set('ids', ids);
 };