Allow comment slots to extend the asset fragment + harmonize slot props

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>

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

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}
   `,