diff --git a/client/coral-admin/src/actions/settings.js b/client/coral-admin/src/actions/settings.js index 71106e1f7..1dfda51b9 100644 --- a/client/coral-admin/src/actions/settings.js +++ b/client/coral-admin/src/actions/settings.js @@ -26,7 +26,10 @@ export const updateSettings = settings => { }; export const saveSettingsToServer = () => (dispatch, getState) => { - const settings = getState().settings.toJS().settings; + let settings = getState().settings.toJS().settings; + if (settings.charCount) { + settings.charCount = parseInt(settings.charCount); + } dispatch({type: SAVE_SETTINGS_LOADING}); coralApi('/settings', {method: 'PUT', body: settings}) .then(() => { diff --git a/client/coral-admin/src/containers/Configure/CommentSettings.js b/client/coral-admin/src/containers/Configure/CommentSettings.js index b3ab8d62a..6589e115e 100644 --- a/client/coral-admin/src/containers/Configure/CommentSettings.js +++ b/client/coral-admin/src/containers/Configure/CommentSettings.js @@ -12,132 +12,115 @@ import { Icon } from 'react-mdl'; -class CommentSettings extends Component { +const updateCharCountEnable = (updateSettings, charCountChecked) => () => { + const charCountEnable = !charCountChecked; + updateSettings({charCountEnable}); +}; - state = { - charCountError: false +const updateCharCount = (updateSettings, settingsError) => (event) => { + const charCount = event.target.value; + if (charCount.match(/[^0-9]/)) { + settingsError('charCount', true); + } else { + settingsError('charCount', false); } + updateSettings({charCount: charCount}); +}; - static propTypes = { - updateSettings: PropTypes.func.isRequired, - settings: PropTypes.object.isRequired - } +const updateModeration = (updateSettings, mod) => () => { + const moderation = mod === 'pre' ? 'post' : 'pre'; + updateSettings({moderation}); +}; - updateCharCountEnable = (updateSettings, charCountChecked) => () => { - const charCountEnable = !charCountChecked; - updateSettings({charCountEnable}); - }; +const updateInfoBoxEnable = (updateSettings, infoBox) => () => { + const infoBoxEnable = !infoBox; + updateSettings({infoBoxEnable}); +}; - updateCharCount = (updateSettings) => (event) => { - const charCount = event.target.value; - if (charCount.match(/[^0-9]/)) { - this.setState({charCountError: true}); - } else { - this.setState({charCountError: false}); - } - updateSettings({charCount: charCount}); - }; +const updateInfoBoxContent = (updateSettings) => (event) => { + const infoBoxContent = event.target.value; + updateSettings({infoBoxContent}); +}; - updateModeration = (updateSettings, mod) => () => { - const moderation = mod === 'pre' ? 'post' : 'pre'; - updateSettings({moderation}); - }; +const updateClosedMessage = (updateSettings) => (event) => { + const closedMessage = event.target.value; + updateSettings({closedMessage}); +}; - updateInfoBoxEnable = (updateSettings, infoBox) => () => { - const infoBoxEnable = !infoBox; - updateSettings({infoBoxEnable}); - }; - - updateInfoBoxContent = (updateSettings) => (event) => { - const infoBoxContent = event.target.value; - updateSettings({infoBoxContent}); - }; - - updateClosedMessage = (updateSettings) => (event) => { - const closedMessage = event.target.value; - updateSettings({closedMessage}); - }; - - render() { - - const {updateSettings, settings} = this.props; - - return - - - - - -
{lang.t('configure.enable-pre-moderation')}
-

- {lang.t('configure.enable-pre-moderation-text')} +const CommentSettings = ({updateSettings, settingsError, settings, errors}) => + + + + + +

{lang.t('configure.enable-pre-moderation')}
+

+ {lang.t('configure.enable-pre-moderation-text')} +

+
+
+ + + + + +
{lang.t('configure.comment-count-header')}
+

+ {lang.t('configure.comment-count-text-pre')} + + {lang.t('configure.comment-count-text-post')} + { + errors.charCount && + +
+ + {lang.t('configure.comment-count-error')} +
+ }

-
- - - - - -
{lang.t('configure.comment-count-header')}
-

- {lang.t('configure.comment-count-text-pre')} - - {lang.t('configure.comment-count-text-post')} - { - this.state.charCountError && - -
- - {lang.t('configure.comment-count-error')} -
- } -

-
-
- - - - - - {lang.t('configure.include-comment-stream')} -

- {lang.t('configure.include-comment-stream-desc')} -

-
-
- - - - - - - - {lang.t('configure.closed-comments-desc')} - - - -
; - } -} + + + + + + + {lang.t('configure.include-comment-stream')} +

+ {lang.t('configure.include-comment-stream-desc')} +

+
+
+ + + + + + + + {lang.t('configure.closed-comments-desc')} + + + + ; export default CommentSettings; diff --git a/client/coral-admin/src/containers/Configure/Configure.js b/client/coral-admin/src/containers/Configure/Configure.js index db3bf6f20..8dd106cd0 100644 --- a/client/coral-admin/src/containers/Configure/Configure.js +++ b/client/coral-admin/src/containers/Configure/Configure.js @@ -22,7 +22,8 @@ class Configure extends React.Component { this.state = { activeSection: 'comments', wordlist: [], - changed: false + changed: false, + errors: {} }; } @@ -64,12 +65,23 @@ class Configure extends React.Component { this.props.dispatch(updateSettings(setting)); } + // Sets an arbitrary error string and a boolean state. + // This allows the system to track multiple errors. + onSettingError = (error, state) => { + this.setState((prevState) => { + prevState.errors[error] = state; + return prevState; + }); + } + getSection = (section) => { switch(section){ case 'comments': return ; + updateSettings={this.onSettingUpdate} + errors={this.state.errors} + settingsError={this.onSettingError}/>; case 'embed': return ; case 'wordlist': @@ -94,6 +106,9 @@ class Configure extends React.Component { let pageTitle = this.getPageTitle(this.state.activeSection); const section = this.getSection(this.state.activeSection); + const showSave = Object.keys(this.state.errors).reduce( + (bool, error) => this.state.errors[error] ? false : bool, this.state.changed); + if (this.props.fetchingSettings) { pageTitle += ' - Loading...'; } @@ -119,7 +134,7 @@ class Configure extends React.Component { { - this.state.changed ? + showSave ?