diff --git a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js index e20f242cc..fec88537c 100644 --- a/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js +++ b/client/coral-embed-stream/src/tabs/configure/components/AssetStatusInfo.js @@ -6,7 +6,7 @@ import t, {timeago} from 'coral-framework/services/i18n'; const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => (

{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}

- {(!isClosed && closedAt) ?

{t('configure.comment_stream_will_close')} {timeago(closedAt)}.

: ''} + {(!isClosed && closedAt) ?

{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.

: ''}

{!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')} @@ -20,7 +20,7 @@ const AssetStatusInfo = ({isClosed, closedAt, onClose, onOpen}) => ( AssetStatusInfo.propTypes = { isClosed: PropTypes.bool.isRequired, - closedAt: PropTypes.object.isRequired, + closedAt: PropTypes.string, onClose: PropTypes.func.isRequired, onOpen: PropTypes.func.isRequired, }; 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 134923f74..821663ab7 100644 --- a/client/coral-embed-stream/src/tabs/configure/components/Configure.js +++ b/client/coral-embed-stream/src/tabs/configure/components/Configure.js @@ -10,6 +10,8 @@ class Configure extends React.Component {

); @@ -17,8 +19,10 @@ class Configure extends React.Component { } Configure.propTypes = { - isClosed: PropTypes.bool, - closedAt: PropTypes.object, + isClosed: PropTypes.bool.isRequired, + closedAt: PropTypes.string, + onOpenAsset: PropTypes.func.isRequired, + onCloseAsset: PropTypes.func.isRequired, }; 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 index 11f81da20..973e5a2d3 100644 --- a/client/coral-embed-stream/src/tabs/configure/containers/Configure.js +++ b/client/coral-embed-stream/src/tabs/configure/containers/Configure.js @@ -3,19 +3,27 @@ import {gql, compose} from 'react-apollo'; import {withFragments} from 'coral-framework/hocs'; import Configure from '../components/Configure'; import PropTypes from 'prop-types'; +import {withUpdateAssetStatus} from 'coral-framework/graphql/mutations'; 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 = { - asset: PropTypes.object, + asset: PropTypes.object.isRequired, + updateAssetStatus: PropTypes.func.isRequired, }; const withConfigureFragments = withFragments({ @@ -26,6 +34,7 @@ const withConfigureFragments = withFragments({ `, asset: gql` fragment CoralEmbedStream_Configure_asset on Asset { + id closedAt isClosed settings { @@ -37,6 +46,7 @@ const withConfigureFragments = withFragments({ const enhance = compose( withConfigureFragments, + withUpdateAssetStatus, ); export default enhance(ConfigureContainer); diff --git a/client/coral-framework/graphql/mutations.js b/client/coral-framework/graphql/mutations.js index 21bfd1825..ed4a6f782 100644 --- a/client/coral-framework/graphql/mutations.js +++ b/client/coral-framework/graphql/mutations.js @@ -385,7 +385,7 @@ export const withUpdateAssetSettings = withMutation( export const withUpdateAssetStatus = withMutation( gql` - mutation UpdateAssetStatus($id: ID!, $input: AssetStatusInput!) { + mutation UpdateAssetStatus($id: ID!, $input: UpdateAssetStatusInput!) { updateAssetStatus(id: $id, input: $input) { ...UpdateAssetStatusResponse } @@ -398,6 +398,29 @@ export const withUpdateAssetStatus = withMutation( id, input, }, + optimisticResponse: { + updateAssetStatus: { + __typename: 'UpdateAssetStatusResponse', + errors: null, + } + }, + update: (proxy) => { + if (input.closedAt !== undefined) { + const fragment = gql` + fragment Talk_UpdateAssetStatusResponse on Asset { + closedAt + isClosed + }`; + + const fragmentId = `Asset_${id}`; + const data = { + __typename: 'Asset', + closedAt: input.closedAt, + isClosed: !!input.closedAt && new Date(input.closedAt).getTime() <= new Date().getTime(), + }; + proxy.writeFragment({fragment, id: fragmentId, data}); + } + } }); }}), });