saving my place

.gitignore

@@ -17,4 +17,5 @@ coverage/
 plugins.json
 plugins/*
 !plugins/coral-plugin-facebook-auth
+**/node_modules/*
 !plugins/coral-plugin-respect

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

@@ -45,7 +45,7 @@ const Comment = ({actions = [], ...props}) => {
         <div className={styles.moderateArticle}>
           Story: {props.comment.asset.title}
           {!props.currentAsset && (
-            <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate &rarr;</Link>
+            <Link to={`/admin/moderate/${props.comment.asset.id}`}>Moderate →</Link>
           )}
         </div>
         <div className={styles.itemBody}>

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

@@ -2,6 +2,11 @@ import React, {Component, PropTypes} from 'react';
 import {Icon} from 'coral-ui';
 import styles from './FlagBox.css';
 
+const shortReasons = {
+  'This comment is offensive': 'Offensive',
+  'This looks like an ad/marketing': 'Spam/Ads'
+};
+
 class FlagBox extends Component {
   constructor () {
     super();
@@ -16,6 +21,13 @@ class FlagBox extends Component {
     }));
   }
 
+  reasonMap = (reason) => {
+    const shortReason = shortReasons[reason];
+
+    // if the short reason isn't found, just return the long one.
+    return shortReason ? shortReason : reason;
+  }
+
   render() {
     const {props} = this;
     return (
@@ -23,19 +35,19 @@ class FlagBox extends Component {
         <div className={styles.container}>
           <div className={styles.header}>
             <Icon name='flag'/><h3>Flags ({props.actionSummaries.length}):</h3>
-            <ul>
+            <div>
               {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+                <span key={i}>{this.reasonMap(action.reason)} (<strong>{action.count}</strong>)</span>
               )}
-            </ul>
-            {/* <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>*/}
+            </div>
+            <a onClick={this.toggleDetail} className={styles.moreDetail}>More detail</a>
           </div>
           {this.state.showDetail && (<div className={styles.detail}>
-            <ul>
-              {props.actionSummaries.map((action, i) =>
-                <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
-              )}
-            </ul>
+          <ul>
+            {props.actionSummaries.map((action, i) =>
+              <li key={i}>{this.reasonMap(action.reason)} (<strong>{action.count}</strong>)</li>
+            )}
+          </ul>
           </div>)}
         </div>
       </div>
@@ -44,7 +56,9 @@ class FlagBox extends Component {
 }
 
 FlagBox.propTypes = {
-  actionSummaries: PropTypes.array.isRequired
+  actionSummaries: PropTypes.arrayOf(PropTypes.shape({
+
+  })).isRequired
 };
 
 export default FlagBox;