From ef8061cbc32aab6fef8d839d62bdbfe6fdad781d Mon Sep 17 00:00:00 2001
From: Rick Watson <rjwats@gmail.com>
Date: Fri, 9 Aug 2019 18:55:11 +0100
Subject: [PATCH] use render callbacks for loading notification

---
 .../src/components/LoadingNotification.js     |  7 +++---
 interface/src/containers/APSettings.js        | 18 +++++++-------
 interface/src/containers/APStatus.js          |  8 ++++---
 interface/src/containers/ManageUsers.js       | 20 +++++++++-------
 interface/src/containers/NTPSettings.js       | 18 +++++++-------
 interface/src/containers/NTPStatus.js         |  8 ++++---
 interface/src/containers/OTASettings.js       | 20 +++++++++-------
 interface/src/containers/SecuritySettings.js  | 18 +++++++-------
 interface/src/containers/SystemStatus.js      | 10 ++++----
 interface/src/containers/WiFiSettings.js      | 24 ++++++++++---------
 interface/src/containers/WiFiStatus.js        |  8 ++++---
 interface/src/project/DemoController.js       | 24 ++++++++++---------
 12 files changed, 103 insertions(+), 80 deletions(-)

diff --git a/interface/src/components/LoadingNotification.js b/interface/src/components/LoadingNotification.js
index 5765412..db1cd31 100644
--- a/interface/src/components/LoadingNotification.js
+++ b/interface/src/components/LoadingNotification.js
@@ -22,7 +22,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function LoadingNotification(props) {
   const classes = useStyles();
-  const { fetched, errorMessage, onReset, children } = props;
+  const { fetched, errorMessage, onReset, render } = props;
   return (
     <div>
       {
@@ -37,7 +37,7 @@ export default function LoadingNotification(props) {
               </Button>
             </div>
             :
-            children
+            render()
           :
           <div className={classes.loadingSettings}>
             <LinearProgress className={classes.loadingSettingsDetails} />
@@ -53,5 +53,6 @@ export default function LoadingNotification(props) {
 LoadingNotification.propTypes = {
   fetched: PropTypes.bool.isRequired,
   onReset: PropTypes.func.isRequired,
-  errorMessage: PropTypes.string
+  errorMessage: PropTypes.string,
+  render: PropTypes.func.isRequired
 };
diff --git a/interface/src/containers/APSettings.js b/interface/src/containers/APSettings.js
index 3e8cab2..45ae270 100644
--- a/interface/src/containers/APSettings.js
+++ b/interface/src/containers/APSettings.js
@@ -19,14 +19,16 @@ class APSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <APSettingsForm
-            apSettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <APSettingsForm
+              apSettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/APStatus.js b/interface/src/containers/APStatus.js
index 354a1da..eadaf9b 100644
--- a/interface/src/containers/APStatus.js
+++ b/interface/src/containers/APStatus.js
@@ -107,9 +107,11 @@ class APStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          {this.renderAPStatus(data, classes)}
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={
+            () => this.renderAPStatus(data, classes)
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/ManageUsers.js b/interface/src/containers/ManageUsers.js
index 63727cd..6b91556 100644
--- a/interface/src/containers/ManageUsers.js
+++ b/interface/src/containers/ManageUsers.js
@@ -19,15 +19,17 @@ class ManageUsers extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <ManageUsersForm
-            userData={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            setData={setData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <ManageUsersForm
+              userData={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              setData={setData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/NTPSettings.js b/interface/src/containers/NTPSettings.js
index 2b903a8..9393545 100644
--- a/interface/src/containers/NTPSettings.js
+++ b/interface/src/containers/NTPSettings.js
@@ -19,14 +19,16 @@ class NTPSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <NTPSettingsForm
-            ntpSettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <NTPSettingsForm
+              ntpSettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/NTPStatus.js b/interface/src/containers/NTPStatus.js
index 195f5fa..f58e467 100644
--- a/interface/src/containers/NTPStatus.js
+++ b/interface/src/containers/NTPStatus.js
@@ -132,9 +132,11 @@ class NTPStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          {this.renderNTPStatus(data, classes)}
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={
+            () => this.renderNTPStatus(data, classes)
+          }
+        />
       </SectionContent>
     );
   }
diff --git a/interface/src/containers/OTASettings.js b/interface/src/containers/OTASettings.js
index 189e620..46fd4ec 100644
--- a/interface/src/containers/OTASettings.js
+++ b/interface/src/containers/OTASettings.js
@@ -19,15 +19,17 @@ class OTASettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <OTASettingsForm
-            otaSettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-            handleCheckboxChange={handleCheckboxChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <OTASettingsForm
+              otaSettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+              handleCheckboxChange={handleCheckboxChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/SecuritySettings.js b/interface/src/containers/SecuritySettings.js
index e1c70a6..9ee2c55 100644
--- a/interface/src/containers/SecuritySettings.js
+++ b/interface/src/containers/SecuritySettings.js
@@ -19,14 +19,16 @@ class SecuritySettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <SecuritySettingsForm
-            securitySettings={data}
-            onSubmit={saveData}
-            onReset={loadData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <SecuritySettingsForm
+              securitySettings={data}
+              onSubmit={saveData}
+              onReset={loadData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/SystemStatus.js b/interface/src/containers/SystemStatus.js
index b9c1410..560c936 100644
--- a/interface/src/containers/SystemStatus.js
+++ b/interface/src/containers/SystemStatus.js
@@ -84,7 +84,7 @@ class SystemStatus extends Component {
     );
   }
 
-  renderNTPStatus(data, classes) {
+  renderSystemStatus(data, classes) {
     return (
       <div>
         <List>
@@ -104,9 +104,11 @@ class SystemStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          {this.renderNTPStatus(data, classes)}
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={
+            () => this.renderSystemStatus(data, classes)
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/WiFiSettings.js b/interface/src/containers/WiFiSettings.js
index fb0bfb0..9c0802d 100644
--- a/interface/src/containers/WiFiSettings.js
+++ b/interface/src/containers/WiFiSettings.js
@@ -42,17 +42,19 @@ class WiFiSettings extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <WiFiSettingsForm
-            wifiSettings={data}
-            selectedNetwork={selectedNetwork}
-            deselectNetwork={deselectNetwork}
-            onSubmit={saveData}
-            onReset={this.deselectNetworkAndLoadData}
-            handleValueChange={handleValueChange}
-            handleCheckboxChange={handleCheckboxChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <WiFiSettingsForm
+              wifiSettings={data}
+              selectedNetwork={selectedNetwork}
+              deselectNetwork={deselectNetwork}
+              onSubmit={saveData}
+              onReset={this.deselectNetworkAndLoadData}
+              handleValueChange={handleValueChange}
+              handleCheckboxChange={handleCheckboxChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
diff --git a/interface/src/containers/WiFiStatus.js b/interface/src/containers/WiFiStatus.js
index 4c47f2c..43724d9 100644
--- a/interface/src/containers/WiFiStatus.js
+++ b/interface/src/containers/WiFiStatus.js
@@ -144,9 +144,11 @@ class WiFiStatus extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          {this.renderWiFiStatus(data, classes)}
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={
+            () => this.renderWiFiStatus(data, classes)
+          }
+        />
       </SectionContent>
     );
   }
diff --git a/interface/src/project/DemoController.js b/interface/src/project/DemoController.js
index 4a711c5..4eb3579 100644
--- a/interface/src/project/DemoController.js
+++ b/interface/src/project/DemoController.js
@@ -17,7 +17,7 @@ class DemoController extends Component {
   componentDidMount() {
     this.props.loadData();
   }
-  
+
   render() {
     const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
     return (
@@ -25,14 +25,16 @@ class DemoController extends Component {
         <LoadingNotification
           onReset={loadData}
           fetched={fetched}
-          errorMessage={errorMessage}>
-          <DemoControllerForm
-            demoSettings={data}
-            onReset={loadData}
-            onSubmit={saveData}
-            handleValueChange={handleValueChange}
-          />
-        </LoadingNotification>
+          errorMessage={errorMessage}
+          render={() =>
+            <DemoControllerForm
+              demoSettings={data}
+              onReset={loadData}
+              onSubmit={saveData}
+              handleValueChange={handleValueChange}
+            />
+          }
+        />
       </SectionContent>
     )
   }
@@ -43,11 +45,11 @@ const useStyles = makeStyles(theme => ({
     marginRight: theme.spacing(2),
     marginTop: theme.spacing(2),
   },
-  blinkSpeedLabel:{
+  blinkSpeedLabel: {
     marginBottom: theme.spacing(5),
   }
 }));
-  
+
 function DemoControllerForm(props) {
   const { demoSettings, onSubmit, onReset, handleValueChange } = props;
   const classes = useStyles();