Move asset fragment up one level

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')}
         </Tab>
       );
+      tabs.push(
+        <Tab key='config2' tabId='config2'>
+          {t('framework.configure_stream')}
+        </Tab>
+      );
     }
     return tabs;
   }
@@ -87,7 +93,7 @@ export default class Embed extends React.Component {
           tabs={this.getTabs()}
           tabPanes={[
             <TabPane key='stream' tabId='stream' className='talk-embed-stream-comments-tab-pane'>
-              <Stream data={data} root={root} />
+              <Stream data={data} root={root} asset={root.asset} />
             </TabPane>,
             <TabPane key='profile' tabId='profile' className='talk-embed-stream-profile-tab-pane'>
               <ProfileContainer />
@@ -95,6 +101,9 @@ export default class Embed extends React.Component {
             <TabPane key='config' tabId='config' className='talk-embed-stream-configuration-tab-pane'>
               <ConfigureStreamContainer />
             </TabPane>,
+            <TabPane key='config2' tabId='config2' className='talk-embed-stream-configuration2-tab-pane'>
+              <Configure data={data} root={root} asset={root.asset} />
+            </TabPane>,
           ]}
         />
       </div>

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, {

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 <div>Configure</div>;
+  }
+}
+
+export default Configure;

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 <Configure
+      settings={this.props.asset.settings}
+    />;
+  }
+}
+
+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);

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]);

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 {
               <AllCommentsPane
                 data={data}
                 root={root}
+                asset={asset}
                 comments={comments}
                 commentClassNames={commentClassNames}
                 setActiveReplyBox={setActiveReplyBox}
@@ -176,7 +179,6 @@ class Stream extends React.Component {
                 notify={notify}
                 disableReply={!open}
                 postComment={postComment}
-                asset={asset}
                 currentUser={user}
                 postFlag={postFlag}
                 postDontAgree={postDontAgree}
@@ -202,7 +204,8 @@ class Stream extends React.Component {
       data,
       root,
       appendItemArray,
-      root: {asset, asset: {comment: highlightedComment}},
+      asset,
+      asset: {comment: highlightedComment},
       postComment,
       notify,
       updateItem,

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

@@ -36,7 +36,7 @@ class StreamContainer extends React.Component {
     this.commentsEditedSubscription = this.props.data.subscribeToMore({
       document: COMMENTS_EDITED_SUBSCRIPTION,
       variables: {
-        assetId: this.props.root.asset.id,
+        assetId: this.props.asset.id,
       },
       updateQuery: (prev, {subscriptionData: {data: {commentEdited}}}) => {
 
@@ -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 <Spinner />;
     }
@@ -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}
   `,
 };