Move activeSection to redux

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

@@ -7,3 +7,7 @@ export const updatePending = ({updater, errorUpdater}) => {
 export const clearPending = () => {
   return {type: actions.CLEAR_PENDING};
 };
+
+export const setActiveSection = (section) => {
+  return {type: actions.SET_ACTIVE_SECTION, section};
+};

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

@@ -1,4 +1,5 @@
-const prefix = 'CORAL_ADMIN';
+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`;

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

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

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

@@ -11,14 +11,6 @@ import PropTypes from 'prop-types';
 
 export default class Configure extends Component {
 
-  state = {
-    activeSection: 'stream',
-  };
-
-  changeSection = (activeSection) => {
-    this.setState({activeSection});
-  }
-
   getSectionComponent(section) {
     switch(section){
     case 'stream':
@@ -32,9 +24,8 @@ export default class Configure extends Component {
   }
 
   render () {
-    const {activeSection} = this.state;
+    const {auth: {user}, canSave, savePending, setActiveSection, activeSection} = this.props;
     const SectionComponent = this.getSectionComponent(activeSection);
-    const {auth: {user}, canSave, savePending} = this.props;
 
     if (!can(user, 'UPDATE_CONFIG')) {
       return <p>You must be an administrator to access config settings. Please find the nearest Admin and ask them to level you up!</p>;
@@ -43,7 +34,7 @@ export default class Configure extends Component {
     return (
       <div className={styles.container}>
         <div className={styles.leftColumn}>
-          <List onChange={this.changeSection} activeItem={activeSection}>
+          <List onChange={setActiveSection} activeItem={activeSection}>
             <Item itemId='stream' icon='speaker_notes'>
               {t('configure.stream_settings')}
             </Item>
@@ -101,4 +92,6 @@ Configure.propTypes = {
   root: PropTypes.object.isRequired,
   settings: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
+  activeSection: PropTypes.string.isRequired,
 };

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

@@ -12,7 +12,7 @@ import {getErrorMessages, getDefinitionName} from 'coral-framework/utils';
 import StreamSettings from './StreamSettings';
 import TechSettings from './TechSettings';
 import ModerationSettings from './ModerationSettings';
-import {clearPending} from '../../../actions/configure';
+import {clearPending, setActiveSection} from '../../../actions/configure';
 
 import Configure from '../components/Configure';
 
@@ -43,6 +43,8 @@ class ConfigureContainer extends Component {
       settings={merged}
       canSave={this.props.canSave}
       savePending={this.savePending}
+      setActiveSection={this.props.setActiveSection}
+      activeSection={this.props.activeSection}
     />;
   }
 }
@@ -74,12 +76,14 @@ const mapStateToProps = (state) => ({
   auth: state.auth,
   pending: state.configure.pending,
   canSave: state.configure.canSave,
+  activeSection: state.configure.activeSection,
 });
 
 const mapDispatchToProps = (dispatch) =>
   bindActionCreators({
     notify,
     clearPending,
+    setActiveSection,
   }, dispatch);
 
 export default compose(
@@ -91,10 +95,12 @@ export default compose(
 ConfigureContainer.propTypes = {
   updateSettings: PropTypes.func.isRequired,
   clearPending: PropTypes.func.isRequired,
+  setActiveSection: PropTypes.func.isRequired,
   notify: PropTypes.func.isRequired,
   auth: PropTypes.object.isRequired,
   data: PropTypes.object.isRequired,
   root: PropTypes.object.isRequired,
   canSave: PropTypes.bool.isRequired,
   pending: PropTypes.object.isRequired,
+  activeSection: PropTypes.string.isRequired,
 };