diff --git a/client/coral-admin/src/routes/Moderation/components/Comment.js b/client/coral-admin/src/routes/Moderation/components/Comment.js index e79bbd2be..79da644ef 100644 --- a/client/coral-admin/src/routes/Moderation/components/Comment.js +++ b/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} />
diff --git a/client/coral-embed-stream/src/tabs/stream/components/Comment.js b/client/coral-embed-stream/src/tabs/stream/components/Comment.js index 1f6af9d87..6efddfc18 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Comment.js +++ b/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'; diff --git a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js b/client/coral-embed-stream/src/tabs/stream/containers/Comment.js index b12cfbbd8..45468f406 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/Comment.js +++ b/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({ diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js index 2b321df5a..9231254ac 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/CommentBox.js +++ b/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); diff --git a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js b/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js index 474233e4f..263d4f955 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/CommentForm.js +++ b/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 => ; - ${DraftArea.fragments.comment} -`, -})(CommentForm); +CommentFormContainer.fragments = DraftArea.fragments; + +export default CommentFormContainer; diff --git a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js b/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js index 1dd2a9f16..f61b43d66 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/DraftArea.js +++ b/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); diff --git a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js b/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js index 60cfff236..f48f3ca16 100644 --- a/client/coral-embed-stream/src/tabs/stream/containers/EditableCommentContent.js +++ b/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 => ( + +); - ${CommentForm.fragments.comment} -`, -})(EditableCommentContent); +EditableCommentContentContainer.fragments = CommentForm.fragments; + +export default EditableCommentContentContainer; diff --git a/client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js b/client/coral-embed-stream/src/tabs/stream/containers/ReplyBox.js new file mode 100644 index 000000000..a5e926b1d --- /dev/null +++ b/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 => ; + +ReplyBoxContainer.fragments = CommentBox.fragments; + +export default ReplyBoxContainer; diff --git a/client/coral-framework/services/client.js b/client/coral-framework/services/client.js index 3f435ef03..70508bd4b 100644 --- a/client/coral-framework/services/client.js +++ b/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(); }, }, diff --git a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js b/plugins/talk-plugin-rich-text-pell/client/components/Editor.js index 2faedb633..b7d7467b8 100644 --- a/plugins/talk-plugin-rich-text-pell/client/components/Editor.js +++ b/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; diff --git a/plugins/talk-plugin-rich-text-pell/client/index.js b/plugins/talk-plugin-rich-text-pell/client/index.js index 55185ed6d..44cc51aca 100644 --- a/plugins/talk-plugin-rich-text-pell/client/index.js +++ b/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, }, });