reduce use of ternaries in form code

interface/src/components/RestComponent.js

@@ -52,10 +52,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
           })
           .then(json => { this.setState({ data: json, fetched: true }) })
           .catch(error => {
-            this.props.enqueueSnackbar("Problem fetching: " + error.message, {
+            const errorMessage = error.message || "Unknown error";
+            this.props.enqueueSnackbar("Problem fetching: " + errorMessage, {
               variant: 'error',
             });
-            this.setState({ data: null, fetched: true, errorMessage: error.message });
+            this.setState({ data: null, fetched: true, errorMessage  });
           });
       }
 
@@ -80,10 +81,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
             });
             this.setState({ data: json, fetched: true });
           }).catch(error => {
-            this.props.enqueueSnackbar("Problem saving: " + error.message, {
+            const errorMessage = error.message || "Unknown error";
+            this.props.enqueueSnackbar("Problem saving: " + errorMessage, {
               variant: 'error',
             });
-            this.setState({ data: null, fetched: true, errorMessage: error.message });
+            this.setState({ data: null, fetched: true, errorMessage  });
           });
       }
 

interface/src/containers/APSettings.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import { AP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 import APSettingsForm from '../forms/APSettingsForm';
 
@@ -12,17 +13,20 @@ class APSettings extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage } = this.props;
+    const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
     return (
       <SectionContent title="AP Settings">
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <APSettingsForm
             apSettings={data}
-          apSettingsFetched={fetched}
+            onSubmit={saveData}
-          errorMessage={errorMessage}
+            onReset={loadData}
-          onSubmit={this.props.saveData}
+            handleValueChange={handleValueChange}
-          onReset={this.props.loadData}
-          handleValueChange={this.props.handleValueChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/APStatus.js

@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -15,6 +13,7 @@ import DeviceHubIcon from '@material-ui/icons/DeviceHub';
 import ComputerIcon from '@material-ui/icons/Computer';
 
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent'
 
 import * as Highlight from '../constants/Highlight';
@@ -27,10 +26,6 @@ const styles = theme => ({
   ["apStatus_" + Highlight.IDLE]: {
     backgroundColor: theme.palette.highlight_idle
   },
-  fetching: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   button: {
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
@@ -106,30 +101,15 @@ class APStatus extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage, classes } = this.props;
+    const { fetched, errorMessage, data, loadData, classes } = this.props;
-
     return (
       <SectionContent title="AP Status">
-        {
+        <LoadingNotification
-          !fetched ?
+          onReset={loadData}
-            <div>
+          fetched={fetched}
-              <LinearProgress className={classes.fetching} />
+          errorMessage={errorMessage}>
-              <Typography variant="h4" className={classes.fetching}>
+          {this.renderAPStatus(data, classes)}
-                Loading...
+        </LoadingNotification>
-              </Typography>
-            </div>
-            :
-            data ? this.renderAPStatus(data, classes)
-              :
-              <div>
-                <Typography variant="h4" className={classes.fetching}>
-                  {errorMessage}
-                </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
-                  Refresh
-                </Button>
-              </div>
-        }
       </SectionContent>
     )
   }

interface/src/containers/ManageUsers.js

@@ -2,8 +2,9 @@ import React, { Component } from 'react';
 
 import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
-import ManageUsersForm from '../forms/ManageUsersForm';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
+import ManageUsersForm from '../forms/ManageUsersForm';
 
 class ManageUsers extends Component {
 
@@ -12,18 +13,21 @@ class ManageUsers extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage } = this.props;
+    const { fetched, errorMessage, data, saveData, loadData, setData, handleValueChange } = this.props;
     return (
       <SectionContent title="Manage Users" titleGutter>
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <ManageUsersForm
             userData={data}
-          userDataFetched={fetched}
+            onSubmit={saveData}
-          errorMessage={errorMessage}
+            onReset={loadData}
-          onSubmit={this.props.saveData}
+            setData={setData}
-          onReset={this.props.loadData}
+            handleValueChange={handleValueChange}
-          setData={this.props.setData}
-          handleValueChange={this.props.handleValueChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/NTPSettings.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 
 import { NTP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
-import {restComponent} from '../components/RestComponent';
+import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 import NTPSettingsForm from '../forms/NTPSettingsForm';
 
@@ -12,17 +13,20 @@ class NTPSettings extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage } = this.props;
+    const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
     return (
       <SectionContent title="NTP Settings">
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <NTPSettingsForm
             ntpSettings={data}
-          ntpSettingsFetched={fetched}
+            onSubmit={saveData}
-          errorMessage={errorMessage}
+            onReset={loadData}
-          onSubmit={this.props.saveData}
+            handleValueChange={handleValueChange}
-          onReset={this.props.loadData}
-          handleValueChange={this.props.handleValueChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/NTPStatus.js

@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -22,6 +20,7 @@ import * as Highlight from '../constants/Highlight';
 import { unixTimeToTimeAndDate } from '../constants/TimeFormat';
 import { NTP_STATUS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 
 import moment from 'moment';
@@ -36,10 +35,6 @@ const styles = theme => ({
   ["ntpStatus_" + Highlight.WARN]: {
     backgroundColor: theme.palette.highlight_warn
   },
-  fetching: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   button: {
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
@@ -131,32 +126,17 @@ class NTPStatus extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage, classes } = this.props;
+    const { data, fetched, errorMessage, loadData, classes } = this.props;
-
     return (
       <SectionContent title="NTP Status">
-        {
+        <LoadingNotification
-          !fetched ?
+          onReset={loadData}
-            <div>
+          fetched={fetched}
-              <LinearProgress className={classes.fetching} />
+          errorMessage={errorMessage}>
-              <Typography variant="h4" className={classes.fetching}>
+          {this.renderNTPStatus(data, classes)}
-                Loading...
+        </LoadingNotification>
-              </Typography>
-            </div>
-            :
-            data ? this.renderNTPStatus(data, classes)
-              :
-              <div>
-                <Typography variant="h4" className={classes.fetching}>
-                  {errorMessage}
-                </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
-                  Refresh
-                </Button>
-              </div>
-        }
       </SectionContent>
-    )
+    );
   }
 }
 

interface/src/containers/OTASettings.js

@@ -1,7 +1,8 @@
 import React, { Component } from 'react';
 
 import { OTA_SETTINGS_ENDPOINT } from '../constants/Endpoints';
-import {restComponent} from '../components/RestComponent';
+import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 import OTASettingsForm from '../forms/OTASettingsForm';
 
@@ -12,18 +13,21 @@ class OTASettings extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage } = this.props;
+    const { fetched, errorMessage, data, saveData, loadData, handleValueChange, handleCheckboxChange } = this.props;
     return (
       <SectionContent title="OTA Settings">
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <OTASettingsForm
             otaSettings={data}
-          otaSettingsFetched={fetched}
+            onSubmit={saveData}
-          errorMessage={errorMessage}
+            onReset={loadData}
-          onSubmit={this.props.saveData}
+            handleValueChange={handleValueChange}
-          onReset={this.props.loadData}
+            handleCheckboxChange={handleCheckboxChange}
-          handleValueChange={this.props.handleValueChange}
-          handleCheckboxChange={this.props.handleCheckboxChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/SecuritySettings.js

@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SecuritySettingsForm from '../forms/SecuritySettingsForm';
 import SectionContent from '../components/SectionContent';
 
@@ -15,14 +16,17 @@ class SecuritySettings extends Component {
     const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
     return (
       <SectionContent title="Security Settings">
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <SecuritySettingsForm
             securitySettings={data}
-          securitySettingsFetched={fetched}
-          errorMessage={errorMessage}
             onSubmit={saveData}
             onReset={loadData}
             handleValueChange={handleValueChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/SystemStatus.js

@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -16,16 +14,12 @@ import ShowChartIcon from '@material-ui/icons/ShowChart';
 import SdStorageIcon from '@material-ui/icons/SdStorage';
 import DataUsageIcon from '@material-ui/icons/DataUsage';
 
-
 import { SYSTEM_STATUS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 
 const styles = theme => ({
-  fetching: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   button: {
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
@@ -104,29 +98,15 @@ class SystemStatus extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage, classes } = this.props;
+    const { data, fetched, errorMessage, loadData, classes } = this.props;
     return (
       <SectionContent title="System Status">
-        {
+        <LoadingNotification
-          !fetched ?
+          onReset={loadData}
-            <div>
+          fetched={fetched}
-              <LinearProgress className={classes.fetching} />
+          errorMessage={errorMessage}>
-              <Typography variant="h4" className={classes.fetching}>
+          {this.renderNTPStatus(data, classes)}
-                Loading...
+        </LoadingNotification>
-              </Typography>
-            </div>
-            :
-            data ? this.renderNTPStatus(data, classes)
-              :
-              <div>
-                <Typography variant="h4" className={classes.fetching}>
-                  {errorMessage}
-                </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
-                  Refresh
-                </Button>
-              </div>
-        }
       </SectionContent>
     )
   }

interface/src/containers/WiFiNetworkScanner.js

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import { withSnackbar } from 'notistack';
 
 import { SCAN_NETWORKS_ENDPOINT, LIST_NETWORKS_ENDPOINT } from '../constants/Endpoints';
 import SectionContent from '../components/SectionContent';
 import WiFiNetworkSelector from '../forms/WiFiNetworkSelector';
-import { withSnackbar } from 'notistack';
 import { redirectingAuthorizedFetch } from '../authentication/Authentication';
 
 const NUM_POLLS = 10

interface/src/containers/WiFiSettings.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import { WIFI_SETTINGS_ENDPOINT } from '../constants/Endpoints';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 import SectionContent from '../components/SectionContent';
 import WiFiSettingsForm from '../forms/WiFiSettingsForm';
 
@@ -18,10 +19,10 @@ class WiFiSettings extends Component {
     const { selectedNetwork } = this.props;
     if (selectedNetwork) {
       var wifiSettings = {
-        ssid:selectedNetwork.ssid,
+        ssid: selectedNetwork.ssid,
-        password:"",
+        password: "",
-        hostname:"esp8266-react",
+        hostname: "esp8266-react",
-        static_ip_config:false,
+        static_ip_config: false,
       }
       this.props.setData(wifiSettings);
     } else {
@@ -35,20 +36,23 @@ class WiFiSettings extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage, selectedNetwork } = this.props;
+    const { data, fetched, errorMessage, saveData, loadData, handleValueChange, handleCheckboxChange, selectedNetwork, deselectNetwork } = this.props;
     return (
       <SectionContent title="WiFi Settings">
+        <LoadingNotification
+          onReset={loadData}
+          fetched={fetched}
+          errorMessage={errorMessage}>
           <WiFiSettingsForm
             wifiSettings={data}
-          wifiSettingsFetched={fetched}
-          errorMessage={errorMessage}
             selectedNetwork={selectedNetwork}
-          deselectNetwork={this.props.deselectNetwork}
+            deselectNetwork={deselectNetwork}
-          onSubmit={this.props.saveData}
+            onSubmit={saveData}
             onReset={this.deselectNetworkAndLoadData}
-          handleValueChange={this.props.handleValueChange}
+            handleValueChange={handleValueChange}
-          handleCheckboxChange={this.props.handleCheckboxChange}
+            handleCheckboxChange={handleCheckboxChange}
           />
+        </LoadingNotification>
       </SectionContent>
     )
   }

interface/src/containers/WiFiStatus.js

@@ -2,14 +2,10 @@ import React, { Component, Fragment } from 'react';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
-
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
 import ListItemAvatar from '@material-ui/core/ListItemAvatar';
-
 import Avatar from '@material-ui/core/Avatar';
 import Divider from '@material-ui/core/Divider';
 import WifiIcon from '@material-ui/icons/Wifi';
@@ -23,6 +19,7 @@ import { WIFI_STATUS_ENDPOINT } from '../constants/Endpoints';
 import { isConnected, connectionStatus, connectionStatusHighlight } from '../constants/WiFiConnectionStatus';
 import * as Highlight from '../constants/Highlight';
 import { restComponent } from '../components/RestComponent';
+import LoadingNotification from '../components/LoadingNotification';
 
 const styles = theme => ({
   ["wifiStatus_" + Highlight.IDLE]: {
@@ -37,10 +34,6 @@ const styles = theme => ({
   ["wifiStatus_" + Highlight.WARN]: {
     backgroundColor: theme.palette.highlight_warn
   },
-  fetching: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   button: {
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
@@ -145,32 +138,19 @@ class WiFiStatus extends Component {
   }
 
   render() {
-    const { data, fetched, errorMessage, classes } = this.props;
+    const { data, fetched, errorMessage, loadData, classes } = this.props;
     return (
       <SectionContent title="WiFi Status">
-        {
+        <LoadingNotification
-          !fetched ?
+          onReset={loadData}
-            <div>
+          fetched={fetched}
-              <LinearProgress className={classes.fetching} />
+          errorMessage={errorMessage}>
-              <Typography variant="h4" className={classes.fetching}>
+          {this.renderWiFiStatus(data, classes)}
-                Loading...
+        </LoadingNotification>
-           </Typography>
-            </div>
-            :
-            data ? this.renderWiFiStatus(data, classes)
-              :
-              <div>
-                <Typography variant="h4" className={classes.fetching}>
-                  {errorMessage}
-                </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
-                  Refresh
-          </Button>
-              </div>
-        }
       </SectionContent>
-    )
+    );
   }
+
 }
 
 export default restComponent(WIFI_STATUS_ENDPOINT, withStyles(styles)(WiFiStatus));

interface/src/forms/APSettingsForm.js

@@ -1,29 +1,19 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
+
+import { isAPEnabled } from '../constants/WiFiAPModes';
+import PasswordValidator from '../components/PasswordValidator';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import Typography from '@material-ui/core/Typography';
 import MenuItem from '@material-ui/core/MenuItem';
 
-import { TextValidator, ValidatorForm, SelectValidator } from 'react-material-ui-form-validator';
-
-import {isAPEnabled} from '../constants/WiFiAPModes';
-import PasswordValidator from '../components/PasswordValidator';
-
 const styles = theme => ({
-  loadingSettings: {
-    margin: theme.spacing(0.5),
-  },
-  loadingSettingsDetails: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   textField: {
     width: "100%"
   },
-  selectField:{
+  selectField: {
     width: "100%",
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(0.5)
@@ -37,30 +27,15 @@ const styles = theme => ({
 class APSettingsForm extends React.Component {
 
   render() {
-    const { classes, apSettingsFetched, apSettings, errorMessage, handleValueChange, onSubmit, onReset } = this.props;
+    const { classes, apSettings, handleValueChange, onSubmit, onReset } = this.props;
     return (
-      <div>
-        {
-         !apSettingsFetched ?
-
-         <div className={classes.loadingSettings}>
-           <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="h4" className={classes.loadingSettingsDetails}>
-             Loading...
-           </Typography>
-         </div>
-
-         : apSettings ?
-
       <ValidatorForm onSubmit={onSubmit} ref="APSettingsForm">
-
         <SelectValidator name="provision_mode" label="Provide Access Point..." value={apSettings.provision_mode} className={classes.selectField}
           onChange={handleValueChange('provision_mode')}>
           <MenuItem value={0}>Always</MenuItem>
           <MenuItem value={1}>When WiFi Disconnected</MenuItem>
           <MenuItem value={2}>Never</MenuItem>
         </SelectValidator>
-
         {
           isAPEnabled(apSettings.provision_mode) &&
           <Fragment>
@@ -86,37 +61,20 @@ class APSettingsForm extends React.Component {
             />
           </Fragment>
         }
-
         <Button variant="contained" color="primary" className={classes.button} type="submit">
           Save
         </Button>
         <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
           Reset
         </Button>
-
       </ValidatorForm>
-
-        :
-
-        <div className={classes.loadingSettings}>
-          <Typography variant="h4" className={classes.loadingSettingsDetails}>
-            {errorMessage}
-          </Typography>
-          <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-      		  Reset
-      		</Button>
-        </div>
-      }
-      </div>
     );
   }
 }
 
 APSettingsForm.propTypes = {
   classes: PropTypes.object.isRequired,
-  apSettingsFetched: PropTypes.bool.isRequired,
   apSettings: PropTypes.object,
-  errorMessage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   handleValueChange: PropTypes.func.isRequired

interface/src/forms/ManageUsersForm.js

@@ -5,7 +5,6 @@ import { ValidatorForm } from 'react-material-ui-form-validator';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import Typography from '@material-ui/core/Typography';
 import Table from '@material-ui/core/Table';
 import TableBody from '@material-ui/core/TableBody';
@@ -14,7 +13,6 @@ import TableFooter from '@material-ui/core/TableFooter';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import Box from '@material-ui/core/Box';
-
 import EditIcon from '@material-ui/icons/Edit';
 import DeleteIcon from '@material-ui/icons/Delete';
 import CloseIcon from '@material-ui/icons/Close';
@@ -25,22 +23,12 @@ import UserForm from './UserForm';
 import { withAuthenticationContext } from '../authentication/Context';
 
 const styles = theme => ({
-  loadingSettings: {
-    margin: theme.spacing(0.5),
-  },
-  loadingSettingsDetails: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   button: {
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
   },
   table: {
     '& td, & th': { padding: theme.spacing(0.5) }
-  },
-  actions: {
-    whiteSpace: "nowrap"
   }
 });
 
@@ -134,18 +122,9 @@ class ManageUsersForm extends React.Component {
   }
 
   render() {
-    const { classes, userData, userDataFetched, errorMessage, onReset } = this.props;
+    const { classes, userData, onReset } = this.props;
     const { user, creating } = this.state;
     return (
-      !userDataFetched ?
-        <div className={classes.loadingSettings}>
-          <LinearProgress className={classes.loadingSettingsDetails} />
-          <Typography variant="h4" className={classes.loadingSettingsDetails}>
-            Loading...
-          </Typography>
-        </div>
-        :
-        userData ?
       <Fragment>
         <ValidatorForm onSubmit={this.onSubmit}>
           <Table className={classes.table}>
@@ -217,15 +196,6 @@ class ManageUsersForm extends React.Component {
           />
         }
       </Fragment>
-          :
-          <div className={classes.loadingSettings}>
-            <Typography variant="h4" className={classes.loadingSettingsDetails}>
-              {errorMessage}
-            </Typography>
-            <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-              Reset
-      		  </Button>
-          </div>
     );
   }
 
@@ -234,8 +204,6 @@ class ManageUsersForm extends React.Component {
 ManageUsersForm.propTypes = {
   classes: PropTypes.object.isRequired,
   userData: PropTypes.object,
-  userDataFetched: PropTypes.bool.isRequired,
-  errorMessage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   setData: PropTypes.func.isRequired,

interface/src/forms/NTPSettingsForm.js

@@ -1,24 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
-import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
-import Typography from '@material-ui/core/Typography';
 
 import isIP from '../validators/isIP';
 import isHostname from '../validators/isHostname';
 import or from '../validators/or';
 
 const styles = theme => ({
-  loadingSettings: {
-    margin: theme.spacing(0.5),
-  },
-  loadingSettingsDetails: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   textField: {
     width: "100%"
   },
@@ -35,23 +26,9 @@ class NTPSettingsForm extends React.Component {
   }
 
   render() {
-    const { classes, ntpSettingsFetched, ntpSettings, errorMessage, handleValueChange, onSubmit, onReset } = this.props;
+    const { classes, ntpSettings, handleValueChange, onSubmit, onReset } = this.props;
     return (
-      <div>
-        {
-         !ntpSettingsFetched ?
-
-         <div className={classes.loadingSettings}>
-           <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="h4" className={classes.loadingSettingsDetails}>
-             Loading...
-           </Typography>
-         </div>
-
-         : ntpSettings ?
-
       <ValidatorForm onSubmit={onSubmit}>
-
         <TextValidator
           validators={['required', 'isIPOrHostname']}
           errorMessages={['Server is required', "Not a valid IP address or hostname"]}
@@ -62,10 +39,9 @@ class NTPSettingsForm extends React.Component {
           onChange={handleValueChange('server')}
           margin="normal"
         />
-
         <TextValidator
-                 validators={['required','isNumber','minNumber:60','maxNumber:86400']}
+          validators={['required', 'isNumber', 'minNumber:60', 'maxNumber:86400']}
-                 errorMessages={['Interval is required','Interval must be a number','Must be at least 60 seconds',"Must not be more than 86400 seconds (24 hours)"]}
+          errorMessages={['Interval is required', 'Interval must be a number', 'Must be at least 60 seconds', "Must not be more than 86400 seconds (24 hours)"]}
           name="interval"
           label="Interval (Seconds)"
           className={classes.textField}
@@ -74,37 +50,20 @@ class NTPSettingsForm extends React.Component {
           onChange={handleValueChange('interval')}
           margin="normal"
         />
-
         <Button variant="contained" color="primary" className={classes.button} type="submit">
           Save
         </Button>
         <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
           Reset
         </Button>
-
       </ValidatorForm>
-
-        :
-
-        <div className={classes.loadingSettings}>
-          <Typography variant="h4" className={classes.loadingSettingsDetails}>
-            {errorMessage}
-          </Typography>
-          <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-      		  Reset
-      		</Button>
-        </div>
-      }
-      </div>
     );
   }
 }
 
 NTPSettingsForm.propTypes = {
   classes: PropTypes.object.isRequired,
-  ntpSettingsFetched: PropTypes.bool.isRequired,
   ntpSettings: PropTypes.object,
-  errorMessage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   handleValueChange: PropTypes.func.isRequired,

interface/src/forms/OTASettingsForm.js

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import Switch from '@material-ui/core/Switch';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
-import Typography from '@material-ui/core/Typography';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 
 import isIP from '../validators/isIP';
@@ -15,13 +13,6 @@ import or from '../validators/or';
 import PasswordValidator from '../components/PasswordValidator';
 
 const styles = theme => ({
-  loadingSettings: {
-    margin: theme.spacing(0.5),
-  },
-  loadingSettingsDetails: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   switchControl: {
     width: "100%",
     marginTop: theme.spacing(2),
@@ -43,23 +34,9 @@ class OTASettingsForm extends React.Component {
   }
 
   render() {
-    const { classes, otaSettingsFetched, otaSettings, errorMessage, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
+    const { classes, otaSettings, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
     return (
-      <div>
-        {
-         !otaSettingsFetched ?
-
-         <div className={classes.loadingSettings}>
-           <LinearProgress className={classes.loadingSettingsDetails}/>
-           <Typography variant="h4" className={classes.loadingSettingsDetails}>
-             Loading...
-           </Typography>
-         </div>
-
-         : otaSettings ?
-
       <ValidatorForm onSubmit={onSubmit}>
-
         <FormControlLabel className={classes.switchControl}
           control={
             <Switch
@@ -71,7 +48,6 @@ class OTASettingsForm extends React.Component {
           }
           label="Enable OTA Updates?"
         />
-
         <TextValidator
           validators={['required', 'isNumber', 'minNumber:1025', 'maxNumber:65535']}
           errorMessages={['Port is required', "Must be a number", "Must be greater than 1024 ", "Max value is 65535"]}
@@ -83,7 +59,6 @@ class OTASettingsForm extends React.Component {
           onChange={handleValueChange('port')}
           margin="normal"
         />
-
         <PasswordValidator
           validators={['required', 'matchRegexp:^.{1,64}$']}
           errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
@@ -94,37 +69,20 @@ class OTASettingsForm extends React.Component {
           onChange={handleValueChange('password')}
           margin="normal"
         />
-
         <Button variant="contained" color="primary" className={classes.button} type="submit">
           Save
         </Button>
         <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
           Reset
         </Button>
-
       </ValidatorForm>
-
-        :
-
-        <div className={classes.loadingSettings}>
-          <Typography variant="h4" className={classes.loadingSettingsDetails}>
-            {errorMessage}
-          </Typography>
-          <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-      		  Reset
-      		</Button>
-        </div>
-      }
-      </div>
     );
   }
 }
 
 OTASettingsForm.propTypes = {
   classes: PropTypes.object.isRequired,
-  otaSettingsFetched: PropTypes.bool.isRequired,
   otaSettings: PropTypes.object,
-  errorMessage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   handleValueChange: PropTypes.func.isRequired,

interface/src/forms/SecuritySettingsForm.js

@@ -4,7 +4,6 @@ import { ValidatorForm } from 'react-material-ui-form-validator';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import Typography from '@material-ui/core/Typography';
 import Box from '@material-ui/core/Box';
 
@@ -12,13 +11,6 @@ import PasswordValidator from '../components/PasswordValidator';
 import { withAuthenticationContext } from '../authentication/Context';
 
 const styles = theme => ({
-  loadingSettings: {
-    margin: theme.spacing(0.5),
-  },
-  loadingSettingsDetails: {
-    margin: theme.spacing(4),
-    textAlign: "center"
-  },
   textField: {
     width: "100%"
   },
@@ -36,17 +28,8 @@ class SecuritySettingsForm extends React.Component {
   }
 
   render() {
-    const { classes, securitySettingsFetched, securitySettings, errorMessage, handleValueChange, onReset } = this.props;
+    const { classes, securitySettings, handleValueChange, onReset } = this.props;
     return (
-      !securitySettingsFetched ?
-        <div className={classes.loadingSettings}>
-          <LinearProgress className={classes.loadingSettingsDetails} />
-          <Typography variant="h4" className={classes.loadingSettingsDetails}>
-            Loading...
-          </Typography>
-        </div>
-        :
-        securitySettings ?
       <ValidatorForm onSubmit={this.onSubmit} ref="SecuritySettingsForm">
         <PasswordValidator
           validators={['required', 'matchRegexp:^.{1,64}$']}
@@ -70,24 +53,13 @@ class SecuritySettingsForm extends React.Component {
           Reset
       	</Button>
       </ValidatorForm>
-          :
-          <div className={classes.loadingSettings}>
-            <Typography variant="h4" className={classes.loadingSettingsDetails}>
-              {errorMessage}
-            </Typography>
-            <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-              Reset
-      		  </Button>
-          </div>
     );
   }
 }
 
 SecuritySettingsForm.propTypes = {
   classes: PropTypes.object.isRequired,
-  securitySettingsFetched: PropTypes.bool.isRequired,
   securitySettings: PropTypes.object,
-  errorMessage: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onReset: PropTypes.func.isRequired,
   handleValueChange: PropTypes.func.isRequired,

interface/src/forms/WiFiSettingsForm.js

@@ -3,10 +3,8 @@ import PropTypes from 'prop-types';
 
 import { withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Typography from '@material-ui/core/Typography';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemText from '@material-ui/core/ListItemText';
@@ -80,21 +78,8 @@ class WiFiSettingsForm extends React.Component {
   }
 
   render() {
-    const { classes, wifiSettingsFetched, wifiSettings, errorMessage, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
+    const { classes, wifiSettings, selectedNetwork, handleValueChange, handleCheckboxChange, onSubmit, onReset } = this.props;
     return (
-      <div>
-        {
-          !wifiSettingsFetched ?
-
-            <div className={classes.loadingSettings}>
-              <LinearProgress className={classes.loadingSettingsDetails} />
-              <Typography variant="h4" className={classes.loadingSettingsDetails}>
-                Loading...
-              </Typography>
-            </div>
-
-            : wifiSettings ?
-
       <ValidatorForm onSubmit={onSubmit} ref="WiFiSettingsForm">
         {
           selectedNetwork ? this.renderSelectedNetwork() :
@@ -122,7 +107,6 @@ class WiFiSettingsForm extends React.Component {
             margin="normal"
           />
         }
-
         <TextValidator
           validators={['required', 'isHostname']}
           errorMessages={['Hostname is required', "Not a valid hostname"]}
@@ -133,7 +117,6 @@ class WiFiSettingsForm extends React.Component {
           onChange={handleValueChange('hostname')}
           margin="normal"
         />
-
         <FormControlLabel className={classes.checkboxControl}
           control={
             <Checkbox
@@ -144,7 +127,6 @@ class WiFiSettingsForm extends React.Component {
           }
           label="Static IP Config?"
         />
-
         {
           wifiSettings.static_ip_config &&
           <Fragment>
@@ -200,37 +182,20 @@ class WiFiSettingsForm extends React.Component {
             />
           </Fragment>
         }
-
         <Button variant="contained" color="primary" className={classes.button} type="submit">
           Save
         </Button>
         <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
           Reset
         </Button>
-
       </ValidatorForm>
-
-              :
-
-              <div className={classes.loadingSettings}>
-                <Typography variant="h4" className={classes.loadingSettingsDetails}>
-                  {errorMessage}
-                </Typography>
-                <Button variant="contained" color="secondary" className={classes.button} onClick={onReset}>
-                  Reset
-      		</Button>
-              </div>
-        }
-      </div>
     );
   }
 }
 
 WiFiSettingsForm.propTypes = {
   classes: PropTypes.object.isRequired,
-  wifiSettingsFetched: PropTypes.bool.isRequired,
   wifiSettings: PropTypes.object,
-  errorMessage: PropTypes.string,
   deselectNetwork: PropTypes.func,
   selectedNetwork: PropTypes.object,
   onSubmit: PropTypes.func.isRequired,