Automatic asset closure

client/coral-embed-stream/src/components/Embed.js

@@ -5,6 +5,7 @@ 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';
+import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 
 import ExtendableTabPanel from '../containers/ExtendableTabPanel';
 import {Tab, TabPane} from 'coral-ui';
@@ -56,11 +57,12 @@ export default class Embed extends React.Component {
   }
 
   render() {
-    const {activeTab, commentId, root, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
+    const {activeTab, commentId, root, root: {asset}, data, auth: {showSignInDialog, signInDialogFocus}, blurSignInDialog, focusSignInDialog, hideSignInDialog, router: {location: {query: {parentUrl}}}} = this.props;
     const hasHighlightedComment = !!commentId;
 
     return (
       <div className={cn('talk-embed-stream', {'talk-embed-stream-highlight-comment': hasHighlightedComment})}>
+        <AutomaticAssetClosure asset={asset} />
         <IfSlotIsNotEmpty slot="login">
           <Popup
             href={`embed/stream/login?parentUrl=${encodeURIComponent(parentUrl)}`}

client/coral-embed-stream/src/containers/AutomaticAssetClosure.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {gql} from 'react-apollo';
+import {gql, compose} from 'react-apollo';
+import {withFragments} from 'coral-framework/hocs';
 
 const FRAGMENT = gql`
   fragment CoralEmbedStream_AutomaticAssetClosure_Fragment on Asset {
-    id
     isClosed
   }
 `;
@@ -26,15 +26,15 @@ class AutomaticAssetClosure extends React.Component {
   timer = null;
 
   componentWillMount() {
-    this.setupTimer(this.props.assetId, this.props.closedAt);
+    this.setupTimer(this.props.asset.id, this.props.asset.closedAt);
   }
 
   componentWillReceiveProps(next) {
     if (
-      this.props.assetId !== next.assetId ||
-      this.props.closedAt !== next.closedAt
+      this.props.asset.id !== next.asset.id ||
+      this.props.asset.closedAt !== next.asset.closedAt
     ) {
-      this.setupTimer(next.assetId, next.closedAt);
+      this.setupTimer(next.asset.id, next.asset.closedAt);
     }
   }
 
@@ -43,6 +43,7 @@ class AutomaticAssetClosure extends React.Component {
       fragment: FRAGMENT,
       id: getFragmentId(assetId),
       data: {
+        __typename: 'Asset',
         isClosed: true,
       },
     });
@@ -74,9 +75,21 @@ class AutomaticAssetClosure extends React.Component {
   }
 }
 
-AutomaticAssetClosure.PropTypes = {
-  assetId: PropTypes.string,
-  closedAt: PropTypes.string,
+AutomaticAssetClosure.propTypes = {
+  asset: PropTypes.object.isRequired,
 };
 
-export default AutomaticAssetClosure;
+const withAutomaticAssetClosureFragments = withFragments({
+  asset: gql`
+    fragment CoralEmbedStream_AutomaticAssetClosure_asset on Asset {
+      id
+      closedAt
+    }
+  `,
+});
+
+const enhance = compose(
+  withAutomaticAssetClosureFragments,
+);
+
+export default enhance(AutomaticAssetClosure);

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 AutomaticAssetClosure from './AutomaticAssetClosure';
 import Configure from '../tabs/configure/containers/Configure';
 import {notify} from 'coral-framework/actions/notification';
 import t from 'coral-framework/services/i18n';
@@ -174,6 +175,7 @@ const EMBED_QUERY = gql`
     asset(id: $assetId, url: $assetUrl) {
       ...${getDefinitionName(Configure.fragments.asset)}
       ...${getDefinitionName(Stream.fragments.asset)}
+      ...${getDefinitionName(AutomaticAssetClosure.fragments.asset)}
     }
     ${getSlotFragmentSpreads(slots, 'root')}
     ...${getDefinitionName(Stream.fragments.root)}
@@ -183,6 +185,7 @@ const EMBED_QUERY = gql`
   ${Stream.fragments.asset}
   ${Configure.fragments.root}
   ${Configure.fragments.asset}
+  ${AutomaticAssetClosure.fragments.asset}
 `;
 
 export const withEmbedQuery = withQuery(EMBED_QUERY, {

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

@@ -3,20 +3,60 @@ import {Button} from 'coral-ui';
 import PropTypes from 'prop-types';
 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(new Date(closedAt))}.</p> : ''}
-    <div className="close-comments-intro-wrapper">
-      <p>
-        {!isClosed ? t('configure.open_stream_configuration') : t('configure.close_stream_configuration')}
-      </p>
-      <Button onClick={!isClosed ? onClose : onOpen}>
-        {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
-      </Button>
-    </div>
-  </div>
-);
+class AssetStatusInfo extends React.Component {
+
+  timer = null;
+
+  constructor(props) {
+    super(props);
+    this.setupTimer(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setupTimer(nextProps);
+  }
+
+  interval(closedAt) {
+    const diff = new Date(closedAt).getTime() - new Date().getTime();
+    return diff > 60000 ? 60000 : 1000;
+  }
+
+  setupTimer({closedAt, isClosed} = this.props) {
+    if (this.timer && (isClosed || !closedAt)) {
+      clearTimeout(this.timer);
+      this.timer = null;
+    }
+    if (isClosed || !closedAt) {
+      this.timer = null;
+      return;
+    }
+    if (!this.timer) {
+      this.timer = setTimeout(() => {
+        this.timer = null;
+        this.forceUpdate();
+        this.setupTimer();
+      }, this.interval(closedAt));
+    }
+  }
+
+  render() {
+    const {isClosed, closedAt, onClose, onOpen} = this.props;
+    return (
+      <div>
+        <h3>{!isClosed ? t('configure.close') : t('configure.open')} {t('configure.comment_stream')}</h3>
+        {(!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')}
+          </p>
+          <Button onClick={!isClosed ? onClose : onOpen}>
+            {!isClosed ? t('configure.close_stream') : t('configure.open_stream')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
 
 AssetStatusInfo.propTypes = {
   isClosed: PropTypes.bool.isRequired,

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

@@ -18,7 +18,6 @@ import cn from 'classnames';
 
 import {getTopLevelParent, attachCommentToParent} from '../../../graphql/utils';
 import AllCommentsPane from './AllCommentsPane';
-import AutomaticAssetClosure from '../containers/AutomaticAssetClosure';
 import ExtendableTabPanel from '../../../containers/ExtendableTabPanel';
 
 import styles from './Stream.css';
@@ -234,7 +233,6 @@ class Stream extends React.Component {
 
     return (
       <div id="stream" className={styles.root}>
-        <AutomaticAssetClosure assetId={asset.id} closedAt={asset.closedAt}/>
         {highlightedComment &&
           <Button
             cStyle="darkGrey"

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

@@ -307,7 +307,6 @@ const fragments = {
       id
       title
       url
-      closedAt
       isClosed
       created_at
       settings {