diff --git a/client/coral-admin/src/AppRouter.js b/client/coral-admin/src/AppRouter.js
index 92cc80d1d..28255aeb5 100644
--- a/client/coral-admin/src/AppRouter.js
+++ b/client/coral-admin/src/AppRouter.js
@@ -25,6 +25,7 @@ const routes = (
+
diff --git a/client/coral-admin/src/actions/configure.js b/client/coral-admin/src/actions/configure.js
index acc30be1b..0f82832e0 100644
--- a/client/coral-admin/src/actions/configure.js
+++ b/client/coral-admin/src/actions/configure.js
@@ -11,3 +11,11 @@ export const clearPending = () => {
export const setActiveSection = section => {
return { type: actions.SET_ACTIVE_SECTION, section };
};
+
+export const showSaveDialog = () => {
+ return { type: actions.SHOW_SAVE_DIALOG };
+};
+
+export const hideSaveDialog = () => {
+ return { type: actions.HIDE_SAVE_DIALOG };
+};
diff --git a/client/coral-admin/src/constants/configure.js b/client/coral-admin/src/constants/configure.js
index 05673b5aa..ed5f74578 100644
--- a/client/coral-admin/src/constants/configure.js
+++ b/client/coral-admin/src/constants/configure.js
@@ -3,3 +3,6 @@ const prefix = 'TALK_ADMIN_CONFIGURE';
export const UPDATE_PENDING = `${prefix}_UPDATE_PENDING`;
export const CLEAR_PENDING = `${prefix}_CLEAR_PENDING`;
export const SET_ACTIVE_SECTION = `${prefix}_SET_ACTIVE_SECTION`;
+
+export const SHOW_SAVE_DIALOG = `${prefix}_SHOW_SAVE_DIALOG`;
+export const HIDE_SAVE_DIALOG = `${prefix}_HIDE_SAVE_DIALOG`;
diff --git a/client/coral-admin/src/reducers/configure.js b/client/coral-admin/src/reducers/configure.js
index 9809b0fa9..335cc4ce0 100644
--- a/client/coral-admin/src/reducers/configure.js
+++ b/client/coral-admin/src/reducers/configure.js
@@ -7,10 +7,23 @@ const initialState = {
pending: {},
errors: {},
activeSection: 'stream',
+ saveDialog: false,
};
export default function configure(state = initialState, action) {
switch (action.type) {
+ case actions.SHOW_SAVE_DIALOG: {
+ return {
+ ...state,
+ saveDialog: true,
+ };
+ }
+ case actions.HIDE_SAVE_DIALOG: {
+ return {
+ ...state,
+ saveDialog: false,
+ };
+ }
case actions.UPDATE_PENDING: {
let next = state;
if (action.updater) {
@@ -45,6 +58,8 @@ export default function configure(state = initialState, action) {
...state,
activeSection: action.section,
};
+ default:
+ return state;
}
return state;
}
diff --git a/client/coral-admin/src/routes/Configure/components/Configure.js b/client/coral-admin/src/routes/Configure/components/Configure.js
index a988bcec5..4d9f0ff34 100644
--- a/client/coral-admin/src/routes/Configure/components/Configure.js
+++ b/client/coral-admin/src/routes/Configure/components/Configure.js
@@ -1,20 +1,14 @@
-import React, { Component } from 'react';
-
-import { Button, List, Item } from 'coral-ui';
-import styles from './Configure.css';
-import t from 'coral-framework/services/i18n';
-import { can } from 'coral-framework/services/perms';
+import React from 'react';
import PropTypes from 'prop-types';
+import cn from 'classnames';
+import t from 'coral-framework/services/i18n';
+import { Button, List, Item, Dialog } from 'coral-ui';
+import { can } from 'coral-framework/services/perms';
+import styles from './Configure.css';
-export default class Configure extends Component {
+class Configure extends React.Component {
render() {
- const {
- currentUser,
- canSave,
- savePending,
- setActiveSection,
- activeSection,
- } = this.props;
+ const { canSave, currentUser, root, savePending, settings } = this.props;
if (!can(currentUser, 'UPDATE_CONFIG')) {
return (
@@ -25,10 +19,27 @@ export default class Configure extends Component {
);
}
+ const passProps = {
+ root,
+ settings,
+ };
+
return (
+
-
+
-
{t('configure.stream_settings')}
@@ -57,7 +68,9 @@ export default class Configure extends Component {
)}
- {this.props.children}
+
+ {React.cloneElement(this.props.children, passProps)}
+
);
}
@@ -72,4 +85,8 @@ Configure.propTypes = {
setActiveSection: PropTypes.func.isRequired,
activeSection: PropTypes.string.isRequired,
children: PropTypes.node.isRequired,
+ saveDialog: PropTypes.bool,
+ hideSaveDialog: PropTypes.func.isRequired,
};
+
+export default Configure;
diff --git a/client/coral-admin/src/routes/Configure/containers/Configure.js b/client/coral-admin/src/routes/Configure/containers/Configure.js
index ce6ea0627..21f4b98e2 100644
--- a/client/coral-admin/src/routes/Configure/containers/Configure.js
+++ b/client/coral-admin/src/routes/Configure/containers/Configure.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { compose, gql } from 'react-apollo';
@@ -10,15 +10,28 @@ import { getDefinitionName } from 'coral-framework/utils';
import StreamSettings from './StreamSettings';
import TechSettings from './TechSettings';
import ModerationSettings from './ModerationSettings';
-import { clearPending, setActiveSection } from '../../../actions/configure';
+import {
+ clearPending,
+ setActiveSection,
+ showSaveDialog,
+ hideSaveDialog,
+} from '../../../actions/configure';
import Configure from '../components/Configure';
+import { withRouter } from 'react-router';
-class ConfigureContainer extends Component {
+class ConfigureContainer extends React.Component {
savePending = async () => {
await this.props.updateSettings(this.props.pending);
this.props.clearPending();
};
+ setActiveSection = section => {
+ // Check if pending
+ console.log('pending', this.props.pending);
+ this.props.setActiveSection(section);
+ this.props.router.push(`/admin/configure/${section}`);
+ };
+
render() {
if (this.props.data.error) {
return {this.props.data.error.message}
;
@@ -30,14 +43,18 @@ class ConfigureContainer extends Component {
return (
+ >
+ {this.props.children}
+
);
}
}
@@ -74,6 +91,7 @@ const mapStateToProps = state => ({
pending: state.configure.pending,
canSave: state.configure.canSave,
activeSection: state.configure.activeSection,
+ saveDialog: state.configure.saveDialog,
});
const mapDispatchToProps = dispatch =>
@@ -81,11 +99,14 @@ const mapDispatchToProps = dispatch =>
{
clearPending,
setActiveSection,
+ showSaveDialog,
+ hideSaveDialog,
},
dispatch
);
export default compose(
+ withRouter,
connect(mapStateToProps, mapDispatchToProps),
withUpdateSettings,
withConfigureQuery,
@@ -93,14 +114,19 @@ export default compose(
)(ConfigureContainer);
ConfigureContainer.propTypes = {
+ activeSection: PropTypes.string,
updateSettings: PropTypes.func.isRequired,
clearPending: PropTypes.func.isRequired,
setActiveSection: PropTypes.func.isRequired,
+ showSaveDialog: PropTypes.func.isRequired,
+ hideSaveDialog: PropTypes.func.isRequired,
+ saveDialog: PropTypes.bool.isRequired,
currentUser: PropTypes.object.isRequired,
data: PropTypes.object.isRequired,
root: PropTypes.object.isRequired,
canSave: PropTypes.bool.isRequired,
pending: PropTypes.object.isRequired,
mergedSettings: PropTypes.object.isRequired,
- activeSection: PropTypes.string.isRequired,
+ children: PropTypes.node.isRequired,
+ router: PropTypes.object,
};