added flag functionality

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

@@ -7,14 +7,17 @@ import {Link} from 'react-router';
 import styles from './styles.css';
 import {Icon} from 'coral-ui';
 import ActionButton from '../../../components/ActionButton';
+import FlagBox from './FlagBox';
+
 const linkify = new Linkify();
-const lang = new I18n(translations);
 
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from 'coral-admin/src/translations.json';
+const lang = new I18n(translations);
 
 const Comment = ({actions = [], ...props}) => {
   const links = linkify.getMatches(props.comment.body);
+  const actionSumaries = 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 : ''}`}>
@@ -24,7 +27,7 @@ const Comment = ({actions = [], ...props}) => {
           <span className={styles.created}>
             {timeago().format(props.comment.created_at || (Date.now() - props.index * 60 * 1000), lang.getLocale().replace('-', '_'))}
           </span>
-          {props.flagged ? <p className={styles.flagged}>{lang.t('comment.flagged')}</p> : null}
+          {props.comment.action_summaries ? <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}
@@ -59,11 +62,11 @@ const Comment = ({actions = [], ...props}) => {
           </Linkify>
         </p>
       </div>
+      {actionSumaries && <FlagBox actionSumaries={actionSumaries} />}
 
       {/* <span className={styles.context}>*/}
        {/* <a>View context</a>*/}
      {/* </span>*/}
-
     </li>
   );
 };

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

@@ -0,0 +1,19 @@
+import React, {PropTypes} from 'react';
+import styles from './styles.css';
+
+const FlagBox = props => (
+  <div className={styles.flagBox}>
+    <h3>Flags:</h3>
+    <ul>
+      {props.actionSumaries.map((action, i) =>
+        <li key={i}>{!action.reason ? <i>No reason provided</i> : action.reason} (<strong>{action.count}</strong>)</li>
+      )}
+    </ul>
+  </div>
+);
+
+FlagBox.propTypes = {
+  actionSumaries: PropTypes.array.isRequired
+};
+
+export default FlagBox;

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

@@ -317,4 +317,11 @@ span {
   }
 }
 
-
+.flagBox {
+  border-top: 1px solid rgba(66, 66, 66, 0.12);
+  h3 {
+    font-size: 14px;
+    margin: 0;
+    font-weight: 500;
+  }
+}

client/coral-admin/src/graphql/queries/modQueueQuery.graphql

@@ -18,6 +18,12 @@ query ModQueue ($asset_id: ID!) {
         asset_id: $asset_id
     }) {
         ...commentView
+        action_summaries {
+          count
+          ... on FlagActionSummary {
+            reason
+          }
+        }
     }
     rejected: comments(query: {
         statuses: [REJECTED],

graph/resolvers/root_query.js

@@ -29,12 +29,7 @@ const RootQuery = {
 
     if (user != null && user.hasRoles('ADMIN') && action_type) {
       return Actions.getByTypes({action_type, item_type: 'COMMENTS'})
-        .then((actions) => {
-
-          // Map the actions from the items referenced byt this query. The actions
-          // returned by this query are explicitly going to be distinct by their
-          // `item_id`'s.
-          let ids = actions.map((action) => action.item_id);
+        .then((ids) => {
 
           // Perform the query using the available resolver.
           return Comments.getByQuery({ids, statuses, asset_id, parent_id, limit, cursor, sort});