diff --git a/client/coral-embed-stream/src/tabs/configure/components/Configure.js b/client/coral-embed-stream/src/tabs/configure/components/Configure.js index 821663ab7..f5f54e339 100644 --- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js +++ b/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 {

); @@ -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; diff --git a/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/containers/AssetStatusInfo.js new file mode 100644 index 000000000..c3360f072 --- /dev/null +++ b/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 ; + } +} + +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); diff --git a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js index 973e5a2d3..48c596f05 100644 --- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js +++ b/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 ; } } 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);