Toggle a bit better.

synapse_topology/view/webui/js/components/AccordionToggle.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
+
+export default ({ active, children, eventKey, as }) => {
+  const decoratedOnClick = active ? useAccordionToggle(eventKey) : undefined;
+  const As = as;
+  return <As onClick={decoratedOnClick} > {children}</As>
+}

synapse_topology/view/webui/js/components/CompleteSetup.jsx

@@ -5,6 +5,7 @@ import Card from 'react-bootstrap/Card';
 
 import ReverseProxySampleConfig from '../containers/ReverseProxySampleConfig'
 import DelegationSampleConfig from '../containers/DelegationSampleConfig';
+import AccordionToggle from '../containers/AccordionToggle';
 
 import { TLS_TYPES, DELEGATION_TYPES } from '../actions/constants';
 import { COMPLETE_UI } from '../reducers/ui_constants';
@@ -52,9 +53,9 @@ export default ({
   }
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={COMPLETE_UI}>
+    <AccordionToggle as={Card.Header} eventKey={COMPLETE_UI}>
       Setup Complete
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={COMPLETE_UI}>
       {body}
     </Accordion.Collapse>

synapse_topology/view/webui/js/components/Database.jsx

@@ -8,6 +8,7 @@ import {
 } from '../actions/constants'
 
 import { DATABASE_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 export default ({
   onClick,
@@ -15,9 +16,9 @@ export default ({
   const defaultDatabase = DATABASE_TYPES.POSTGRES;
   const [database, setDatabase] = useState(defaultDatabase)
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={DATABASE_UI}>
+    <AccordionToggle as={Card.Header} eventKey={DATABASE_UI}>
       Database
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={DATABASE_UI}>
       <Card.Body>
         <p>Synapse can use either SQLite3 or Postgres as it's database.</p>

synapse_topology/view/webui/js/components/DelegationOptions.jsx

@@ -9,6 +9,7 @@ import Tab from 'react-bootstrap/Tab';
 
 import { DELEGATION_TYPES } from '../actions/constants';
 import { DELEGATION_OPTIONS_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 export default ({ servername, skip, onClick }) => {
   const defaultType = DELEGATION_TYPES.DNS;
@@ -39,12 +40,12 @@ export default ({ servername, skip, onClick }) => {
   }
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}>
+    <AccordionToggle as={Card.Header} eventKey={DELEGATION_OPTIONS_UI}>
       Delegation (optional)
       <button onClick={skip}>
         Skip
       </button>
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={DELEGATION_OPTIONS_UI}>
       <Card.Body>
         <p>

synapse_topology/view/webui/js/components/ExportKeys.jsx

@@ -7,6 +7,7 @@ import ButtonDisplay from './ButtonDisplay';
 import DownloadOrCopy from './DownloadOrCopy';
 
 import { KEY_EXPORT_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 
 export default ({ secret_key_loaded, secret_key, onClick }) => {
@@ -28,9 +29,9 @@ export default ({ secret_key_loaded, secret_key, onClick }) => {
   }
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={KEY_EXPORT_UI}>
+    <AccordionToggle as={Card.Header} eventKey={KEY_EXPORT_UI}>
       Secret Key
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={KEY_EXPORT_UI}>
       {body}
     </Accordion.Collapse>

synapse_topology/view/webui/js/components/PortSelection.jsx

@@ -5,6 +5,7 @@ import ContentWrapper from '../containers/ContentWrapper';
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
 import { PORT_SELECTION_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 export default ({
   servername,
@@ -50,9 +51,9 @@ export default ({
   }
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={PORT_SELECTION_UI}>
+    <AccordionToggle as={Card.Header} eventKey={PORT_SELECTION_UI}>
       {servername}'s ports
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={PORT_SELECTION_UI}>
       <Card.Body>
 

synapse_topology/view/webui/js/components/ServerName.jsx

@@ -3,6 +3,9 @@ import React, { useState } from 'react';
 import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
 import { SERVER_NAME_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle';
+import { next_ui } from '../reducers/setup-ui-reducer';
 
 export default ({ onClick }) => {
   const [servername, setServerName] = useState("");
@@ -11,10 +14,15 @@ export default ({ onClick }) => {
     setServerName(event.target.value);
   }
 
+  const decoratedOnClick = () => {
+    useAccordionToggle(SERVER_NAME_UI);
+    onClick(servername);
+  }
+
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={SERVER_NAME_UI}>
+    <AccordionToggle as={Card.Header} eventKey={SERVER_NAME_UI} >
       Name your server
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={SERVER_NAME_UI}>
       <Card.Body>
         <p>
@@ -27,7 +35,7 @@ export default ({ onClick }) => {
         </p>
         <input type="text" onChange={onChange} autoFocus placeholder="Enter server name"></input>
         <div>
-          <button disabled={servername ? undefined : true} onClick={() => onClick(servername)}>Next</button>
+          <button disabled={servername ? undefined : true} onClick={decoratedOnClick}>Next</button>
         </div>
       </Card.Body>
     </Accordion.Collapse>

synapse_topology/view/webui/js/components/StatsReporter.jsx

@@ -4,15 +4,16 @@ import Accordion from 'react-bootstrap/Accordion';
 import Card from 'react-bootstrap/Card';
 
 import { STATS_REPORT_UI } from '../reducers/ui_constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 
 export default ({ onClick }) => {
   const [consent, setConsent] = useState(true);
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={STATS_REPORT_UI}>
+    <AccordionToggle as={Card.Header} eventKey={STATS_REPORT_UI}>
       Anonymous Statistics
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={STATS_REPORT_UI}>
       <Card.Body>
         <p>

synapse_topology/view/webui/js/components/TLS.jsx

@@ -9,6 +9,7 @@ import Tab from 'react-bootstrap/Tab';
 
 import { TLS_UI } from '../reducers/ui_constants';
 import { TLS_TYPES, REVERSE_PROXY_TYPES } from '../actions/constants';
+import AccordionToggle from '../containers/AccordionToggle';
 
 const tlsLink = "https://en.wikipedia.org/wiki/Transport_Layer_Security";
 const apacheLink = "http://httpd.apache.org/";
@@ -31,9 +32,9 @@ export default ({ testingCertPaths, uploadingCerts, certPathInvalid, certKeyPath
   const [reverseProxy, setReverseProxy] = useState(defaultValue);
 
   return <Card>
-    <Accordion.Toggle as={Card.Header} eventKey={TLS_UI}>
+    <AccordionToggle as={Card.Header} eventKey={TLS_UI}>
       TLS
-    </Accordion.Toggle>
+    </AccordionToggle>
     <Accordion.Collapse eventKey={TLS_UI}>
       <Card.Body>
         <p>

synapse_topology/view/webui/js/components/UI.jsx

@@ -19,6 +19,7 @@ import {
   DELEGATION_TEMPLATE_UI,
   DATABASE_UI,
   COMPLETE_UI,
+  SETUP_ORDER,
 } from '../reducers/ui_constants';
 
 import Error from './Error';
@@ -85,7 +86,7 @@ export default ({ setup_ui, config_ui, base_config }) => {
   if (!base_config.setup_done) {
     console.log(setup_ui);
     return <Accordion defaultActiveKey="0">
-      {setup_ui.active_blocks.map(block_mapping)}
+      {SETUP_ORDER.map(block_mapping)}
     </Accordion >
   }
 }

synapse_topology/view/webui/js/containers/AccordionToggle.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import AccordionToggle from '../components/AccordionToggle';
+
+const mapStateToProps = (state, { eventKey, as, children }) => ({
+  active: state.setup_ui.active_blocks.includes(eventKey),
+  eventKey,
+  as,
+  children,
+});
+
+const mapDispathToProps = (dispatch) => ({
+});
+
+export default connect(
+  mapStateToProps,
+  mapDispathToProps
+)(AccordionToggle);

synapse_topology/view/webui/js/reducers/index.js

@@ -3,12 +3,12 @@ import base_config_reducer from './base-config-reducer';
 import config_ui_reducer from './config-ui-reducer';
 import setup_ui_reducer from './setup-ui-reducer';
 
-import { SETUP_INTRO_UI } from './ui_constants';
+import { SETUP_INTRO_UI, SERVER_NAME_UI } from './ui_constants';
 
 
 export default (state = {
   setup_ui: {
-    active_blocks: [SETUP_INTRO_UI],
+    active_blocks: [SETUP_INTRO_UI, SERVER_NAME_UI],
   },
   config_ui: {
   },

synapse_topology/view/webui/js/reducers/setup-ui-reducer.js

@@ -1,22 +1,13 @@
 import { ADVANCE_UI, BACK_UI, BASE_CONFIG_CHECKED } from '../actions/types';
-
+import useAccordionToggle from 'react-bootstrap/useAccordionToggle'
 import {
-  SETUP_INTRO_UI,
-  SERVER_NAME_UI,
-  STATS_REPORT_UI,
-  KEY_EXPORT_UI,
-  DELEGATION_OPTIONS_UI,
-  TLS_UI,
-  PORT_SELECTION_UI,
-  REVERSE_PROXY_TEMPLATE_UI,
-  DELEGATION_TEMPLATE_UI,
-  DATABASE_UI,
-  COMPLETE_UI,
+  SETUP_ORDER,
 } from './ui_constants';
 
-import {
-  DELEGATION_TYPES, TLS_TYPES
-} from '../actions/constants';
+
+const new_active_blocks = active_blocks => {
+  return SETUP_ORDER.slice(0, active_blocks.length + 1)
+}
 
 export default ({ setup_ui, base_config }, action) => {
   if (!base_config.base_config_checked) {
@@ -28,14 +19,7 @@ export default ({ setup_ui, base_config }, action) => {
   switch (action.type) {
     case ADVANCE_UI:
       return {
-        active_blocks: [
-          ...setup_ui.active_blocks,
-          forward_mapping(
-            setup_ui.active_blocks[setup_ui.active_blocks.length - 1],
-            action,
-            base_config,
-          ),
-        ]
+        active_blocks: new_active_blocks(setup_ui.active_blocks),
       }
     case BACK_UI:
     default:
@@ -43,34 +27,4 @@ export default ({ setup_ui, base_config }, action) => {
   }
 }
 
-const forward_mapping = (current_ui, action, base_config) => {
-  switch (current_ui) {
-    case SETUP_INTRO_UI:
-      return SERVER_NAME_UI;
-    case SERVER_NAME_UI:
-      return STATS_REPORT_UI;
-    case STATS_REPORT_UI:
-      return KEY_EXPORT_UI;
-    case KEY_EXPORT_UI:
-      return DELEGATION_OPTIONS_UI;
-    case DELEGATION_OPTIONS_UI:
-      return TLS_UI;
-    case TLS_UI:
-      return PORT_SELECTION_UI;
-    case PORT_SELECTION_UI:
-      return DATABASE_UI;
-    case DATABASE_UI:
-      return COMPLETE_UI;
-      return base_config.tls == TLS_TYPES.REVERSE_PROXY ?
-        REVERSE_PROXY_TEMPLATE_UI :
-        base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
-          DELEGATION_TEMPLATE_UI :
-          DATABASE_UI;
-    case REVERSE_PROXY_TEMPLATE_UI:
-      return base_config.delegation_type != DELEGATION_TYPES.LOCAL ?
-        DELEGATION_TEMPLATE_UI :
-        DATABASE_UI;
-    default:
-      return SETUP_INTRO_UI;
-  }
-}
+export const next_ui = current => SETUP_ORDER[SETUP_ORDER.lastIndexOf(current) + 1]

synapse_topology/view/webui/js/reducers/ui_constants.js

@@ -11,6 +11,20 @@ export const DELEGATION_TEMPLATE_UI = "delegation_tamplate_ui";
 export const DATABASE_UI = "database_ui";
 export const COMPLETE_UI = "complete_ui";
 
+// Setup order
+export const SETUP_ORDER = [
+  SETUP_INTRO_UI,
+  SERVER_NAME_UI,
+  STATS_REPORT_UI,
+  KEY_EXPORT_UI,
+  DELEGATION_OPTIONS_UI,
+  TLS_UI,
+  PORT_SELECTION_UI,
+  DATABASE_UI,
+  COMPLETE_UI
+];
+
+
 // Config
 export const CONFIG_SELECTION_UI = "config_selection_ui";
 
@@ -18,4 +32,4 @@ export const CONFIG_SELECTION_UI = "config_selection_ui";
 export const LOADING_UI = "loading_ui";
 
 // Error screen:
-export const ERROR_UI = "error_ui";
+export const ERROR_UI = "error_ui";