router and state lifted

client/coral-admin/src/AppRouter.js

@@ -25,6 +25,7 @@ const routes = (
         <Route path="stream" component={StreamSettings} />
         <Route path="moderation" component={ModerationSettings} />
         <Route path="tech" component={TechSettings} />
+        <IndexRedirect to="stream" />
       </Route>
 
       <Route path="stories" component={Stories} />

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 };
+};

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`;

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;
 }

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 (
       <div className={styles.container}>
+        <Dialog
+          className={cn(styles.dialog, 'talk-ban-user-dialog')}
+          id="banUserDialog"
+          open={this.props.saveDialog}
+          onCancel={this.props.hideSaveDialog}
+          title={t('bandialog.ban_user')}
+        >
+          Are you sure?
+        </Dialog>
         <div className={styles.leftColumn}>
-          <List onChange={setActiveSection} activeItem={activeSection}>
+          <List
+            onChange={this.props.setActiveSection}
+            activeItem={this.props.activeSection}
+          >
             <Item itemId="stream" icon="speaker_notes">
               {t('configure.stream_settings')}
             </Item>
@@ -57,7 +68,9 @@ export default class Configure extends Component {
             )}
           </div>
         </div>
-        <div className={styles.mainContent}>{this.props.children}</div>
+        <div className={styles.mainContent}>
+          {React.cloneElement(this.props.children, passProps)}
+        </div>
       </div>
     );
   }
@@ -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;

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 <div>{this.props.data.error.message}</div>;
@@ -30,14 +43,18 @@ class ConfigureContainer extends Component {
 
     return (
       <Configure
+        saveDialog={this.props.saveDialog}
+        activeSection={this.props.activeSection}
+        hideSaveDialog={this.props.hideSaveDialog}
+        canSave={this.props.canSave}
         currentUser={this.props.currentUser}
         root={this.props.root}
         settings={this.props.mergedSettings}
-        canSave={this.props.canSave}
+        setActiveSection={this.setActiveSection}
         savePending={this.savePending}
-        setActiveSection={this.props.setActiveSection}
-        activeSection={this.props.activeSection}
-      />
+      >
+        {this.props.children}
+      </Configure>
     );
   }
 }
@@ -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,
 };