Removin actions, using routes, and continuing the transition when the user makes an action

client/coral-admin/src/actions/configure.js

@@ -8,10 +8,6 @@ export const clearPending = () => {
   return { type: actions.CLEAR_PENDING };
 };
 
-export const setActiveSection = section => {
-  return { type: actions.SET_ACTIVE_SECTION, section };
-};
-
 export const showSaveDialog = () => {
   return { type: actions.SHOW_SAVE_DIALOG };
 };

client/coral-admin/src/constants/configure.js

@@ -2,7 +2,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

@@ -6,7 +6,6 @@ const initialState = {
   canSave: false,
   pending: {},
   errors: {},
-  activeSection: 'stream',
   saveDialog: false,
 };
 
@@ -53,11 +52,6 @@ export default function configure(state = initialState, action) {
         pending: {},
         canSave: false,
       };
-    case actions.SET_ACTIVE_SECTION:
-      return {
-        ...state,
-        activeSection: action.section,
-      };
     default:
       return state;
   }

client/coral-admin/src/routes/Configure/components/Configure.js

@@ -29,7 +29,7 @@ class Configure extends React.Component {
         />
         <div className={styles.leftColumn}>
           <List
-            onChange={this.props.setActiveSection}
+            onChange={this.props.handleSectionChange}
             activeItem={this.props.activeSection}
           >
             <Item itemId="stream" icon="speaker_notes">
@@ -76,7 +76,7 @@ Configure.propTypes = {
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
-  setActiveSection: PropTypes.func.isRequired,
+  handleSectionChange: PropTypes.func.isRequired,
   activeSection: PropTypes.string.isRequired,
   children: PropTypes.node.isRequired,
   saveDialog: PropTypes.bool,

client/coral-admin/src/routes/Configure/containers/Configure.js

@@ -12,7 +12,6 @@ import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
 import {
   clearPending,
-  setActiveSection,
   showSaveDialog,
   hideSaveDialog,
 } from '../../../actions/configure';
@@ -20,6 +19,8 @@ import Configure from '../components/Configure';
 import { withRouter } from 'react-router';
 
 class ConfigureContainer extends React.Component {
+  state = { nextRoute: '' };
+
   savePending = async () => {
     await this.props.updateSettings(this.props.pending);
     this.props.clearPending();
@@ -28,19 +29,32 @@ class ConfigureContainer extends React.Component {
   saveChanges = async () => {
     await this.savePending();
     this.props.hideSaveDialog();
+    this.gotoNextRoute();
   };
 
-  discardChanges = () => {
-    this.props.clearPending();
+  discardChanges = async () => {
+    await this.props.clearPending();
     this.props.hideSaveDialog();
+    this.gotoNextRoute();
   };
 
-  setActiveSection = section => {
+  gotoNextRoute = () => {
+    const { nextRoute } = this.state;
+    if (nextRoute) {
+      this.props.router.push(nextRoute);
+      this.setState({ nextRoute: '' });
+    }
+  };
+
+  handleSectionChange = async section => {
+    const nextRoute = `/admin/configure/${section}`;
+
     if (this.shouldShowSaveDialog()) {
+      await this.setState({ nextRoute });
       this.props.showSaveDialog();
     } else {
-      this.props.setActiveSection(section);
-      this.props.router.push(`/admin/configure/${section}`);
+      // Just go to the section
+      this.props.router.push(nextRoute);
     }
   };
 
@@ -48,8 +62,9 @@ class ConfigureContainer extends React.Component {
     return !!Object.keys(this.props.pending).length;
   };
 
-  routeLeave = () => {
+  routeLeave = ({ pathname }) => {
     if (this.shouldShowSaveDialog()) {
+      this.setState({ nextRoute: pathname });
       this.props.showSaveDialog();
       return false;
     }
@@ -73,13 +88,13 @@ class ConfigureContainer extends React.Component {
         saveChanges={this.saveChanges}
         discardChanges={this.discardChanges}
         saveDialog={this.props.saveDialog}
-        activeSection={this.props.activeSection}
+        activeSection={this.props.routes[3].path}
         hideSaveDialog={this.props.hideSaveDialog}
         canSave={this.props.canSave}
         currentUser={this.props.currentUser}
         root={this.props.root}
         settings={this.props.mergedSettings}
-        setActiveSection={this.setActiveSection}
+        handleSectionChange={this.handleSectionChange}
         savePending={this.savePending}
       >
         {this.props.children}
@@ -127,7 +142,6 @@ const mapDispatchToProps = dispatch =>
   bindActionCreators(
     {
       clearPending,
-      setActiveSection,
       showSaveDialog,
       hideSaveDialog,
     },
@@ -146,7 +160,6 @@ 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,
@@ -159,4 +172,5 @@ ConfigureContainer.propTypes = {
   children: PropTypes.node.isRequired,
   router: PropTypes.object,
   route: PropTypes.object,
+  routes: PropTypes.object,
 };