From 54ea71bedf2bb80a4e7919a1c6e6ee375b2ee18a Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Tue, 25 Apr 2017 18:24:25 +0700
Subject: [PATCH] Support fragments in plugins

---
 .../src/components/Comment.js                 | 21 ++++++++++--
 .../src/components/Embed.js                   |  4 +--
 .../src/components/Stream.js                  |  6 +++-
 .../src/containers/Comment.js                 | 15 ++++++++-
 .../src/containers/Embed.js                   | 23 ++++++++-----
 .../src/containers/Stream.js                  |  6 ++--
 client/coral-framework/helpers/plugins.js     | 33 +++++++++++++++++++
 .../client/containers/RespectButton.js        | 22 ++++++++++++-
 8 files changed, 111 insertions(+), 19 deletions(-)

diff --git a/client/coral-embed-stream/src/components/Comment.js b/client/coral-embed-stream/src/components/Comment.js
index c44e06282..b2289716a 100644
--- a/client/coral-embed-stream/src/components/Comment.js
+++ b/client/coral-embed-stream/src/components/Comment.js
@@ -174,8 +174,14 @@ class Comment extends React.Component {
             ? <TagLabel><BestIndicator /></TagLabel>
           : null }
           <PubDate created_at={comment.created_at} />
-          <Slot fill="commentInfoBar" comment={comment} commentId={comment.id} inline/>
-
+          <Slot
+            fill="commentInfoBar"
+            data={this.props.data}
+            root={this.props.root}
+            comment={comment}
+            commentId={comment.id}
+            inline
+          />
           { (currentUser && (comment.user.id !== currentUser.id))
             ? <span className={styles.topRightMenu}>
                 <TopRightMenu
@@ -217,7 +223,14 @@ class Comment extends React.Component {
                   removeBest={removeBestTag} />
               </IfUserCanModifyBest>
             </ActionButton>
-            <Slot fill="commentDetail" comment={comment} commentId={comment.id} inline/>
+            <Slot
+              fill="commentDetail"
+              data={this.props.data}
+              root={this.props.root}
+              comment={comment}
+              commentId={comment.id}
+              inline
+            />
           </div>
           <div className="commentActionsRight comment__action-container">
             <ActionButton>
@@ -257,6 +270,8 @@ class Comment extends React.Component {
             return commentIsIgnored(reply)
               ? <IgnoredCommentTombstone key={reply.id} />
               : <Comment
+                  data={this.props.data}
+                  root={this.props.root}
                   setActiveReplyBox={setActiveReplyBox}
                   disableReply={disableReply}
                   activeReplyBox={activeReplyBox}
diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js
index b8346db0f..db1bcfa1d 100644
--- a/client/coral-embed-stream/src/components/Embed.js
+++ b/client/coral-embed-stream/src/components/Embed.js
@@ -35,7 +35,7 @@ export default class Embed extends React.Component {
 
   render () {
     const {activeTab, logout, viewAllComments, commentId} = this.props;
-    const {asset: {totalCommentCount}} = this.props.data;
+    const {asset: {totalCommentCount}} = this.props.root;
     const {loggedIn, isAdmin, user} = this.props.auth;
 
     const userBox = <UserBox user={user} logout={logout} changeTab={this.changeTab}/>;
@@ -60,7 +60,7 @@ export default class Embed extends React.Component {
           }
           <TabContent show={activeTab === 'stream'}>
             { loggedIn ? userBox : null }
-            <Stream data={this.props.data} />
+            <Stream data={this.props.data} root={this.props.root} />
           </TabContent>
           <TabContent show={activeTab === 'profile'}>
             <ProfileContainer />
diff --git a/client/coral-embed-stream/src/components/Stream.js b/client/coral-embed-stream/src/components/Stream.js
index d03dda571..cedd1cc1c 100644
--- a/client/coral-embed-stream/src/components/Stream.js
+++ b/client/coral-embed-stream/src/components/Stream.js
@@ -24,7 +24,7 @@ class Stream extends React.Component {
 
   render () {
     const {
-      data: {asset, asset: {comments}, comment, myIgnoredUsers},
+      root: {asset, asset: {comments}, comment, myIgnoredUsers},
       postItem,
       addNotification,
       postFlag,
@@ -106,6 +106,8 @@ class Stream extends React.Component {
         {
           highlightedComment
           ? <Comment
+            data={this.props.data}
+            root={this.props.root}
             setActiveReplyBox={this.setActiveReplyBox}
             activeReplyBox={this.props.activeReplyBox}
             addNotification={addNotification}
@@ -141,6 +143,8 @@ class Stream extends React.Component {
                         key={comment.id}
                       />
                     : <Comment
+                        data={this.props.data}
+                        root={this.props.root}
                         disableReply={!open}
                         setActiveReplyBox={this.setActiveReplyBox}
                         activeReplyBox={this.props.activeReplyBox}
diff --git a/client/coral-embed-stream/src/containers/Comment.js b/client/coral-embed-stream/src/containers/Comment.js
index 93c9f2471..6345075fd 100644
--- a/client/coral-embed-stream/src/containers/Comment.js
+++ b/client/coral-embed-stream/src/containers/Comment.js
@@ -1,8 +1,18 @@
 import {gql} from 'react-apollo';
 import Comment from '../components/Comment';
 import withFragments from 'coral-framework/hocs/withFragments';
+import {getSlotsFragments} from 'coral-framework/helpers/plugins';
+
+const pluginFragments = getSlotsFragments(['commentInfoBar', 'commentDetail']);
 
 export default withFragments({
+  root: gql`
+    fragment Comment_root on RootQuery {
+      __typename
+      ${pluginFragments.root && pluginFragments.root.names}
+    }
+    ${pluginFragments.root && pluginFragments.root.definitions}
+    `,
   comment: gql`
     fragment Comment_comment on Comment {
       id
@@ -24,5 +34,8 @@ export default withFragments({
           created_at
         }
       }
-    }`,
+      ${pluginFragments.comment && pluginFragments.comment.names}
+    }
+    ${pluginFragments.comment && pluginFragments.comment.definitions}
+  `,
 })(Comment);
diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js
index 0a03462fc..72290fdea 100644
--- a/client/coral-embed-stream/src/containers/Embed.js
+++ b/client/coral-embed-stream/src/containers/Embed.js
@@ -22,7 +22,7 @@ class EmbedContainer extends React.Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    if(this.props.data.me && !nextProps.data.me) {
+    if(this.props.root.me && !nextProps.root.me) {
 
       // Refetch because on logout `excludeIgnored` becomes `false`.
       // TODO: logout via mutation and obsolete this?
@@ -30,13 +30,13 @@ class EmbedContainer extends React.Component {
     }
 
     const {fetchAssetSuccess} = this.props;
-    if(!isEqual(nextProps.data.asset, this.props.data.asset)) {
+    if(!isEqual(nextProps.root.asset, this.props.root.asset)) {
 
       // TODO: remove asset data from redux store.
-      fetchAssetSuccess(nextProps.data.asset);
+      fetchAssetSuccess(nextProps.root.asset);
 
       const {setCommentCountCache, commentCountCache} = this.props;
-      const {asset} = nextProps.data;
+      const {asset} = nextProps.root;
 
       if (commentCountCache === -1) {
         setCommentCountCache(asset.commentCount);
@@ -45,7 +45,7 @@ class EmbedContainer extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    if(!isEqual(prevProps.data.comment, this.props.data.comment)) {
+    if(!isEqual(prevProps.root.comment, this.props.root.comment)) {
 
       // Scroll to a permalinked comment if one is in the URL once the page is done rendering.
       setTimeout(() => pym.scrollParentToChildEl('coralStream'), 0);
@@ -53,7 +53,7 @@ class EmbedContainer extends React.Component {
   }
 
   render() {
-    if (!this.props.data.asset) {
+    if (!this.props.root.asset) {
       return <Spinner />;
     }
     return <Embed {...this.props} />;
@@ -83,9 +83,14 @@ export const withQuery = graphql(EMBED_QUERY, {
       excludeIgnored: Boolean(auth && auth.user && auth.user.id),
     },
   }),
-  props: ({data}) => ({
-    data,
-  })
+  props: ({data: {
+    fetchMore, loading, networkStatus, refetch, startPolling,
+    stopPolling, subscribeToMore, updateQuery, variables,
+    ...root}}) => ({
+      data: {fetchMore, loading, networkStatus, refetch, startPolling,
+        stopPolling, subscribeToMore, updateQuery, variables},
+      root,
+    }),
 });
 
 const mapStateToProps = state => ({
diff --git a/client/coral-embed-stream/src/containers/Stream.js b/client/coral-embed-stream/src/containers/Stream.js
index 838df1084..4f5018c2a 100644
--- a/client/coral-embed-stream/src/containers/Stream.js
+++ b/client/coral-embed-stream/src/containers/Stream.js
@@ -119,7 +119,7 @@ class StreamContainer extends React.Component {
   componentDidMount() {
     this.props.data.refetch();
     this.countPoll = setInterval(() => {
-      const {asset} = this.props.data;
+      const {asset} = this.props.root;
       this.getCounts({
         asset_id: asset.id,
         limit: asset.comments.length,
@@ -219,7 +219,9 @@ const fragments = {
       me {
         status
       }
+      ...Comment_root
     }
+    ${Comment.fragments.root}
     ${Comment.fragments.comment}
   `,
 };
@@ -245,6 +247,7 @@ const mapDispatchToProps = dispatch =>
   }, dispatch);
 
 export default compose(
+  withFragments(fragments),
   connect(mapStateToProps, mapDispatchToProps),
   postComment,
   postFlag,
@@ -254,6 +257,5 @@ export default compose(
   removeCommentTag,
   ignoreUser,
   deleteAction,
-  withFragments(fragments),
 )(StreamContainer);
 
diff --git a/client/coral-framework/helpers/plugins.js b/client/coral-framework/helpers/plugins.js
index e0d345db4..02f97b101 100644
--- a/client/coral-framework/helpers/plugins.js
+++ b/client/coral-framework/helpers/plugins.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import merge from 'lodash/merge';
 import flatten from 'lodash/flatten';
+import flattenDeep from 'lodash/flattenDeep';
+import uniq from 'lodash/uniq';
 import plugins from 'pluginsConfig';
+import {gql} from 'react-apollo';
 
 export const pluginReducers = merge(
   ...plugins
@@ -19,3 +22,33 @@ export function getSlotElements(slot, props = {}) {
   return components
     .map((component, i) => React.createElement(component, {...props, key: i}));
 }
+
+function getComponentFragments(components) {
+  return components
+    .map(c => c.fragments)
+    .filter(fragments => fragments)
+    .reduce((res, fragments) => {
+      Object.keys(fragments).forEach(key => {
+        if (!(key in res)) {
+          res[key] = {names: '', definitions: ''};
+        }
+        res[key].names += `...${fragments[key].definitions[0].name.value}\n`;
+        res[key].definitions = gql`${res[key].definitions}${fragments[key]}`;
+      });
+      return res;
+    }, {});
+}
+
+export function getSlotsFragments(slots) {
+  if (!Array.isArray(slots)) {
+    slots = [slots];
+  }
+  const components = uniq(flattenDeep(slots.map(slot => {
+    return plugins
+    .filter(o => o.module.slots[slot])
+    .map(o => o.module.slots[slot]);
+  })));
+
+  return getComponentFragments(components);
+}
+
diff --git a/plugins/coral-plugin-respect/client/containers/RespectButton.js b/plugins/coral-plugin-respect/client/containers/RespectButton.js
index bcf0e342d..a69c62032 100644
--- a/plugins/coral-plugin-respect/client/containers/RespectButton.js
+++ b/plugins/coral-plugin-respect/client/containers/RespectButton.js
@@ -2,7 +2,7 @@ import {compose, gql, graphql} from 'react-apollo';
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import get from 'lodash/get';
-
+import withFragments from 'coral-framework/hocs/withFragments';
 import {showSignInDialog} from 'coral-framework/actions/auth';
 import RespectButton from '../components/RespectButton';
 
@@ -155,6 +155,26 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators({showSignInDialog}, dispatch);
 
 const enhance = compose(
+  withFragments({
+    root: gql`
+      fragment RespectButton_root on RootQuery {
+        me {
+          status
+        }
+      }
+    `,
+    comment: gql`
+      fragment RespectButton_comment on Comment {
+        action_summaries {
+          ... on RespectActionSummary {
+            count
+            current_user {
+              id
+            }
+          }
+        }
+      }`,
+  }),
   connect(null, mapDispatchToProps),
   withDeleteAction,
   withPostRespect,