Merge branch 'master' into my-comments-fix

client/coral-admin/src/containers/Configure/CommentSettings.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import {SelectField, Option} from 'react-mdl-selectfield';
 import I18n from 'coral-framework/modules/i18n/i18n';
 import translations from '../../translations.json';
 import styles from './Configure.css';
@@ -12,6 +13,12 @@ import {
   Icon
 } from 'react-mdl';
 
+const TIMESTAMPS = {
+  weeks: 60 * 60 * 24 * 7,
+  days: 60 * 60 * 24,
+  hours: 60 * 60
+};
+
 const updateCharCountEnable = (updateSettings, charCountChecked) => () => {
   const charCountEnable = !charCountChecked;
   updateSettings({charCountEnable});
@@ -47,6 +54,21 @@ const updateClosedMessage = (updateSettings) => (event) => {
   updateSettings({closedMessage});
 };
 
+// If we are changing the measure we need to recalculate using the old amount
+// Same thing if we are just changing the amount
+const updateClosedTimeout = (updateSettings, ts, isMeasure) => (event) => {
+  if (isMeasure) {
+    const amount = getTimeoutAmount(ts);
+    const closedTimeout = amount * TIMESTAMPS[event];
+    updateSettings({closedTimeout});
+  } else {
+    const val = event.target.value;
+    const measure = getTimeoutMeasure(ts);
+    const closedTimeout = val * TIMESTAMPS[measure];
+    updateSettings({closedTimeout});
+  }
+};
+
 const CommentSettings = ({updateSettings, settingsError, settings, errors}) => <List>
     <ListItem className={`${styles.configSetting} ${settings.moderation === 'pre' ? styles.enabledSetting : styles.disabledSetting}`}>
       <ListItemAction>
@@ -110,6 +132,27 @@ const CommentSettings = ({updateSettings, settingsError, settings, errors}) => <
           rows={3}/>
       </ListItemContent>
     </ListItem>
+    <ListItem className={styles.configSettingInfoBox}>
+      <ListItemContent>
+        {lang.t('configure.close-after')}
+        <br />
+        <Textfield
+          type='number'
+          pattern='[0-9]+'
+          style={{width: 50}}
+          onChange={updateClosedTimeout(updateSettings, settings.closedTimeout)}
+          value={getTimeoutAmount(settings.closedTimeout)}
+          label={lang.t('configure.closed-comments-label')} />
+        <div className={styles.configTimeoutSelect}>
+          <SelectField value={getTimeoutMeasure(settings.closedTimeout)}
+            onChange={updateClosedTimeout(updateSettings, settings.closedTimeout, true)}>
+            <Option value={'hours'}>{lang.t('configure.hours')}</Option>
+            <Option value={'days'}>{lang.t('configure.days')}</Option>
+            <Option value={'weeks'}>{lang.t('configure.weeks')}</Option>
+          </SelectField>
+        </div>
+      </ListItemContent>
+    </ListItem>
     <ListItem className={styles.configSettingInfoBox}>
       <ListItemContent>
         {lang.t('configure.closed-comments-desc')}
@@ -124,4 +167,20 @@ const CommentSettings = ({updateSettings, settingsError, settings, errors}) => <
 
 export default CommentSettings;
 
+// To see if we are talking about weeks, days or hours
+// We talk the remainder of the division and see if it's 0
+const getTimeoutMeasure = ts => {
+  if (ts % TIMESTAMPS['weeks'] === 0) {
+    return 'weeks';
+  } else if (ts % TIMESTAMPS['days'] === 0) {
+    return 'days';
+  } else if (ts % TIMESTAMPS['hours'] === 0) {
+    return 'hours';
+  }
+};
+
+// Dividing the amount by it's measure (hours, days, weeks) we
+// obtain the amount of time
+const getTimeoutAmount = ts => ts / TIMESTAMPS[getTimeoutMeasure(ts)];
+
 const lang = new I18n(translations);

client/coral-admin/src/containers/Configure/Configure.css

@@ -63,6 +63,11 @@
   display: block;
 }
 
+.configTimeoutSelect {
+  display: inline-block;
+  margin-left: 20px;
+}
+
 .charCountTexfield {
   width: 4em;
   padding: 0px;

client/coral-admin/src/translations.json

@@ -57,6 +57,10 @@
       "community": "Community",
       "closed-comments-desc": "Write a message for closed threads",
       "closed-comments-label": "Write a message...",
+      "hours": "Hours",
+      "days": "Days",
+      "weeks": "Weeks",
+      "close-after": "Close comments after",
       "comment-count-header": "Limit Comment Length",
       "comment-count-text-pre":  "Comments will be limited to ",
       "comment-count-text-post": " characters.",
@@ -117,6 +121,11 @@
       "community": "Comunidad",
       "closed-comments-desc": "Escribe un mensaje para cuando los comentarios se encuentran cerrados",
       "closed-comments-label": "Escribe un mensaje...",
+      "never": "Nunca",
+      "hours": "Horas",
+      "days": "Días",
+      "weeks": "Semanas",
+      "close-after": "Cerrar comentarios luego de",
       "comment-count-header": "Limitar el largo del comentario",
       "comment-count-text-pre":  "El largo de comentarios será ",
       "comment-count-text-post": " caracteres",

client/coral-configure/containers/ConfigureStreamContainer.js

@@ -1,11 +1,14 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
+import {I18n} from '../../coral-framework';
 import {updateOpenStatus, updateConfiguration} from '../../coral-framework/actions/config';
 
 import CloseCommentsInfo from '../components/CloseCommentsInfo';
 import ConfigureCommentStream from '../components/ConfigureCommentStream';
 
+const lang = new I18n();
+
 class ConfigureStreamContainer extends Component {
   constructor (props) {
     super(props);
@@ -47,8 +50,15 @@ class ConfigureStreamContainer extends Component {
     this.props.updateStatus(this.props.config.status === 'open' ? 'closed' : 'open');
   }
 
+  getClosedIn () {
+    const {config} = this.props;
+    const {created_at, closedTimeout} = config;
+    return lang.timeago(new Date(created_at).getTime() + (1000 * closedTimeout));
+  }
+
   render () {
     const {status} = this.props;
+
     return (
       <div>
         <ConfigureCommentStream
@@ -59,6 +69,7 @@ class ConfigureStreamContainer extends Component {
         />
         <hr />
         <h3>{status === 'open' ? 'Close' : 'Open'} Comment Stream</h3>
+        {status === 'open' ? <p>The comment stream will close in {this.getClosedIn()}.</p> : ''}
         <CloseCommentsInfo
           onClick={this.toggleStatus}
           status={status}