nova/esp8266-react-framework
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use fragments where possible, and drop keys.

Browse Source
This commit is contained in:
rjwats@gmail.com 2018-03-06 20:58:36 +00:00
parent 2c732d3281
commit 0b334a8ade
8 changed files with 164 additions and 193 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
interface/src/components/SnackbarNotification.js
View File

@ -61,7 +61,6 @@ class SnackbarNotification extends React.Component {
message={<span id="message-id">{this.state.message}</span>} message={<span id="message-id">{this.state.message}</span>}
action={ action={
<IconButton <IconButton
key="close"
aria-label="Close" aria-label="Close"
color="inherit" color="inherit"
className={classes.close} className={classes.close}

79
interface/src/containers/APStatus.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { withStyles } from 'material-ui/styles'; import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
@ -48,53 +48,46 @@ class APStatus extends Component {
return data.active ? "Active" : "Inactive"; 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){ 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 ( return (
<div> <div>
<List> <List>
{listItems} <Fragment>
{this.createListItems(data, fullDetails, classes)}
</Fragment>
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh

114
interface/src/containers/NTPStatus.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { withStyles } from 'material-ui/styles'; import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button'; import Button from 'material-ui/Button';
@ -50,74 +50,64 @@ class NTPStatus extends Component {
this.props.loadData(); this.props.loadData();
} }
renderNTPStatus(data, fullDetails, classes){ createListItems(data, fullDetails, classes){
const listItems = []; return (
<Fragment>
listItems.push( <ListItem>
<ListItem key="ntp_status"> <Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}>
<Avatar className={classes["ntpStatus_" + ntpStatusHighlight(data)]}> <UpdateIcon />
<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 />
</Avatar> </Avatar>
<ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} /> <ListItemText primary="Status" secondary={ntpStatus(data)} />
</ListItem> </ListItem>
); <Divider inset component="li" />
listItems.push(<Divider key="time_now_divider" inset component="li" />); { isSynchronized(data) &&
} <Fragment>
<ListItem>
listItems.push( <Avatar>
<ListItem key="last_sync"> <AccessTimeIcon />
<Avatar> </Avatar>
<SwapVerticalCircleIcon /> <ListItemText primary="Time Now" secondary={unixTimeToTimeAndDate(data.now)} />
</Avatar> </ListItem>
<ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } /> <Divider inset component="li" />
</ListItem> <ListItem>
); <Avatar>
listItems.push(<Divider key="last_sync_divider" inset component="li" />); <SwapVerticalCircleIcon />
</Avatar>
listItems.push( <ListItemText primary="Last Sync" secondary={data.last_sync > 0 ? unixTimeToTimeAndDate(data.last_sync) : "never" } />
<ListItem key="ntp_server"> </ListItem>
<Avatar> <Divider inset component="li" />
<DNSIcon /> </Fragment>
</Avatar> }
<ListItemText primary="NTP Server" secondary={data.server} /> <ListItem>
</ListItem> <Avatar>
); <DNSIcon />
listItems.push(<Divider key="ntp_server_divider" inset component="li" />); </Avatar>
<ListItemText primary="NTP Server" secondary={data.server} />
listItems.push( </ListItem>
<ListItem key="sync_interval"> <Divider inset component="li" />
<Avatar> <ListItem>
<TimerIcon /> <Avatar>
</Avatar> <TimerIcon />
<ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} /> </Avatar>
</ListItem> <ListItemText primary="Sync Interval" secondary={moment.duration(data.interval, 'seconds').humanize()} />
); </ListItem>
listItems.push(<Divider key="sync_interval_divider" inset component="li" />); <Divider inset component="li" />
<ListItem>
listItems.push( <Avatar>
<ListItem key="uptime"> <AvTimerIcon />
<Avatar> </Avatar>
<AvTimerIcon /> <ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} />
</Avatar> </ListItem>
<ListItemText primary="Uptime" secondary={moment.duration(data.uptime, 'seconds').humanize()} /> <Divider inset component="li" />
</ListItem> </Fragment>
); );
}
renderNTPStatus(data, fullDetails, classes){
return ( return (
<div> <div>
<List> <List>
{listItems} {this.createListItems(data, fullDetails, classes)}
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh

112
interface/src/containers/WiFiStatus.js
View File

@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component, Fragment } from 'react';
import { withStyles } from 'material-ui/styles'; import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button'; 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 : ''); return status.dns_ip_1 + (status.dns_ip_2 ? ','+status.dns_ip_2 : '');
} }
renderWiFiStatus(data, fullDetails, classes) { createListItems(data, fullDetails, classes) {
const listItems = []; return (
<Fragment>
listItems.push( <ListItem>
<ListItem key="connection_status"> <Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}>
<Avatar className={classes["wifiStatus_" + connectionStatusHighlight(data)]}> <WifiIcon />
<WifiIcon /> </Avatar>
</Avatar> <ListItemText primary="Connection Status" secondary={connectionStatus(data)} />
<ListItemText primary="Connection Status" secondary={connectionStatus(data)} /> </ListItem>
</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)) { renderWiFiStatus(data, fullDetails, classes) {
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>
);
}
return ( return (
<div> <div>
<List> <List>
{listItems} {this.createListItems(data, fullDetails, classes)}
</List> </List>
<Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}> <Button variant="raised" color="secondary" className={classes.button} onClick={this.props.loadData}>
Refresh Refresh

12
interface/src/forms/APSettingsForm.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { Fragment } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles'; import { withStyles } from 'material-ui/styles';
@ -62,8 +62,8 @@ class APSettingsForm extends React.Component {
{ {
isAPEnabled(apSettings.provision_mode) && isAPEnabled(apSettings.provision_mode) &&
[ <Fragment>
<TextValidator key="ssid" <TextValidator
validators={['required', 'matchRegexp:^.{0,32}$']} validators={['required', 'matchRegexp:^.{0,32}$']}
errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characeters or less']} errorMessages={['Access Point SSID is required', 'Access Point SSID must be 32 characeters or less']}
name="ssid" name="ssid"
@ -72,8 +72,8 @@ class APSettingsForm extends React.Component {
value={apSettings.ssid} value={apSettings.ssid}
onChange={handleValueChange('ssid')} onChange={handleValueChange('ssid')}
margin="normal" margin="normal"
/>, />
<TextValidator key="password" <TextValidator
validators={['required', 'matchRegexp:^.{0,64}$']} validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']} errorMessages={['Access Point Password is required', 'Access Point Password must be 64 characters or less']}
name="password" name="password"
@ -83,7 +83,7 @@ class APSettingsForm extends React.Component {
onChange={handleValueChange('password')} onChange={handleValueChange('password')}
margin="normal" margin="normal"
/> />
] </Fragment>
} }
<Button variant="raised" color="primary" className={classes.button} type="submit"> <Button variant="raised" color="primary" className={classes.button} type="submit">

2
interface/src/forms/OTASettingsForm.js
View File

@ -82,7 +82,7 @@ class OTASettingsForm extends React.Component {
margin="normal" margin="normal"
/> />
<TextValidator key="password" <TextValidator
validators={['required', 'matchRegexp:^.{0,64}$']} validators={['required', 'matchRegexp:^.{0,64}$']}
errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']} errorMessages={['OTA Password is required', 'OTA Point Password must be 64 characters or less']}
name="password" name="password"

35
interface/src/forms/WiFiNetworkSelector.js
View File

@ -36,24 +36,23 @@ class WiFiNetworkSelector extends Component {
} }
renderNetwork(network) { renderNetwork(network) {
return ([ return (
<ListItem key={network.ssid} button onClick={() => this.props.selectNetwork(network)}> <ListItem key={network.bssid} button onClick={() => this.props.selectNetwork(network)}>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
{isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />} {isNetworkOpen(network) ? <LockOpenIcon /> : <LockIcon />}
</Avatar> </Avatar>
</ListItemAvatar> </ListItemAvatar>
<ListItemText <ListItemText
primary={network.ssid} primary={network.ssid}
secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel} secondary={"Security: "+ networkSecurityMode(network) + ", Ch: " + network.channel}
/> />
<ListItemIcon> <ListItemIcon>
<Badge badgeContent={network.rssi + "db"}> <Badge badgeContent={network.rssi + "db"}>
<WifiIcon /> <WifiIcon />
</Badge> </Badge>
</ListItemIcon> </ListItemIcon>
</ListItem> </ListItem>
]
); );
} }

2
interface/src/forms/WiFiSettingsForm.js
View File

@ -54,7 +54,7 @@ class WiFiSettingsForm extends React.Component {
const { selectedNetwork, deselectNetwork } = this.props; const { selectedNetwork, deselectNetwork } = this.props;
return ( return (
<List> <List>
<ListItem key={selectedNetwork.ssid}> <ListItem>
<ListItemAvatar> <ListItemAvatar>
<Avatar> <Avatar>
{isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />} {isNetworkOpen(selectedNetwork) ? <LockOpenIcon /> : <LockIcon />}