diff --git a/client/coral-embed-stream/src/components/CountdownSeconds.js b/client/coral-embed-stream/src/components/CountdownSeconds.js
new file mode 100644
index 000000000..1b9fca5d5
--- /dev/null
+++ b/client/coral-embed-stream/src/components/CountdownSeconds.js
@@ -0,0 +1,53 @@
+import React, {PropTypes} from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations';
+
+const lang = new I18n(translations);
+
+/**
+ * Countdown the number of seconds until a given Date
+ */
+export class CountdownSeconds extends React.Component {
+ static propTypes = {
+ until: PropTypes.instanceOf(Date).isRequired,
+ classNameForMsRemaining: PropTypes.func,
+ }
+ constructor(props) {
+ super(props);
+ this.countdownInterval = null;
+ }
+ componentDidMount() {
+ const {until} = this.props;
+ const now = new Date();
+ if (until - now > 0) {
+ this.countdownInterval = setInterval(() => {
+
+ // re-render
+ this.forceUpdate();
+ }, 1000);
+ }
+ }
+ componentWillUnmount() {
+ if (this.countdownInterval) {
+ this.countdownInterval = clearInterval(this.countdownInterval);
+ }
+ }
+ render() {
+ const now = new Date();
+ const {until, classNameForMsRemaining} = this.props;
+ const msRemaining = until - now;
+ const secRemaining = msRemaining / 1000;
+ const wholeSecRemaining = Math.floor(secRemaining);
+ const plural = secRemaining !== 1;
+ const units = lang.t(plural ? 'editComment.secondsPlural' : 'editComment.second');
+ let classFromProp;
+ if (typeof classNameForMsRemaining === 'function') {
+ classFromProp = classNameForMsRemaining(msRemaining);
+ }
+ return (
+
+ {`${wholeSecRemaining} ${units}`}
+
+ );
+ }
+}
diff --git a/client/coral-embed-stream/src/components/EditableCommentContent.js b/client/coral-embed-stream/src/components/EditableCommentContent.js
index b408c1b1a..1f14613c0 100644
--- a/client/coral-embed-stream/src/components/EditableCommentContent.js
+++ b/client/coral-embed-stream/src/components/EditableCommentContent.js
@@ -2,6 +2,7 @@ import React, {PropTypes} from 'react';
import {notifyForNewCommentStatus} from 'coral-plugin-commentbox/CommentBox';
import {CommentForm} from 'coral-plugin-commentbox/CommentForm';
import styles from './Comment.css';
+import {CountdownSeconds} from './CountdownSeconds';
import {Icon} from 'coral-ui';
import I18n from 'coral-framework/modules/i18n/i18n';
@@ -155,51 +156,3 @@ export class EditableCommentContent extends React.Component {
);
}
}
-
-/**
- * Countdown the number of seconds until a given Date
- */
-class CountdownSeconds extends React.Component {
- static propTypes = {
- until: PropTypes.instanceOf(Date).isRequired,
- classNameForMsRemaining: PropTypes.func,
- }
- constructor(props) {
- super(props);
- this.countdownInterval = null;
- }
- componentDidMount() {
- const {until} = this.props;
- const now = new Date();
- if (until - now > 0) {
- this.countdownInterval = setInterval(() => {
-
- // re-render
- this.forceUpdate();
- }, 1000);
- }
- }
- componentWillUnmount() {
- if (this.countdownInterval) {
- this.countdownInterval = clearInterval(this.countdownInterval);
- }
- }
- render() {
- const now = new Date();
- const {until, classNameForMsRemaining} = this.props;
- const msRemaining = until - now;
- const secRemaining = msRemaining / 1000;
- const wholeSecRemaining = Math.floor(secRemaining);
- const plural = secRemaining !== 1;
- const units = lang.t(plural ? 'editComment.secondsPlural' : 'editComment.second');
- let classFromProp;
- if (typeof classNameForMsRemaining === 'function') {
- classFromProp = classNameForMsRemaining(msRemaining);
- }
- return (
-
- {`${wholeSecRemaining} ${units}`}
-
- );
- }
-}