Merge pull request #889 from coralproject/my-comment-reactions

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,13 +17,28 @@
   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: 10px;
+}
+
+.reactionCount, .replyCount {
+  margin: 0 4px;
+}
+
+.countZero {
+  color: #9E9E9E;
+}
+
+
 .sidebar {
   ul {
     margin-top: 0;

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,41 @@ class Comment extends React.Component {
 
   render() {
     const {comment, link, data, root} = this.props;
+    const reactionCount = 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', {[styles.countZero]: reactionCount === 0})}>
+              <Icon name="thumb_up" />
+              <span className={cn(styles.reactionCount, 'comment-summary-reaction-count')}>
+                {reactionCount}
+              </span>
+              {reactionCount === 1 ? t('common.reaction') : t('common.reactions')}
+            </span>
+            <span className={cn('comment-summary-replies', {[styles.countZero]: comment.replyCount === 0})}>
+              <Icon name="reply" />
+              <span className={cn(styles.replyCount, 'comment-summary-reply-count')}>
+                {comment.replyCount} 
+              </span>
+              {comment.replyCount === 1 ? t('common.reply') : t('common.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}
+              {t('common.story')}: {comment.asset.title ? comment.asset.title : comment.asset.url}
             </a>
-          </p>
+          </div>
         </div>
         <div className={styles.sidebar}>
           <ul>
@@ -38,7 +57,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}

locales/en.yml

@@ -41,6 +41,11 @@ en:
   common:
     copy: 'Copy'
     error: 'An error has occurred.'
+    reply: 'reply'
+    replies: 'replies'
+    reaction: 'reaction'
+    reactions: 'reactions'
+    story: 'Story'
   community:
     account_creation_date: "Account Creation Date"
     active: Active

locales/es.yml

@@ -41,6 +41,11 @@ es:
   common:
     copy: 'Copiar'
     error: 'Ha ocurrido un error.'
+    reply: 'respuesta'
+    replies: 'respuestas'
+    reaction: 'reacción'
+    reactions: 'reacciones'
+    story: 'Artículo'
   community:
     account_creation_date: "Fecha de creación de la cuenta"
     active: Activa