Simpler fragments

client/coral-admin/src/routes/Moderation/components/Comment.js

@@ -145,6 +145,7 @@ class Comment extends React.Component {
                 data={data}
                 clearHeightCache={clearHeightCache}
                 queryData={queryData}
+                slotSize={1}
               />
               <div className={styles.sideActions}>
                 <IfHasLink text={comment.body}>

client/coral-embed-stream/src/tabs/stream/components/Comment.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import TagLabel from './TagLabel';
 import CommentTimestamp from 'coral-framework/components/CommentTimestamp';
 import ReplyButton from './ReplyButton';
-import ReplyBox from './ReplyBox';
+import ReplyBox from '../containers/ReplyBox';
 import FlagComment from './FlagComment';
 import { can } from 'coral-framework/services/perms';
 import { TransitionGroup } from 'react-transition-group';

client/coral-embed-stream/src/tabs/stream/containers/Comment.js

@@ -6,6 +6,7 @@ import { getSlotFragmentSpreads } from 'coral-framework/utils';
 import { withSetCommentStatus } from 'coral-framework/graphql/mutations';
 import { getDefinitionName } from 'coral-framework/utils';
 import CommentBox from './CommentBox';
+import ReplyBox from './ReplyBox';
 import {
   THREADING_LEVEL,
   REPLY_COMMENTS_LOAD_DEPTH,
@@ -98,8 +99,10 @@ const singleCommentFragment = gql`
     }
     ${getSlotFragmentSpreads(slots, 'comment')}
     ...${getDefinitionName(CommentBox.fragments.comment)}
+    ...${getDefinitionName(ReplyBox.fragments.comment)}
   }
   ${CommentBox.fragments.comment}
+  ${ReplyBox.fragments.comment}
 `;
 
 const withCommentFragments = withFragments({

client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js

@@ -1,8 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { gql } from 'react-apollo';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import t, { timeago } from 'coral-framework/services/i18n';
 import { can } from 'coral-framework/services/perms';
 import { isSuspended } from 'coral-framework/utils/user';
@@ -10,7 +7,6 @@ import Slot from 'coral-framework/components/Slot';
 import { connect } from 'react-redux';
 import CommentForm from '../containers/CommentForm';
 import { notifyForNewCommentStatus } from '../helpers';
-import { compose } from 'react-apollo';
 
 // TODO: (kiwi) Need to adapt CSS classes post refactor to match the rest.
 export const name = 'talk-commentbox';
@@ -211,19 +207,10 @@ CommentBox.propTypes = {
   tags: PropTypes.array,
 };
 
+CommentBox.fragments = CommentForm.fragments;
+
 const mapStateToProps = state => ({
   tags: state.stream.commentBoxTags,
 });
 
-export default compose(
-  connect(mapStateToProps, null),
-  withFragments({
-    comment: gql`
-    fragment TalkEmbedStream_CommentBox_comment on Comment {
-      __typename
-      ...${getDefinitionName(CommentForm.fragments.comment)}
-    }
-    ${CommentForm.fragments.comment}
-`,
-  })
-)(CommentBox);
+export default connect(mapStateToProps, null)(CommentBox);

client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js

@@ -1,16 +1,9 @@
-import { gql } from 'react-apollo';
+import React from 'react';
 import CommentForm from '../components/CommentForm';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import DraftArea from './DraftArea';
 
-export default withFragments({
-  comment: gql`
-  fragment TalkEmbedStream_CommentForm_comment on Comment {
-    __typename
-    ...${getDefinitionName(DraftArea.fragments.comment)}
-  }
+const CommentFormContainer = props => <CommentForm {...props} />;
 
-  ${DraftArea.fragments.comment}
-`,
-})(CommentForm);
+CommentFormContainer.fragments = DraftArea.fragments;
+
+export default CommentFormContainer;

client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js

@@ -82,11 +82,19 @@ DraftAreaContainer.propTypes = {
 
 const slots = ['draftArea'];
 
+console.log('spreaded fragment', getSlotFragmentSpreads(slots, 'comment'));
+
 export default withFragments({
+  root: gql`
+    fragment TalkEmbedStream_DraftArea_root on RootQuery {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'root')}
+    }
+  `,
   comment: gql`
-  fragment TalkEmbedStream_DraftArea_comment on Comment {
-    __typename
-    ${getSlotFragmentSpreads(slots, 'comment')}
-  }
-`,
+    fragment TalkEmbedStream_DraftArea_comment on Comment {
+      __typename
+      ${getSlotFragmentSpreads(slots, 'comment')}
+    }
+  `,
 })(DraftAreaContainer);

client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js

@@ -1,16 +1,11 @@
-import { gql } from 'react-apollo';
+import React from 'react';
 import EditableCommentContent from '../components/EditableCommentContent';
-import withFragments from 'coral-framework/hocs/withFragments';
-import { getDefinitionName } from 'coral-framework/utils';
 import CommentForm from './CommentForm';
 
-export default withFragments({
-  comment: gql`
-  fragment TalkEmbedStream_EditableCommentContent_comment on Comment {
-    __typename
-    ...${getDefinitionName(CommentForm.fragments.comment)}
-  }
+const EditableCommentContentContainer = props => (
+  <EditableCommentContent {...props} />
+);
 
-  ${CommentForm.fragments.comment}
-`,
-})(EditableCommentContent);
+EditableCommentContentContainer.fragments = CommentForm.fragments;
+
+export default EditableCommentContentContainer;

client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReplyBox from '../components/ReplyBox';
+import CommentBox from './CommentBox';
+
+const ReplyBoxContainer = props => <ReplyBox {...props} />;
+
+ReplyBoxContainer.fragments = CommentBox.fragments;
+
+export default ReplyBoxContainer;

client/coral-framework/services/client.js

@@ -7,6 +7,7 @@ import {
   addGraphQLSubscriptions,
 } from 'subscriptions-transport-ws';
 import MessageTypes from 'subscriptions-transport-ws/dist/message-types';
+import { print } from 'graphql/language/printer';
 
 // Redux middleware to report any errors to the console.
 export const apolloErrorReporter = () => next => action => {
@@ -59,7 +60,8 @@ export function createClient(options = {}) {
         if (authToken) {
           req.options.headers['authorization'] = `Bearer ${authToken}`;
         }
-
+        // To debug queries add print(req.request.query) and import it from graphql/language/printer
+        // console.log(print(req.request.query));
         next();
       },
     },

plugins/talk-plugin-rich-text-pell/client/components/Editor.js

@@ -36,6 +36,7 @@ class Editor extends React.Component {
       },
     });
 
+    console.log('comment', this.props.comment);
     // To edit comments and have the previous html comment
     if (this.props.comment && this.props.comment.richTextBody) {
       this.ref.content.innerHTML = this.props.comment.richTextBody;

plugins/talk-plugin-rich-text-pell/client/index.js

@@ -6,6 +6,7 @@ export default {
   slots: {
     draftArea: [Editor],
     commentContent: [CommentContent],
+    adminCommentContent: [CommentContent],
   },
   fragments: {
     CreateCommentResponse: gql`
@@ -57,6 +58,7 @@ export default {
             fragment: editCommentFragment,
             id: fragmentId,
             data: {
+              __typename: 'Comment',
               richTextBody: edit.richTextBody,
             },
           });