diff --git a/client/coral-embed-stream/src/components/Embed.js b/client/coral-embed-stream/src/components/Embed.js index e12201805..4a48c54e5 100644 --- a/client/coral-embed-stream/src/components/Embed.js +++ b/client/coral-embed-stream/src/components/Embed.js @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import Stream from '../tabs/stream/containers/Stream'; +import Configure from '../tabs/configure/containers/Configure'; import Slot from 'coral-framework/components/Slot'; import {can} from 'coral-framework/services/perms'; import t from 'coral-framework/services/i18n'; @@ -45,6 +46,11 @@ export default class Embed extends React.Component { {t('framework.configure_stream')} ); + tabs.push( + + {t('framework.configure_stream')} + + ); } return tabs; } @@ -87,7 +93,7 @@ export default class Embed extends React.Component { tabs={this.getTabs()} tabPanes={[ - + , @@ -95,6 +101,9 @@ export default class Embed extends React.Component { , + + + , ]} /> diff --git a/client/coral-embed-stream/src/containers/Embed.js b/client/coral-embed-stream/src/containers/Embed.js index 4c65d8fde..f17be9a16 100644 --- a/client/coral-embed-stream/src/containers/Embed.js +++ b/client/coral-embed-stream/src/containers/Embed.js @@ -14,6 +14,7 @@ import {getDefinitionName, getSlotFragmentSpreads} from 'coral-framework/utils'; import {withQuery} from 'coral-framework/hocs'; import Embed from '../components/Embed'; import Stream from '../tabs/stream/containers/Stream'; +import Configure from '../tabs/configure/containers/Configure'; import {notify} from 'coral-framework/actions/notification'; import t from 'coral-framework/services/i18n'; import PropTypes from 'prop-types'; @@ -170,10 +171,18 @@ const EMBED_QUERY = gql` id status } + asset(id: $assetId, url: $assetUrl) { + ...${getDefinitionName(Configure.fragments.asset)} + ...${getDefinitionName(Stream.fragments.asset)} + } ${getSlotFragmentSpreads(slots, 'root')} ...${getDefinitionName(Stream.fragments.root)} + ...${getDefinitionName(Configure.fragments.root)} } ${Stream.fragments.root} + ${Stream.fragments.asset} + ${Configure.fragments.root} + ${Configure.fragments.asset} `; export const withEmbedQuery = withQuery(EMBED_QUERY, { diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js new file mode 100644 index 000000000..610fa5fae --- /dev/null +++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js @@ -0,0 +1,10 @@ +import React from 'react'; + +class Configure extends React.Component { + render() { + console.log(this.props); + return
Configure
; + } +} + +export default Configure; diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js new file mode 100644 index 000000000..a52b65822 --- /dev/null +++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js @@ -0,0 +1,33 @@ +import React from 'react'; +import {gql, compose} from 'react-apollo'; +import {withFragments} from 'coral-framework/hocs'; +import Configure from '../components/Configure'; + +class ConfigureContainer extends React.Component { + render() { + return ; + } +} + +const withConfigureFragments = withFragments({ + root: gql` + fragment CoralEmbedStream_Configure_root on RootQuery { + __typename + } + `, + asset: gql` + fragment CoralEmbedStream_Configure_asset on Asset { + settings { + moderation + } + } + `, +}); + +const enhance = compose( + withConfigureFragments, +); + +export default enhance(ConfigureContainer); diff --git a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js index 2967b9972..3a64820c7 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js +++ b/client/coral-embed-stream/src/tabs/stream/components/AllCommentsPane.js @@ -14,7 +14,7 @@ const hasComment = (nodes, id) => nodes.some((node) => node.id === id); // comments to show. The spare cursor functions as a backup in case one // of the comments gets deleted. function resetCursors(state, props) { - const comments = props.root.asset.comments; + const comments = props.asset.comments; if (comments && comments.nodes.length) { const idCursors = [comments.nodes[0].id]; if (comments.nodes[1]) { @@ -30,7 +30,7 @@ function resetCursors(state, props) { // using the help of the backup cursor. function invalidateCursor(invalidated, state, props) { const alt = invalidated === 1 ? 0 : 1; - const comments = props.root.asset.comments; + const comments = props.asset.comments; const idCursors = []; if (state.idCursors[alt]) { idCursors.push(state.idCursors[alt]); diff --git a/client/coral-embed-stream/src/tabs/stream/components/Stream.js b/client/coral-embed-stream/src/tabs/stream/components/Stream.js index f2b45d47d..6844d1c4f 100644 --- a/client/coral-embed-stream/src/tabs/stream/components/Stream.js +++ b/client/coral-embed-stream/src/tabs/stream/components/Stream.js @@ -47,7 +47,8 @@ class Stream extends React.Component { activeReplyBox, setActiveReplyBox, commentClassNames, - root: {asset, asset: {comment}}, + asset, + asset: {comment}, postComment, notify, editComment, @@ -113,7 +114,8 @@ class Stream extends React.Component { activeReplyBox, setActiveReplyBox, commentClassNames, - root: {asset, asset: {comments, totalCommentCount}}, + asset, + asset: {comments, totalCommentCount}, postComment, notify, editComment, @@ -169,6 +171,7 @@ class Stream extends React.Component { { @@ -62,7 +62,7 @@ class StreamContainer extends React.Component { this.commentsAddedSubscription = this.props.data.subscribeToMore({ document: COMMENTS_ADDED_SUBSCRIPTION, variables: { - assetId: this.props.root.asset.id, + assetId: this.props.asset.id, }, updateQuery: (prev, {subscriptionData: {data: {commentAdded}}}) => { @@ -116,7 +116,7 @@ class StreamContainer extends React.Component { limit: parent_id ? 999999 : ADDTL_COMMENTS_ON_LOAD_MORE, cursor: comment.replies.endCursor, parent_id, - asset_id: this.props.root.asset.id, + asset_id: this.props.asset.id, sortOrder: 'ASC', excludeIgnored: this.props.data.variables.excludeIgnored, }, @@ -131,9 +131,9 @@ class StreamContainer extends React.Component { query: LOAD_MORE_QUERY, variables: { limit: ADDTL_COMMENTS_ON_LOAD_MORE, - cursor: this.props.root.asset.comments.endCursor, + cursor: this.props.asset.comments.endCursor, parent_id: null, - asset_id: this.props.root.asset.id, + asset_id: this.props.asset.id, sortOrder: this.props.data.variables.sortOrder, sortBy: this.props.data.variables.sortBy, excludeIgnored: this.props.data.variables.excludeIgnored, @@ -177,9 +177,9 @@ class StreamContainer extends React.Component { } render() { - if (!this.props.root.asset - || this.props.root.asset.comment === undefined - && !this.props.root.asset.comments + if (!this.props.asset + || this.props.asset.comment === undefined + && !this.props.asset.comments ) { return ; } @@ -279,49 +279,6 @@ const slots = [ const fragments = { root: gql` fragment CoralEmbedStream_Stream_root on RootQuery { - asset(id: $assetId, url: $assetUrl) { - comment(id: $commentId) @include(if: $hasComment) { - ...CoralEmbedStream_Stream_comment - ${nest(` - parent { - ...CoralEmbedStream_Stream_comment - ...nest - } - `, THREADING_LEVEL)} - } - id - title - url - closedAt - isClosed - created_at - settings { - moderation - infoBoxEnable - infoBoxContent - premodLinksEnable - questionBoxEnable - questionBoxContent - questionBoxIcon - closedTimeout - closedMessage - charCountEnable - charCount - requireEmailConfirmation - } - commentCount @skip(if: $hasComment) - totalCommentCount @skip(if: $hasComment) - comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) { - nodes { - ...CoralEmbedStream_Stream_comment - } - hasNextPage - startCursor - endCursor - } - ${getSlotFragmentSpreads(slots, 'asset')} - ...${getDefinitionName(Comment.fragments.asset)} - } me { status ignoredUsers { @@ -334,8 +291,53 @@ const fragments = { ${getSlotFragmentSpreads(slots, 'root')} ...${getDefinitionName(Comment.fragments.root)} } - ${Comment.fragments.asset} ${Comment.fragments.root} + `, + asset: gql` + fragment CoralEmbedStream_Stream_asset on Asset { + comment(id: $commentId) @include(if: $hasComment) { + ...CoralEmbedStream_Stream_comment + ${nest(` + parent { + ...CoralEmbedStream_Stream_comment + ...nest + } + `, THREADING_LEVEL)} + } + id + title + url + closedAt + isClosed + created_at + settings { + moderation + infoBoxEnable + infoBoxContent + premodLinksEnable + questionBoxEnable + questionBoxContent + questionBoxIcon + closedTimeout + closedMessage + charCountEnable + charCount + requireEmailConfirmation + } + commentCount @skip(if: $hasComment) + totalCommentCount @skip(if: $hasComment) + comments(query: {limit: 10, excludeIgnored: $excludeIgnored, sortOrder: $sortOrder, sortBy: $sortBy}) @skip(if: $hasComment) { + nodes { + ...CoralEmbedStream_Stream_comment + } + hasNextPage + startCursor + endCursor + } + ${getSlotFragmentSpreads(slots, 'asset')} + ...${getDefinitionName(Comment.fragments.asset)} + } + ${Comment.fragments.asset} ${commentFragment} `, };