fix how FlagActionSummaries works in the embed

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

@@ -10,6 +10,7 @@ import FlagBox from './FlagBox';
 import CommentType from './CommentType';
 import ActionButton from 'coral-admin/src/components/ActionButton';
 import BanUserButton from 'coral-admin/src/components/BanUserButton';
+import {getActionSummary} from 'coral-framework/utils';
 
 const linkify = new Linkify();
 
@@ -20,8 +21,8 @@ const lang = new I18n(translations);
 const Comment = ({actions = [], comment, ...props}) => {
   const links = linkify.getMatches(comment.body);
   const linkText = links ? links.map(link => link.raw) : [];
-  const actionSummaries = comment.action_summaries.filter(a => a.__typename === 'FlagActionSummary');
-  const flagActions = comment.actions.filter(a => a.__typename === 'FlagAction');
+  const flagActionSummaries = getActionSummary('FlagActionSummary', comment);
+  const flagActions = comment.actions && comment.actions.filter(a => a.__typename === 'FlagAction');
 
   return (
     <li tabIndex={props.index} className={`mdl-card ${props.selected ? 'mdl-shadow--8dp' : 'mdl-shadow--2dp'} ${styles.Comment} ${styles.listItem}`}>
@@ -71,7 +72,11 @@ const Comment = ({actions = [], comment, ...props}) => {
           </div>
         </div>
       </div>
-      {flagActions && <FlagBox actions={flagActions} actionSummaries={actionSummaries} />}
+      {
+        flagActions && flagActions.length
+        ? <FlagBox actions={flagActions} actionSummaries={flagActionSummaries} />
+        : null
+      }
     </li>
   );
 };

client/coral-embed-stream/src/Comment.js

@@ -22,11 +22,10 @@ import LoadMore from 'coral-embed-stream/src/LoadMore';
 import {Slot} from 'coral-framework';
 import IgnoredCommentTombstone from './IgnoredCommentTombstone';
 import {TopRightMenu} from './TopRightMenu';
+import {getActionSummary, getTotalActionCount, iPerformedThisAction} from 'coral-framework/utils';
 
 import styles from './Comment.css';
 
-const getActionSummary = (type, comment) => comment.action_summaries
-  .filter((a) => a.__typename === type)[0];
 const isStaff = (tags) => !tags.every((t) => t.name !== 'STAFF') ;
 
 // hold actions links (e.g. Like, Reply) along the comment footer
@@ -124,9 +123,16 @@ class Comment extends React.Component {
       commentIsIgnored,
     } = this.props;
 
-    const like = getActionSummary('LikeActionSummary', comment);
-    const flag = getActionSummary('FlagActionSummary', comment);
-    const dontagree = getActionSummary('DontAgreeActionSummary', comment);
+    const likeSummary = getActionSummary('LikeActionSummary', comment);
+    const flagSummary = getActionSummary('FlagActionSummary', comment);
+    const dontagreeSummary = getActionSummary('DontAgreeActionSummary', comment);
+    let myFlag = null;
+    if (iPerformedThisAction('FlagActionSummary', comment)) {
+      myFlag = flagSummary.find(s => s.current_user);
+    } else if (iPerformedThisAction('DontAgreeActionSummary', comment)) {
+      myFlag = dontagreeSummary.find(s => s.current_user);
+    }
+
     let commentClass = parentId ? `reply ${styles.Reply}` : `comment ${styles.Comment}`;
     commentClass += comment.id === 'pending' ? ` ${styles.pendingComment}` : '';
 
@@ -183,8 +189,10 @@ class Comment extends React.Component {
           <Content body={comment.body} />
           <div className="commentActionsLeft comment__action-container">
             <ActionButton>
+              {/* TODO implmement iPerformedThisAction for the like */}
               <LikeButton
-                like={like}
+                totalLikes={getTotalActionCount('LikeActionSummary', comment)}
+                like={likeSummary[0]}
                 id={comment.id}
                 postLike={postLike}
                 deleteAction={deleteAction}
@@ -217,7 +225,8 @@ class Comment extends React.Component {
             </ActionButton>
             <ActionButton>
               <FlagComment
-                flag={flag && flag.current_user ? flag : dontagree}
+                flaggedByCurrentUser={!!myFlag}
+                flag={myFlag}
                 id={comment.id}
                 author_id={comment.user.id}
                 postFlag={postFlag}

client/coral-framework/utils/index.js

@@ -1,7 +1,38 @@
-/**
-* getActionSummary
-* retrieves the action summary based on the type and the comment
-*/
+export const getTotalActionCount = (type, comment) => {
+  if (!comment.action_summaries) {
+    return 0;
+  }
 
-export const getActionSummary = (type, comment) =>
-  comment.action_summaries.filter(a => a.__typename === type)[0];
+  return comment.action_summaries.reduce((total, summary) => {
+    if (summary.__typename === type) {
+      return total + summary.count;
+    } else {
+      return total;
+    }
+  }, 0);
+};
+
+export const iPerformedThisAction = (type, comment) => {
+  if (!comment.action_summaries) {
+    return 0;
+  }
+
+  // if there is a current_user on any of the ActionSummary(s), the user performed this action
+  return comment.action_summaries
+    .filter(a => a.__typename === type)
+    .some(a => a.current_user);
+};
+
+ /**
+ * getActionSummary
+ * retrieves the action summaries based on the type and the comment
+ * array could be length > 1, as in the case of FlagActionSummary
+ */
+
+export const getActionSummary = (type, comment) => {
+  if (!comment.action_summaries) {
+    return null;
+  }
+
+  return comment.action_summaries.filter(a => a.__typename === type);
+};

client/coral-plugin-flags/FlagButton.js

@@ -21,15 +21,15 @@ class FlagButton extends Component {
 
   // When the "report" button is clicked expand the menu
   onReportClick = () => {
-    const {currentUser, flag, deleteAction} = this.props;
+    const {currentUser, deleteAction, flaggedByCurrentUser, flag} = this.props;
     const {localPost, localDelete} = this.state;
-    const flagged = (flag && flag.current_user && !localDelete) || localPost;
+    const localFlagged = (flaggedByCurrentUser && !localDelete) || localPost;
     if (!currentUser) {
       const offset = document.getElementById(`c_${this.props.id}`).getBoundingClientRect().top - 75;
       this.props.showSignInDialog(offset);
       return;
     }
-    if (flagged) {
+    if (localFlagged) {
       this.setState((prev) => prev.localPost ? {...prev, localPost: null, step: 0} : {...prev, localDelete: true});
       deleteAction(localPost || flag.current_user.id);
     } else if (this.state.showMenu){
@@ -130,9 +130,9 @@ class FlagButton extends Component {
   }
 
   render () {
-    const {flag, getPopupMenu} = this.props;
+    const {getPopupMenu, flaggedByCurrentUser} = this.props;
     const {localPost, localDelete} = this.state;
-    const flagged = (flag && flag.current_user && !localDelete) || localPost;
+    const flagged = (flaggedByCurrentUser && !localDelete) || localPost;
     const popupMenu = getPopupMenu[this.state.step](this.state.itemType);
 
     return <div className={`${name}-container`}>

client/coral-plugin-likes/LikeButton.js

@@ -27,9 +27,9 @@ class LikeButton extends Component {
 
   render() {
     const {like, id, postLike, deleteAction, showSignInDialog, currentUser} = this.props;
+    let {totalLikes: count} = this.props;
     const {localPost, localDelete} = this.state;
     const liked = (like && like.current_user && !localDelete) || localPost;
-    let count = like ? like.count : 0;
     if (localPost) {count += 1;}
     if (localDelete) {count -= 1;}