From 0b334a8adeedb6611aaa3e196b703acb8239981a Mon Sep 17 00:00:00 2001
From: "rjwats@gmail.com" <rjwats@gmail.com>
Date: Tue, 6 Mar 2018 20:58:36 +0000
Subject: [PATCH] use fragments where possible, and drop keys.

---
 .../src/components/SnackbarNotification.js    |   1 -
 interface/src/containers/APStatus.js          |  79 ++++++------
 interface/src/containers/NTPStatus.js         | 114 ++++++++----------
 interface/src/containers/WiFiStatus.js        | 112 ++++++++---------
 interface/src/forms/APSettingsForm.js         |  12 +-
 interface/src/forms/OTASettingsForm.js        |   2 +-
 interface/src/forms/WiFiNetworkSelector.js    |  35 +++---
 interface/src/forms/WiFiSettingsForm.js       |   2 +-
 8 files changed, 164 insertions(+), 193 deletions(-)

diff --git a/interface/src/components/SnackbarNotification.js b/interface/src/components/SnackbarNotification.js
index cad65d7..044e0a1 100644
--- a/interface/src/components/SnackbarNotification.js
+++ b/interface/src/components/SnackbarNotification.js
@@ -61,7 +61,6 @@ class SnackbarNotification extends React.Component {
           message={<span id="message-id">{this.state.message}</span>}
           action={
             <IconButton
-              key="close"
               aria-label="Close"
               color="inherit"
               className={classes.close}
diff --git a/interface/src/containers/APStatus.js b/interface/src/containers/APStatus.js
index b911b9e..7bd9c80 100644
--- a/interface/src/containers/APStatus.js
+++ b/interface/src/containers/APStatus.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { withStyles } from 'material-ui/styles';
 import Button from 'material-ui/Button';
@@ -48,53 +48,46 @@ class APStatus extends Component {
     return data.active ? "Active" : "Inactive";
   }
 
-  // active, ip_address, mac_address, station_num
+  createListItems(data, fullDetails, classes){
+    return (
+      <Fragment>
+        <ListItem>
+          <Avatar className={classes["apStatus_" + this.apStatusHighlight(data)]}>
+            <SettingsInputAntennaIcon />
+          </Avatar>
+          <ListItemText primary="Status" secondary={this.apStatus(data)} />
+        </ListItem>
+        <Divider inset component="li" />
+        <ListItem>
+          <Avatar>IP</Avatar>
+          <ListItemText primary="IP Address" secondary={data.ip_address} />
+        </ListItem>
+        <Divider inset component="li" />
+        <ListItem>
+          <Avatar>
+            <DeviceHubIcon />
+          </Avatar>
+          <ListItemText primary="MAC Address" secondary={data.mac_address} />
+        </ListItem>
+        <Divider inset component="li" />
+        <ListItem>
+          <Avatar>
+            <ComputerIcon />
+          </Avatar>
+          <ListItemText primary="AP Clients" secondary={data.station_num} />
+        </ListItem>
+        <Divider inset component="li" />
+      </Fragment>
+    );
+  }
 
   renderAPStatus(data, fullDetails, classes){
-    const listItems = [];
-
-    listItems.push(
-      <ListItem key="ap_status">
-        <Avatar className={classes["apStatus_" + this.apStatusHighlight(data)]}>
-          <SettingsInputAntennaIcon />
-        </Avatar>
-        <ListItemText primary="Status" secondary={this.apStatus(data)} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="ap_status_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="ip_address">
-        <Avatar>IP</Avatar>
-        <ListItemText primary="IP Address" secondary={data.ip_address} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="ip_address_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="mac_address">
-        <Avatar>
-          <DeviceHubIcon />
-        </Avatar>
-        <ListItemText primary="MAC Address" secondary={data.mac_address} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="mac_address_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="station_num">
-        <Avatar>
-          <ComputerIcon />
-        </Avatar>
-        <ListItemText primary="AP Clients" secondary={data.station_num} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="station_num_divider" inset component="li" />);
-
     return  (
       <div>
         <List>
-          {listItems}
+          <Fragment>
+            {this.createListItems(data, fullDetails, classes)}
+          </Fragment>
         </List>
         <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
diff --git a/interface/src/containers/NTPStatus.js b/interface/src/containers/NTPStatus.js
index a25c57b..1c3023d 100644
--- a/interface/src/containers/NTPStatus.js
+++ b/interface/src/containers/NTPStatus.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { withStyles } from 'material-ui/styles';
 import Button from 'material-ui/Button';
@@ -50,74 +50,64 @@ class NTPStatus extends Component {
     this.props.loadData();
   }
 
-  renderNTPStatus(data, fullDetails, classes){
-    const listItems = [];
-
-    listItems.push(
-      <ListItem key="ntp_status">
-        <Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
-          <UpdateIcon />
-        </Avatar>
-        <ListItemText primary="Status" secondary={ntpStatus(data)} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="ntp_status_divider" inset component="li" />);
-
-    if (isSynchronized(data)) {
-      listItems.push(
-        <ListItem key="time_now">
-          <Avatar>
-            <AccessTimeIcon />
+  createListItems(data, fullDetails, classes){
+    return (
+      <Fragment>
+        <ListItem>
+          <Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
+            <UpdateIcon />
           </Avatar>
-          <ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
+          <ListItemText primary="Status" secondary={ntpStatus(data)} />
         </ListItem>
-      );
-      listItems.push(<Divider key="time_now_divider" inset component="li" />);
-    }
-
-    listItems.push(
-      <ListItem key="last_sync">
-        <Avatar>
-          <SwapVerticalCircleIcon />
-        </Avatar>
-        <ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
-      </ListItem>
-    );
-    listItems.push(<Divider key="last_sync_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="ntp_server">
-        <Avatar>
-          <DNSIcon />
-        </Avatar>
-        <ListItemText primary="NTP Server" secondary={data.server} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="ntp_server_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="sync_interval">
-        <Avatar>
-          <TimerIcon />
-        </Avatar>
-        <ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
-      </ListItem>
-    );
-    listItems.push(<Divider key="sync_interval_divider" inset component="li" />);
-
-    listItems.push(
-      <ListItem key="uptime">
-        <Avatar>
-          <AvTimerIcon />
-        </Avatar>
-        <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
-      </ListItem>
+        <Divider inset component="li" />
+        { isSynchronized(data) &&
+          <Fragment>
+            <ListItem>
+              <Avatar>
+                <AccessTimeIcon />
+              </Avatar>
+              <ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
+            </ListItem>
+            <Divider inset component="li" />
+            <ListItem>
+              <Avatar>
+                <SwapVerticalCircleIcon />
+              </Avatar>
+              <ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
+            </ListItem>
+            <Divider inset component="li" />
+          </Fragment>
+        }
+        <ListItem>
+          <Avatar>
+            <DNSIcon />
+          </Avatar>
+          <ListItemText primary="NTP Server" secondary={data.server} />
+        </ListItem>
+        <Divider inset component="li" />
+        <ListItem>
+          <Avatar>
+            <TimerIcon />
+          </Avatar>
+          <ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
+        </ListItem>
+        <Divider inset component="li" />
+        <ListItem>
+          <Avatar>
+            <AvTimerIcon />
+          </Avatar>
+          <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
+        </ListItem>
+        <Divider inset component="li" />
+      </Fragment>
     );
+  }
 
+  renderNTPStatus(data, fullDetails, classes){
     return  (
       <div>
         <List>
-          {listItems}
+          {this.createListItems(data, fullDetails, classes)}
         </List>
         <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
diff --git a/interface/src/containers/WiFiStatus.js b/interface/src/containers/WiFiStatus.js
index 7103643..268b2f5 100644
--- a/interface/src/containers/WiFiStatus.js
+++ b/interface/src/containers/WiFiStatus.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { withStyles } from 'material-ui/styles';
 import Button from 'material-ui/Button';
@@ -57,71 +57,61 @@ class WiFiStatus extends Component {
     return status.dns_ip_1 + (status.dns_ip_2 ? ','+status.dns_ip_2 : '');
   }
 
-  renderWiFiStatus(data, fullDetails, classes) {
-    const listItems = [];
-
-    listItems.push(
-      <ListItem key="connection_status">
-        <Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
-          <WifiIcon />
-        </Avatar>
-        <ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
-      </ListItem>
+  createListItems(data, fullDetails, classes) {
+    return (
+      <Fragment>
+        <ListItem>
+          <Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
+            <WifiIcon />
+          </Avatar>
+          <ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
+        </ListItem>
+        <Divider inset component="li" />
+        {
+          (fullDetails && isConnected(data)) &&
+          <Fragment>
+            <ListItem>
+              <Avatar>
+                <SettingsInputAntennaIcon />
+              </Avatar>
+              <ListItemText primary="SSID" secondary={data.ssid} />
+            </ListItem>
+            <Divider inset component="li" />
+            <ListItem>
+              <Avatar>IP</Avatar>
+              <ListItemText primary="IP Address" secondary={data.local_ip} />
+            </ListItem>
+            <Divider inset component="li" />
+            <ListItem>
+              <Avatar>#</Avatar>
+              <ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
+            </ListItem>
+            <Divider inset component="li" />
+            <ListItem>
+              <Avatar>
+                <SettingsInputComponentIcon />
+              </Avatar>
+              <ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
+            </ListItem>
+            <Divider inset component="li" />
+            <ListItem>
+              <Avatar>
+                <DNSIcon />
+              </Avatar>
+              <ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
+            </ListItem>
+            <Divider inset component="li" />
+          </Fragment>
+        }
+      </Fragment>
     );
+  }
 
-    if (fullDetails && isConnected(data)) {
-      listItems.push(<Divider key="connection_status_divider" inset component="li" />);
-
-      listItems.push(
-        <ListItem key="ssid">
-          <Avatar>
-            <SettingsInputAntennaIcon />
-          </Avatar>
-          <ListItemText primary="SSID" secondary={data.ssid} />
-        </ListItem>
-      );
-      listItems.push(<Divider key="ssid_divider" inset component="li" />);
-
-      listItems.push(
-        <ListItem key="ip_address">
-          <Avatar>IP</Avatar>
-          <ListItemText primary="IP Address" secondary={data.local_ip} />
-        </ListItem>
-      );
-      listItems.push(<Divider key="ip_address_divider" inset component="li" />);
-
-      listItems.push(
-        <ListItem key="subnet_mask">
-          <Avatar>#</Avatar>
-          <ListItemText primary="Subnet Mask" secondary={data.subnet_mask} />
-        </ListItem>
-      );
-      listItems.push(<Divider key="subnet_mask_divider" inset component="li" />);
-
-      listItems.push(
-        <ListItem key="gateway_ip">
-          <Avatar>
-            <SettingsInputComponentIcon />
-          </Avatar>
-          <ListItemText primary="Gateway IP" secondary={data.gateway_ip ? data.gateway_ip : "none"} />
-        </ListItem>
-      );
-      listItems.push(<Divider key="gateway_ip_divider" inset component="li" />);
-
-      listItems.push(
-        <ListItem key="dns_server_ip">
-          <Avatar>
-            <DNSIcon />
-          </Avatar>
-          <ListItemText primary="DNS Server IP" secondary={this.dnsServers(data)} />
-        </ListItem>
-      );
-    }
-
+  renderWiFiStatus(data, fullDetails, classes) {
     return  (
       <div>
         <List>
-        {listItems}
+        {this.createListItems(data, fullDetails, classes)}
         </List>
         <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
           Refresh
diff --git a/interface/src/forms/APSettingsForm.js b/interface/src/forms/APSettingsForm.js
index 1ceebb5..122508c 100644
--- a/interface/src/forms/APSettingsForm.js
+++ b/interface/src/forms/APSettingsForm.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 
 import { withStyles } from 'material-ui/styles';
@@ -62,8 +62,8 @@ class APSettingsForm extends React.Component {
 
           {
             isAPEnabled(apSettings.provision_mode) &&
-            [
-              <TextValidator key="ssid"
+            <Fragment>
+              <TextValidator
                 validators={['required', 'matchRegexp:^.{0,32}$']}
                 errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characeters or less']}
                 name="ssid"
@@ -72,8 +72,8 @@ class APSettingsForm extends React.Component {
                 value={apSettings.ssid}
                 onChange={handleValueChange('ssid')}
                 margin="normal"
-              />,
-              <TextValidator key="password"
+              />
+              <TextValidator
                     validators={['required', 'matchRegexp:^.{0,64}$']}
                     errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
                     name="password"
@@ -83,7 +83,7 @@ class APSettingsForm extends React.Component {
                     onChange={handleValueChange('password')}
                     margin="normal"
               />
-            ]
+            </Fragment>
           }
 
           <Button variant="raised" color="primary" className={classes.button} type="submit">
diff --git a/interface/src/forms/OTASettingsForm.js b/interface/src/forms/OTASettingsForm.js
index c9d487f..750e10d 100644
--- a/interface/src/forms/OTASettingsForm.js
+++ b/interface/src/forms/OTASettingsForm.js
@@ -82,7 +82,7 @@ class OTASettingsForm extends React.Component {
                margin="normal"
              />
 
-             <TextValidator key="password"
+             <TextValidator
                    validators={['required', 'matchRegexp:^.{0,64}$']}
                    errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
                    name="password"
diff --git a/interface/src/forms/WiFiNetworkSelector.js b/interface/src/forms/WiFiNetworkSelector.js
index 102c73e..ce838b3 100644
--- a/interface/src/forms/WiFiNetworkSelector.js
+++ b/interface/src/forms/WiFiNetworkSelector.js
@@ -36,24 +36,23 @@ class WiFiNetworkSelector extends Component {
   }
 
   renderNetwork(network) {
-    return ([
-        <ListItem key={network.ssid} button onClick={() => this.props.selectNetwork(network)}>
-          <ListItemAvatar>
-            <Avatar>
-              {isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}
-            </Avatar>
-          </ListItemAvatar>
-          <ListItemText
-            primary={network.ssid}
-            secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel}
-          />
-          <ListItemIcon>
-            <Badge badgeContent={network.rssi + "db"}>
-              <WifiIcon />
-            </Badge>
-          </ListItemIcon>
-        </ListItem>
-      ]
+    return (
+      <ListItem key={network.bssid} button onClick={() => this.props.selectNetwork(network)}>
+        <ListItemAvatar>
+          <Avatar>
+            {isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}
+          </Avatar>
+        </ListItemAvatar>
+        <ListItemText
+          primary={network.ssid}
+          secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel}
+        />
+        <ListItemIcon>
+          <Badge badgeContent={network.rssi + "db"}>
+            <WifiIcon />
+          </Badge>
+        </ListItemIcon>
+      </ListItem>
     );
   }
 
diff --git a/interface/src/forms/WiFiSettingsForm.js b/interface/src/forms/WiFiSettingsForm.js
index 5425d0b..c09357a 100644
--- a/interface/src/forms/WiFiSettingsForm.js
+++ b/interface/src/forms/WiFiSettingsForm.js
@@ -54,7 +54,7 @@ class WiFiSettingsForm extends React.Component {
     const { selectedNetwork, deselectNetwork } = this.props;
     return (
       <List>
-        <ListItem key={selectedNetwork.ssid}>
+        <ListItem>
           <ListItemAvatar>
             <Avatar>
               {isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}