My Comment Reactions

client/coral-framework/utils/index.js

@@ -184,3 +184,11 @@ export function getShallowChanges(a, b) {
   return union(Object.keys(a), Object.keys(b))
     .filter((key) => a[key] !== b[key]);
 }
+
+export function getTotalReactionsCount(actionSummaries) {
+  return actionSummaries
+    .filter((s) => s.__typename !== 'FlagActionSummary')
+    .reduce((total, summary) => {
+      return total + summary.count;
+    }, 0);
+}

client/coral-settings/containers/ProfileContainer.js

@@ -108,6 +108,11 @@ const CommentFragment = gql`
     nodes {
       id
       body
+      replyCount
+	    action_summaries {
+        count
+        __typename
+      }
       asset {
         id
         title

client/talk-plugin-history/Comment.css

@@ -6,6 +6,7 @@
   display: flex;
   align-items: baseline;
   justify-content: space-between;
+  padding-bottom: 20px;
 }
 
 .myComment:last-child {
@@ -16,11 +17,17 @@
   text-decoration: none;
   font-weight: bold;
   font-size: 12px;
-  color: #2c3e50;
+  color: #757575;
 }
 
-.commentBody {
+.commentSummary {
+  font-size: 14px;
+  margin: 30px 0 10px;
+  color: #424242;
+}
 
+.commentSummaryReactions {
+  margin-right: 5px;
 }
 
 .sidebar {

client/talk-plugin-history/Comment.js

@@ -4,6 +4,8 @@ import styles from './Comment.css';
 import Slot from 'coral-framework/components/Slot';
 import PubDate from '../talk-plugin-pubdate/PubDate';
 import CommentContent from '../coral-embed-stream/src/components/CommentContent';
+import cn from 'classnames';
+import {getTotalReactionsCount} from 'coral-framework/utils';
 
 import t from 'coral-framework/services/i18n';
 
@@ -11,24 +13,34 @@ class Comment extends React.Component {
 
   render() {
     const {comment, link, data, root} = this.props;
+    // console.log(comment.action_summaries, getTotalReactionsCount(comment.action_summaries));
+
     return (
       <div className={styles.myComment}>
         <div>
           <Slot
             fill="commentContent"
             defaultComponent={CommentContent}
-            className={`${styles.commentBody} myCommentBody`}
+            className={cn(styles.commentBody, 'my-comment-body')}
             data={data}
             queryData={{root, comment, asset: comment.asset}}
           />
-          <p className="myCommentAsset">
-            <a
-              className={`${styles.assetURL} myCommentAnchor`}
+          <div className={cn(styles.commentSummary, 'comment_summary')}>
+            <span className={cn(styles.commentSummaryReactions, 'comment_summary_reactions')}>
+              <Icon name="thumb_up" /> {getTotalReactionsCount(comment.action_summaries)} reactions
+            </span>
+            
+            <span className={cn('comment_summary_replies')}>
+              <Icon name="reply" /> {comment.replyCount} replies
+            </span>
+          </div>
+          <div className="my-comment-asset">
+            <a className={cn(styles.assetURL, 'my-comment-anchor')}
               href="#"
               onClick={link(`${comment.asset.url}`)}>
               Story: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
-          </p>
+          </div>
         </div>
         <div className={styles.sidebar}>
           <ul>
@@ -38,7 +50,7 @@ class Comment extends React.Component {
               </a>
             </li>
             <li>
-              <Icon name="schedule" className={styles.iconDate}/>
+              <Icon name="schedule" className={styles.iconDate} />
               <PubDate
                 className={styles.pubdate}
                 created_at={comment.created_at}