Adding a slot to push like into featured comments 😎

plugins/coral-plugin-like/client/index.js

@@ -4,6 +4,7 @@ import translations from './translations.yml';
 export default {
   translations,
   slots: {
-    commentReactions: [LikeButton]
+    commentReactions: [LikeButton],
+    featuredCommentsReactions: [LikeButton]
   }
 };

plugins/talk-plugin-featured-comments/client/components/FeaturedComment.css

@@ -13,6 +13,13 @@
   display: inline-block;
 }
 
+.featuredComment .repliesIcon {
+  font-size: 16px;
+  vertical-align: middle;
+  line-height: 13px;
+  font-weight: bold;
+}
+
 .featuredComment .goToIcon {
   font-size: 16px;
   vertical-align: middle;
@@ -41,3 +48,15 @@
 .featuredComment .quote:after  {
   content: close-quote;
 }
+
+.footer {
+  display: flex;
+}
+
+.reactionsContainer, .actionsContainer {
+  flex: auto;
+}
+
+.actionsContainer {
+  text-align: right;
+}

plugins/talk-plugin-featured-comments/client/components/FeaturedComment.js

@@ -3,29 +3,42 @@ import cn from 'classnames';
 import styles from './FeaturedComment.css';
 import {name} from '../../package.json';
 import {timeago} from 'coral-framework/services/i18n';
+import {Slot} from 'plugin-api/beta/client/components';
 import {Icon} from 'plugin-api/beta/client/components/ui';
 
 const FeaturedComment = ({comment, setActiveTab}) => {
   return (
     <div className={cn(styles.featuredComment, `${name}__featured-comment`)}>
+
       <blockquote className={cn(styles.quote, `${name}__featured-comment__comment-body`)}>
         {comment.body}
       </blockquote>
-      <footer>
-        <div>
-          <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
-            {comment.user.username}
-          </strong>
-          <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
-            ,{' '}{timeago(comment.created_at)}
-          </span>
+
+      <div className={cn(`${name}__featured-comment__username-box`)}>
+        <strong className={cn(styles.username, `${name}__featured-comment__username`)}>
+          {comment.user.username}
+        </strong>
+        <span className={cn(styles.timeago, `${name}__featured-comment__timeago`)}>
+          ,{' '}{timeago(comment.created_at)}
+        </span>
+      </div>
+
+      <footer className={cn(styles.footer, `${name}__featured-comment__footer`)}>
+        <div className={cn(styles.reactionsContainer, `${name}__featured-comment__reactions`)}>
+          <Slot
+            fill="featuredCommentsReactions"
+            comment={comment}
+            commentId={comment.id}
+            inline
+          />
+        </div>
+        <div className={cn(styles.actionsContainer, `${name}__featured-comment__actions`)}>
+          <a className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
+            onClick={() => setActiveTab('all')} >
+            <Icon name="forum" className={styles.repliesIcon} /> {comment.replyCount} |
+            Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
+          </a>
         </div>
-        <a 
-          className={cn(styles.goTo, `${name}__featured-comment__go-to`)}
-          onClick={() => setActiveTab('all')}
-        >
-          Go to conversation<Icon name="keyboard_arrow_right" className={styles.goToIcon} />
-        </a>
       </footer>
     </div>
   );

plugins/talk-plugin-featured-comments/client/containers/TabPane.js

@@ -20,6 +20,15 @@ const enhance = compose(
                   id
                   body
                   created_at
+                  replyCount
+                  action_summaries {
+                    ... on LikeActionSummary {
+                      count
+                      current_user {
+                        id
+                      }
+                    }
+                  }
                   user {
                     id
                     username