Implement open and close asset

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}) => (
   <div>
     <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
-    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(closedAt)}.</p> : ''}
+    {(!isClosed && closedAt) ? <p>{t('configure.comment_stream_will_close')} {timeago(new Date(closedAt))}.</p> : ''}
     <div className="close-comments-intro-wrapper">
       <p>
         {!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,
 };

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

@@ -10,6 +10,8 @@ class Configure extends React.Component {
         <AssetStatusInfo
           isClosed={this.props.isClosed}
           closedAt={this.props.closedAt}
+          onOpen={this.props.onOpenAsset}
+          onClose={this.props.onCloseAsset}
         />
       </div>
     );
@@ -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;

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 <Configure
       settings={this.props.asset.settings}
       isClosed={this.props.asset.isClosed}
       closedAt={this.props.asset.closedAt}
+      onOpenAsset={this.openAsset}
+      onCloseAsset={this.closeAsset}
     />;
   }
 }
 
 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);

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});
+            }
+          }
         });
       }}),
   });