diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js index 117c6a8e6..f61089080 100644 --- a/client/coral-admin/src/routes/Configure/components/Configure.js +++ b/client/coral-admin/src/routes/Configure/components/Configure.js @@ -3,7 +3,7 @@ import React, {Component} from 'react'; import {Button, List, Item} from 'coral-ui'; import styles from './Configure.css'; import StreamSettings from '../containers/StreamSettings'; -import ModerationSettings from './ModerationSettings'; +import ModerationSettings from '../containers/ModerationSettings'; import TechSettings from '../containers/TechSettings'; import t from 'coral-framework/services/i18n'; import {can} from 'coral-framework/services/perms'; @@ -20,33 +20,25 @@ export default class Configure extends Component { } getSection (section) { - let sectionComponent; + let SectionComponent; switch(section){ case 'stream': - sectionComponent = ; + SectionComponent = StreamSettings; break; case 'moderation': - sectionComponent = ; + SectionComponent = ModerationSettings; break; case 'tech': - sectionComponent = ; + SectionComponent = TechSettings; } return (
- {sectionComponent} +
); } diff --git a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js index b3f51d843..a33d6fa46 100644 --- a/client/coral-admin/src/routes/Configure/components/ModerationSettings.js +++ b/client/coral-admin/src/routes/Configure/components/ModerationSettings.js @@ -6,86 +6,101 @@ import {Checkbox} from 'react-mdl'; import Wordlist from './Wordlist'; import t from 'coral-framework/services/i18n'; -const updateModeration = (updateSettings, mod) => () => { - const moderation = mod === 'PRE' ? 'POST' : 'PRE'; - updateSettings({moderation}); -}; +class ModerationSettings extends React.Component { -const updateEmailConfirmation = (updateSettings, verify) => () => { - updateSettings({requireEmailConfirmation: !verify}); -}; + updateModeration = () => { + const updater = {moderation: {$set: this.props.settings.moderation === 'PRE' ? 'POST' : 'PRE'}}; + this.props.updatePending({updater}); + }; -const updatePremodLinksEnable = (updateSettings, premodLinks) => () => { - const premodLinksEnable = !premodLinks; - updateSettings({premodLinksEnable}); -}; + updateEmailConfirmation = () => { + const updater = {requireEmailConfirmation: {$set: !this.props.settings.requireEmailConfirmation}}; + this.props.updatePending({updater}); + }; -const ModerationSettings = ({settings, updateSettings, onChangeWordlist}) => { + updatePremodLinksEnable = () => { + const updater = {premodLinksEnable: {$set: !this.props.settings.premodLinksEnable}}; + this.props.updatePending({updater}); + }; - // just putting this here for shorthand below - const on = styles.enabledSetting; - const off = styles.disabledSetting; + updateWordlist = (listName, list) => { + this.props.updatePending({updater: { + wordlist: {$apply: (wordlist) => { + const changeSet = {[listName]: list}; + if (!wordlist) { + return changeSet; + } + return { + ...wordlist, + ...changeSet, + }; + }}, + }}); + }; - return ( -
-

{t('configure.moderation_settings')}

- -
- -
-
-
{t('configure.require_email_verification')}
-

- {t('configure.require_email_verification_text')} -

-
-
- -
- -
-
-
{t('configure.enable_pre_moderation')}
-

- {t('configure.enable_pre_moderation_text')} -

-
-
- -
- -
-
-
{t('configure.enable_premod_links')}
-

- {t('configure.enable_premod_links_text')} -

-
-
- -
- ); -}; + render() { + const {settings} = this.props; + + // just putting this here for shorthand below + const on = styles.enabledSetting; + const off = styles.disabledSetting; + + return ( +
+

{t('configure.moderation_settings')}

+ +
+ +
+
+
{t('configure.require_email_verification')}
+

+ {t('configure.require_email_verification_text')} +

+
+
+ +
+ +
+
+
{t('configure.enable_pre_moderation')}
+

+ {t('configure.enable_pre_moderation_text')} +

+
+
+ +
+ +
+
+
{t('configure.enable_premod_links')}
+

+ {t('configure.enable_premod_links_text')} +

+
+
+ +
+ ); + } +} ModerationSettings.propTypes = { - onChangeWordlist: PropTypes.func.isRequired, - settings: PropTypes.shape({ - moderation: PropTypes.string.isRequired, - wordlist: PropTypes.shape({ - banned: PropTypes.array.isRequired, - suspect: PropTypes.array.isRequired - }) - }).isRequired, - updateSettings: PropTypes.func.isRequired + updatePending: PropTypes.func.isRequired, + data: PropTypes.object.isRequired, + root: PropTypes.object.isRequired, + settings: PropTypes.object.isRequired, }; export default ModerationSettings; diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js index 2a0260930..b0c276b5e 100644 --- a/client/coral-admin/src/routes/Configure/containers/Configure.js +++ b/client/coral-admin/src/routes/Configure/containers/Configure.js @@ -11,6 +11,7 @@ import {withUpdateSettings} from 'coral-framework/graphql/mutations'; import {getErrorMessages, getDefinitionName} from 'coral-framework/utils'; import StreamSettings from './StreamSettings'; import TechSettings from './TechSettings'; +import ModerationSettings from './ModerationSettings'; import { updatePending, clearPending, @@ -99,14 +100,18 @@ const withConfigureQuery = withQuery(gql` } ...${getDefinitionName(StreamSettings.fragments.settings)} ...${getDefinitionName(TechSettings.fragments.settings)} + ...${getDefinitionName(ModerationSettings.fragments.settings)} } ...${getDefinitionName(StreamSettings.fragments.root)} ...${getDefinitionName(TechSettings.fragments.root)} + ...${getDefinitionName(ModerationSettings.fragments.root)} } ${StreamSettings.fragments.root} ${StreamSettings.fragments.settings} ${TechSettings.fragments.root} ${TechSettings.fragments.settings} + ${ModerationSettings.fragments.root} + ${ModerationSettings.fragments.settings} `, { options: () => ({ variables: {}, diff --git a/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js new file mode 100644 index 000000000..0583378a9 --- /dev/null +++ b/client/coral-admin/src/routes/Configure/containers/ModerationSettings.js @@ -0,0 +1,40 @@ +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {compose, gql} from 'react-apollo'; +import ModerationSettings from '../components/ModerationSettings'; +import withFragments from 'coral-framework/hocs/withFragments'; +import {getSlotFragmentSpreads} from 'coral-framework/utils'; +import {updatePending} from '../../../actions/configure'; + +const slots = [ + 'adminModerationSettings', +]; + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + updatePending, + }, dispatch); + +export default compose( + withFragments({ + root: gql` + fragment TalkAdmin_ModerationSettings_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, + settings: gql` + fragment TalkAdmin_ModerationSettings_settings on Settings { + requireEmailConfirmation + moderation + premodLinksEnable + wordlist { + suspect + banned + } + ${getSlotFragmentSpreads(slots, 'settings')} + } + ` + }), + connect(null, mapDispatchToProps), +)(ModerationSettings);