Refactor query tree

client/coral-embed-stream/src/tabs/configure/components/Configure.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import AssetStatusInfo from './AssetStatusInfo';
+import AssetStatusInfo from '../containers/AssetStatusInfo';
 import PropTypes from 'prop-types';
 
 class Configure extends React.Component {
@@ -8,10 +8,7 @@ class Configure extends React.Component {
       <div className='talk-embed-stream-configuration-container'>
         <hr />
         <AssetStatusInfo
-          isClosed={this.props.isClosed}
-          closedAt={this.props.closedAt}
-          onOpen={this.props.onOpenAsset}
-          onClose={this.props.onCloseAsset}
+          asset={this.props.asset}
         />
       </div>
     );
@@ -19,10 +16,9 @@ class Configure extends React.Component {
 }
 
 Configure.propTypes = {
-  isClosed: PropTypes.bool.isRequired,
-  closedAt: PropTypes.string,
-  onOpenAsset: PropTypes.func.isRequired,
-  onCloseAsset: PropTypes.func.isRequired,
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
+  asset: PropTypes.object.isRequired,
 };
 
 export default Configure;

client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
+import AssetStatusInfo from '../components/AssetStatusInfo';
+import PropTypes from 'prop-types';
+import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+
+class AssetStatusInfoContainer extends React.Component {
+
+  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
+  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
+
+  render() {
+    return <AssetStatusInfo
+      settings={this.props.asset.settings}
+      isClosed={this.props.asset.isClosed}
+      closedAt={this.props.asset.closedAt}
+      onOpen={this.openAsset}
+      onClose={this.closeAsset}
+    />;
+  }
+}
+
+AssetStatusInfoContainer.propTypes = {
+  asset: PropTypes.object.isRequired,
+  updateAssetStatus: PropTypes.func.isRequired,
+};
+
+const withAssetStatusInfoFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AssetStatusInfo_asset on Asset {
+      id
+      closedAt
+      isClosed
+      settings {
+        moderation
+      }
+    }
+  `,
+});
+
+const enhance = compose(
+  withAssetStatusInfoFragments,
+  withUpdateAssetStatus,
+);
+
+export default enhance(AssetStatusInfoContainer);

client/coral-embed-stream/src/tabs/configure/containers/Configure.js

@@ -2,28 +2,25 @@ import React from 'react';
 import {gql, compose} from 'react-apollo';
 import {withFragments} from 'coral-framework/hocs';
 import Configure from '../components/Configure';
+import AssetStatusInfo from './AssetStatusInfo';
 import PropTypes from 'prop-types';
-import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations';
+import {getDefinitionName} from 'coral-framework/utils';
 
 class ConfigureContainer extends React.Component {
 
-  openAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: null});
-  closeAsset = () => this.props.updateAssetStatus(this.props.asset.id, {closedAt: new Date().toISOString()});
-
   render() {
     return <Configure
-      settings={this.props.asset.settings}
-      isClosed={this.props.asset.isClosed}
-      closedAt={this.props.asset.closedAt}
-      onOpenAsset={this.openAsset}
-      onCloseAsset={this.closeAsset}
+      data={this.props.data}
+      root={this.props.root}
+      asset={this.props.asset}
     />;
   }
 }
 
 ConfigureContainer.propTypes = {
+  data: PropTypes.object.isRequired,
+  root: PropTypes.object.isRequired,
   asset: PropTypes.object.isRequired,
-  updateAssetStatus: PropTypes.func.isRequired,
 };
 
 const withConfigureFragments = withFragments({
@@ -34,19 +31,15 @@ const withConfigureFragments = withFragments({
   `,
   asset: gql`
     fragment CoralEmbedStream_Configure_asset on Asset {
-      id
-      closedAt
-      isClosed
-      settings {
-        moderation
-      }
+      __typename
+      ...${getDefinitionName(AssetStatusInfo.fragments.asset)}
     }
+    ${AssetStatusInfo.fragments.asset}
   `,
 });
 
 const enhance = compose(
   withConfigureFragments,
-  withUpdateAssetStatus,
 );
 
 export default enhance(ConfigureContainer);