Move wifi routing

interface/src/AppRouting.js

@@ -8,13 +8,13 @@ import AuthenticationWrapper from './authentication/AuthenticationWrapper';
 import AuthenticatedRoute from './authentication/AuthenticatedRoute';
 import UnauthenticatedRoute from './authentication/UnauthenticatedRoute';
 
-// containers
-import WiFiConfiguration from './containers/WiFiConfiguration';
 import NTPConfiguration from './containers/NTPConfiguration';
 import OTAConfiguration from './containers/OTAConfiguration';
 import APConfiguration from './containers/APConfiguration';
 import SignInPage from './containers/SignInPage';
-import Security from './containers/Security';
+
+import Security from './sections/Security';
+import WiFiConnection from './sections/WiFiConnection';
 
 class AppRouting extends Component {
 
@@ -27,7 +27,7 @@ class AppRouting extends Component {
       <AuthenticationWrapper>
         <Switch>
           <UnauthenticatedRoute exact path="/" component={SignInPage} />
-          <AuthenticatedRoute exact path="/wifi-configuration" component={WiFiConfiguration} />
+          <AuthenticatedRoute exact path="/wifi/*" component={WiFiConnection} />
           <AuthenticatedRoute exact path="/ap-configuration" component={APConfiguration} />
           <AuthenticatedRoute exact path="/ntp-configuration" component={NTPConfiguration} />
           <AuthenticatedRoute exact path="/ota-configuration" component={OTAConfiguration} />

interface/src/authentication/Authentication.js

@@ -21,7 +21,7 @@ export function fetchLoginRedirect() {
   const loginSearch = localStorage.getItem(LOGIN_SEARCH);
   clearLoginRedirect();
   return {
-    pathname: loginPathname || "/wifi-configuration",
+    pathname: loginPathname || "/wifi/",
     search: (loginPathname && loginSearch) || undefined
   };
 }

interface/src/components/MenuAppBar.js

@@ -113,7 +113,7 @@ class MenuAppBar extends React.Component {
         </Toolbar>
         <Divider />
         <List>
-          <ListItem button component={Link} to='/wifi-configuration'>
+          <ListItem button component={Link} to='/wifi/'>
             <ListItemIcon>
               <WifiIcon />
             </ListItemIcon>

interface/src/containers/WiFiConfiguration.js

@@ -1,54 +0,0 @@
-import React, { Component } from 'react';
-
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-
-import MenuAppBar from '../components/MenuAppBar';
-import WiFiNetworkScanner from './WiFiNetworkScanner';
-import WiFiSettings from './WiFiSettings';
-import WiFiStatus from './WiFiStatus';
-
-class WiFiConfiguration extends Component {
-
-  constructor(props) {
-    super(props);
-    this.state = {
-        selectedTab: "wifiStatus",
-        selectedNetwork: null
-    };
-    this.selectNetwork = this.selectNetwork.bind(this);
-    this.deselectNetwork = this.deselectNetwork.bind(this);
-  }
-
-  // TODO - slightly inapproperate use of callback ref possibly.
-  selectNetwork(network) {
-    this.setState({ selectedTab: "wifiSettings", selectedNetwork:network });
-  }
-
-  // deselects the network after the settings component mounts.
-  deselectNetwork(network) {
-    this.setState({ selectedNetwork:null });
-  }
-
-  handleTabChange = (event, selectedTab) => {
-    this.setState({ selectedTab });
-  };
-
-  render() {
-    const { selectedTab } = this.state;
-    return (
-      <MenuAppBar sectionTitle="WiFi Configuration">
-        <Tabs value={selectedTab} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
-           <Tab value="wifiStatus" label="WiFi Status" />
-           <Tab value="networkScanner" label="Network Scanner" />
-           <Tab value="wifiSettings" label="WiFi Settings" />
-         </Tabs>
-         {selectedTab === "wifiStatus" && <WiFiStatus />}
-         {selectedTab === "networkScanner" && <WiFiNetworkScanner selectNetwork={this.selectNetwork} />}
-         {selectedTab === "wifiSettings" && <WiFiSettings deselectNetwork={this.deselectNetwork} selectedNetwork={this.state.selectedNetwork} />}
-      </MenuAppBar>
-    )
-  }
-}
-
-export default WiFiConfiguration;

interface/src/containers/Security.js → interface/src/sections/Security.js

@@ -6,8 +6,8 @@ import Tab from '@material-ui/core/Tab';
 
 import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
 import MenuAppBar from '../components/MenuAppBar';
-import ManageUsers from './ManageUsers';
-import SecuritySettings from './SecuritySettings';
+import ManageUsers from '../containers/ManageUsers';
+import SecuritySettings from '../containers/SecuritySettings';
 
 class Security extends Component {
 

interface/src/sections/WiFiConnection.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import { Redirect, Switch } from 'react-router-dom'
+
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+
+import AuthenticatedRoute from '../authentication/AuthenticatedRoute';
+import MenuAppBar from '../components/MenuAppBar';
+import WiFiNetworkScanner from '../containers/WiFiNetworkScanner';
+import WiFiSettings from '../containers/WiFiSettings';
+import WiFiStatus from '../containers/WiFiStatus';
+
+class WiFiConnection extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      selectedNetwork: null
+    };
+    this.selectNetwork = this.selectNetwork.bind(this);
+    this.deselectNetwork = this.deselectNetwork.bind(this);
+  }
+
+  selectNetwork(network) {
+    this.setState({ selectedNetwork: network });
+    this.props.history.push('/wifi/settings');
+  }
+
+  deselectNetwork(network) {
+    this.setState({ selectedNetwork: null });
+  }
+
+  handleTabChange = (event, path) => {
+    this.props.history.push(path);
+  };
+
+  render() {
+    const ConfiguredWiFiNetworkScanner = (props) => {
+      return (
+        <WiFiNetworkScanner
+          selectNetwork={this.selectNetwork}
+          {...props}
+        />
+      );
+    };
+    const ConfiguredWiFiSettings = (props) => {
+      return (
+        <WiFiSettings
+          deselectNetwork={this.deselectNetwork} selectedNetwork={this.state.selectedNetwork}
+          {...props}
+        />
+      );
+    };
+    return (
+      <MenuAppBar sectionTitle="WiFi Connection">
+        <Tabs value={this.props.match.url} onChange={this.handleTabChange} indicatorColor="primary" textColor="primary" variant="fullWidth">
+          <Tab value="/wifi/status" label="WiFi Status" />
+          <Tab value="/wifi/scan" label="Scan Networks" />
+          <Tab value="/wifi/settings" label="WiFi Settings" />
+        </Tabs>
+        <Switch>
+          <AuthenticatedRoute exact={true} path="/wifi/status" component={WiFiStatus} />
+          <AuthenticatedRoute exact={true} path="/wifi/scan" component={ConfiguredWiFiNetworkScanner} />
+          <AuthenticatedRoute exact={true} path="/wifi/settings" component={ConfiguredWiFiSettings} />
+          <Redirect to="/wifi/status" />
+        </Switch>
+      </MenuAppBar>
+    )
+  }
+}
+
+export default WiFiConnection;