From fcb107aefeebaa5709d2762a182edba9c5602918 Mon Sep 17 00:00:00 2001 From: Dan Zajdband Date: Thu, 15 Dec 2016 15:50:19 -0500 Subject: [PATCH] Global comment stream close setting (#171) * Added basic ui * Added functionality * Linted code * using named params instead of props * lint * fixed missing merge --- .../containers/Configure/CommentSettings.js | 59 +++++++++++++++++++ .../src/containers/Configure/Configure.css | 5 ++ client/coral-admin/src/translations.json | 9 +++ .../containers/ConfigureStreamContainer.js | 11 ++++ 4 files changed, 84 insertions(+) diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index 3a6a796e4..5819076c6 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/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}) => @@ -110,6 +132,27 @@ const CommentSettings = ({updateSettings, settingsError, settings, errors}) => < rows={3}/> + + + {lang.t('configure.close-after')} +
+ +
+ + + + + +
+ + {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); diff --git a/client/coral-admin/src/containers/Configure/Configure.css b/client/coral-admin/src/containers/Configure/Configure.css index 667bb4744..c0646c9e2 100644 --- a/client/coral-admin/src/containers/Configure/Configure.css +++ b/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; diff --git a/client/coral-admin/src/translations.json b/client/coral-admin/src/translations.json index e462f7567..ef00f1cf8 100644 --- a/client/coral-admin/src/translations.json +++ b/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", diff --git a/client/coral-configure/containers/ConfigureStreamContainer.js b/client/coral-configure/containers/ConfigureStreamContainer.js index d4b71f4e5..cb8bf0012 100644 --- a/client/coral-configure/containers/ConfigureStreamContainer.js +++ b/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 (

{status === 'open' ? 'Close' : 'Open'} Comment Stream

+ {status === 'open' ?

The comment stream will close in {this.getClosedIn()}.

: ''}