From 8c7c564a30423a1c7c1fb06ff9f3bee521cd31d9 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 18 Jul 2017 15:23:02 +0700
Subject: [PATCH] Allow comment slots to extend the asset fragment + harmonize
 slot props

---
 .../src/components/Comment.js                 | 40 +++++++++----------
 .../src/containers/Comment.js                 |  7 ++++
 .../src/containers/Stream.js                  |  2 +
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index ca6c8e487..792dfd2d5 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -291,6 +291,8 @@ export default class Comment extends React.Component {
   render () {
     const {
       asset,
+      data,
+      root,
       depth,
       comment,
       postFlag,
@@ -376,6 +378,15 @@ export default class Comment extends React.Component {
       }
     );
 
+    // props that are passed down the slots.
+    const slotProps = {
+      data,
+      root,
+      asset,
+      comment,
+      depth,
+    };
+
     return (
       <div
         className={rootClassName}
@@ -386,10 +397,7 @@ export default class Comment extends React.Component {
           <Slot
             className={styles.commentAvatar}
             fill="commentAvatar"
-            comment={comment}
-            commentId={comment.id}
-            data={this.props.data}
-            root={this.props.root}
+            {...slotProps}
             inline
           />
 
@@ -410,11 +418,7 @@ export default class Comment extends React.Component {
             <Slot
               className={styles.commentInfoBar}
               fill="commentInfoBar"
-              depth={depth}
-              comment={comment}
-              commentId={comment.id}
-              data={this.props.data}
-              root={this.props.root}
+              {...slotProps}
               inline
             />
 
@@ -453,18 +457,18 @@ export default class Comment extends React.Component {
                   stopEditing={this.stopEditing}
                   />
               : <div>
-                  <Slot fill="commentContent" comment={comment} defaultComponent={CommentContent} />
+                <Slot
+                  fill="commentContent"
+                  defaultComponent={CommentContent}
+                  {...slotProps}
+                />
                 </div>
             }
 
             <div className="commentActionsLeft comment__action-container">
               <Slot
                 fill="commentReactions"
-                data={this.props.data}
-                root={this.props.root}
-                asset={asset}
-                comment={comment}
-                commentId={comment.id}
+                {...slotProps}
                 inline
               />
               {!disableReply &&
@@ -480,11 +484,7 @@ export default class Comment extends React.Component {
               <Slot
                 fill="commentActions"
                 wrapperComponent={ActionButton}
-                data={this.props.data}
-                root={this.props.root}
-                asset={asset}
-                comment={comment}
-                commentId={comment.id}
+                {...slotProps}
                 inline
               />
               <ActionButton>
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 1ffac82cf..68b0b3906 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -22,6 +22,13 @@ export default withFragments({
     }
     ${pluginFragments.definitions('root')}
     `,
+  asset: gql`
+    fragment CoralEmbedStream_Comment_asset on Asset {
+      __typename
+      ${pluginFragments.spreads('asset')}
+    }
+    ${pluginFragments.definitions('asset')}
+    `,
   comment: gql`
     fragment CoralEmbedStream_Comment_comment on Comment {
       id
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 30e9d8fe0..f3af18e6f 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -278,6 +278,7 @@ const fragments = {
           endCursor
         }
         ${pluginFragments.spreads('asset')}
+        ...${getDefinitionName(Comment.fragments.asset)}
       }
       me {
         status
@@ -293,6 +294,7 @@ const fragments = {
     }
     ${pluginFragments.definitions('asset')}
     ${pluginFragments.definitions('root')}
+    ${Comment.fragments.asset}
     ${Comment.fragments.root}
     ${commentFragment}
   `,