Allow passing custom fragments to withReaction and withTag

plugin-api/beta/client/hocs/withReaction.js

@@ -13,13 +13,17 @@ import {capitalize} from 'coral-framework/helpers/strings';
 import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
 import hoistStatics from 'recompose/hoistStatics';
 import * as PropTypes from 'prop-types';
+import {getDefinitionName} from '../utils';
 
-export default (reaction) => hoistStatics((WrappedComponent) => {
+export default (reaction, options = {}) => hoistStatics((WrappedComponent) => {
   if (typeof reaction !== 'string') {
     console.error('Reaction must be a valid string');
     return null;
   }
 
+  // fragments allow the extension of the fragments defined in this HOC.
+  const {fragments = {}} = options;
+
   // Global instance counter for each `reaction` type.
   let instances = 0;
 
@@ -248,7 +252,7 @@ export default (reaction) => hoistStatics((WrappedComponent) => {
     }
 
     render() {
-      const {comment} = this.props;
+      const {root, asset, comment} = this.props;
 
       const reactionSummary = getMyActionSummary(
         `${Reaction}ActionSummary`,
@@ -263,10 +267,12 @@ export default (reaction) => hoistStatics((WrappedComponent) => {
       const alreadyReacted = !!reactionSummary;
 
       return <WrappedComponent
+        root={root}
+        asset={asset}
+        comment={comment}
         showSignInDialog={this.props.showSignInDialog}
         addNotification={this.props.addNotification}
         user={this.props.user}
-        comment={comment}
         reactionSummary={reactionSummary}
         count={count}
         alreadyReacted={alreadyReacted}
@@ -372,10 +378,13 @@ export default (reaction) => hoistStatics((WrappedComponent) => {
 
   const enhance = compose(
     withFragments({
+      ...fragments,
       asset: gql`
         fragment ${Reaction}Button_asset on Asset {
           id
+          ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
         }
+        ${fragments.asset ? fragments.asset : ''}
       `,
       comment: gql`
         fragment ${Reaction}Button_comment on Comment {
@@ -389,7 +398,10 @@ export default (reaction) => hoistStatics((WrappedComponent) => {
               }
             }
           }
-        }`
+          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+        }
+        ${fragments.comment ? fragments.comment : ''}
+      `
     }),
     connect(mapStateToProps, mapDispatchToProps),
     withDeleteReaction,

plugin-api/beta/client/hocs/withTags.js

@@ -9,13 +9,17 @@ import withFragments from 'coral-framework/hocs/withFragments';
 import {addNotification} from 'coral-framework/actions/notification';
 import {forEachError, isTagged} from 'coral-framework/utils';
 import hoistStatics from 'recompose/hoistStatics';
+import {getDefinitionName} from '../utils';
 
-export default (tag) => hoistStatics((WrappedComponent) => {
+export default (tag, options = {}) => hoistStatics((WrappedComponent) => {
   if (typeof tag !== 'string') {
     console.error('Tag must be a valid string');
     return null;
   }
 
+  // fragments allow the extension of the fragments defined in this HOC.
+  const {fragments = {}} = options;
+
   const Tag = capitalize(tag);
   const TAG = tag.toUpperCase();
 
@@ -69,13 +73,15 @@ export default (tag) => hoistStatics((WrappedComponent) => {
     }
 
     render() {
-      const {comment, user, config} = this.props;
+      const {root, asset, comment, user, config} = this.props;
 
       const alreadyTagged = isTagged(comment.tags, TAG);
 
       return <WrappedComponent
-        user={user}
+        root={root}
+        asset={asset}
         comment={comment}
+        user={user}
         alreadyTagged={alreadyTagged}
         postTag={this.postTag}
         deleteTag={this.deleteTag}
@@ -93,10 +99,13 @@ export default (tag) => hoistStatics((WrappedComponent) => {
 
   const enhance = compose(
     withFragments({
+      ...fragments,
       asset: gql`
         fragment ${Tag}Button_asset on Asset {
           id
+          ${fragments.asset ? `...${getDefinitionName(fragments.asset)}` : ''}
         }
+        ${fragments.asset ? fragments.asset : ''}
       `,
       comment: gql`
         fragment ${Tag}Button_comment on Comment {
@@ -106,7 +115,10 @@ export default (tag) => hoistStatics((WrappedComponent) => {
               name
             }
           }
-        }`
+          ${fragments.comment ? `...${getDefinitionName(fragments.comment)}` : ''}
+        }
+        ${fragments.comment ? fragments.comment : ''}
+      `
     }),
     connect(mapStateToProps, mapDispatchToProps),
     withAddTag,

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

@@ -31,7 +31,6 @@ export default withFragments({
           name
         }
       }
-
       user {
         id
         username

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

@@ -1,5 +1,16 @@
 import ModTag from '../components/ModTag';
 import {withTags} from 'plugin-api/beta/client/hocs';
+import {gql} from 'react-apollo';
 
-export default withTags('featured')(ModTag);
+const fragments = {
+  comment: gql`
+    fragment TalkFeaturedComments_ModTag_comment on Comment {
+      user {
+        username
+      }
+    }
+  `
+};
+
+export default withTags('featured', {fragments})(ModTag);