diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js index 4238dbf79..117c6a8e6 100644 --- a/client/coral-admin/src/routes/Configure/components/Configure.js +++ b/client/coral-admin/src/routes/Configure/components/Configure.js @@ -4,7 +4,7 @@ import {Button, List, Item} from 'coral-ui'; import styles from './Configure.css'; import StreamSettings from '../containers/StreamSettings'; import ModerationSettings from './ModerationSettings'; -import TechSettings from './TechSettings'; +import TechSettings from '../containers/TechSettings'; import t from 'coral-framework/services/i18n'; import {can} from 'coral-framework/services/perms'; import PropTypes from 'prop-types'; @@ -38,9 +38,9 @@ export default class Configure extends Component { break; case 'tech': sectionComponent = ; } @@ -110,7 +110,6 @@ export default class Configure extends Component { Configure.propTypes = { notify: PropTypes.func.isRequired, updateWordlist: PropTypes.func.isRequired, - updateDomainlist: PropTypes.func.isRequired, updateSettings: PropTypes.func.isRequired, errors: PropTypes.object.isRequired, savePending: PropTypes.func.isRequired, diff --git a/client/coral-admin/src/routes/Configure/components/TechSettings.js b/client/coral-admin/src/routes/Configure/components/TechSettings.js index 2fc7afb7f..03d5e3371 100644 --- a/client/coral-admin/src/routes/Configure/components/TechSettings.js +++ b/client/coral-admin/src/routes/Configure/components/TechSettings.js @@ -6,40 +6,57 @@ import EmbedLink from './EmbedLink'; import styles from './Configure.css'; import t from 'coral-framework/services/i18n'; -const updateCustomCssUrl = (updateSettings) => (event) => { - const customCssUrl = event.target.value; - updateSettings({customCssUrl}); -}; +class TechSettings extends React.Component { -const TechSettings = ({settings, onChangeDomainlist, updateSettings}) => { - return ( -
-

{t('configure.tech_settings')}

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

{t('configure.custom_css_url_desc')}

- -
-
-
- ); -}; + updateCustomCssUrl = (event) => { + const updater = {customCssUrl: {$set: event.target.value}}; + this.props.updatePending({updater}); + }; + + updateDomainlist = (listName, list) => { + this.props.updatePending({updater: { + domains: {$apply: (domains) => { + const changeSet = {[listName]: list}; + if (!domains) { + return changeSet; + } + return { + ...domains, + ...changeSet, + }; + }}, + }}); + }; + + render() { + const {settings} = this.props; + return ( +
+

{t('configure.tech_settings')}

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

{t('configure.custom_css_url_desc')}

+ +
+
+
+ ); + } +} TechSettings.propTypes = { - settings: PropTypes.shape({ - domains: PropTypes.shape({ - whitelist: 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 TechSettings; diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js index f4e0d769e..2a0260930 100644 --- a/client/coral-admin/src/routes/Configure/containers/Configure.js +++ b/client/coral-admin/src/routes/Configure/containers/Configure.js @@ -10,6 +10,7 @@ import merge from 'lodash/merge'; import {withUpdateSettings} from 'coral-framework/graphql/mutations'; import {getErrorMessages, getDefinitionName} from 'coral-framework/utils'; import StreamSettings from './StreamSettings'; +import TechSettings from './TechSettings'; import { updatePending, clearPending, @@ -34,21 +35,6 @@ class ConfigureContainer extends Component { }}); }; - updateDomainlist = (listName, list) => { - this.props.updatePending({updater: { - domains: {$apply: (domains) => { - const changeSet = {[listName]: list}; - if (!domains) { - return changeSet; - } - return { - ...domains, - ...changeSet, - }; - }}, - }}); - }; - updateSettings = (settings, {setError = {}} = {}) => { this.props.updatePending({updater: {$merge: settings}, errorUpdater: {$merge: setError}}); }; @@ -73,7 +59,6 @@ class ConfigureContainer extends Component { return ({ variables: {}, diff --git a/client/coral-admin/src/routes/Configure/containers/TechSettings.js b/client/coral-admin/src/routes/Configure/containers/TechSettings.js new file mode 100644 index 000000000..df33a3f9a --- /dev/null +++ b/client/coral-admin/src/routes/Configure/containers/TechSettings.js @@ -0,0 +1,37 @@ +import {connect} from 'react-redux'; +import {bindActionCreators} from 'redux'; +import {compose, gql} from 'react-apollo'; +import TechSettings from '../components/TechSettings'; +import withFragments from 'coral-framework/hocs/withFragments'; +import {getSlotFragmentSpreads} from 'coral-framework/utils'; +import {updatePending} from '../../../actions/configure'; + +const slots = [ + 'adminTechSettings', +]; + +const mapDispatchToProps = (dispatch) => + bindActionCreators({ + updatePending, + }, dispatch); + +export default compose( + withFragments({ + root: gql` + fragment TalkAdmin_TechSettings_root on RootQuery { + __typename + ${getSlotFragmentSpreads(slots, 'root')} + } + `, + settings: gql` + fragment TalkAdmin_TechSettings_settings on Settings { + customCssUrl + domains { + whitelist + } + ${getSlotFragmentSpreads(slots, 'settings')} + } + ` + }), + connect(null, mapDispatchToProps), +)(TechSettings);