Skip to content

Commit ff85c2e

Browse files
rjwatsrjwats
committed
reduce use of ternaries in form code
1 parent df06e58 commit ff85c2e

18 files changed

+456
-730
lines changed

‎interface/src/components/RestComponent.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,10 +52,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
5252
})
5353
.then(json => { this.setState({ data: json, fetched: true }) })
5454
.catch(error => {
55-
this.props.enqueueSnackbar("Problem fetching: " + error.message, {
55+
const errorMessage = error.message || "Unknown error";
56+
this.props.enqueueSnackbar("Problem fetching: " + errorMessage, {
5657
variant: 'error',
5758
});
58-
this.setState({ data: null, fetched: true, errorMessage: error.message });
59+
this.setState({ data: null, fetched: true, errorMessage });
5960
});
6061
}
6162

@@ -80,10 +81,11 @@ export const restComponent = (endpointUrl, FormComponent) => {
8081
});
8182
this.setState({ data: json, fetched: true });
8283
}).catch(error => {
83-
this.props.enqueueSnackbar("Problem saving: " + error.message, {
84+
const errorMessage = error.message || "Unknown error";
85+
this.props.enqueueSnackbar("Problem saving: " + errorMessage, {
8486
variant: 'error',
8587
});
86-
this.setState({ data: null, fetched: true, errorMessage: error.message });
88+
this.setState({ data: null, fetched: true, errorMessage });
8789
});
8890
}
8991

‎interface/src/containers/APSettings.js

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import React, { Component } from 'react';
22

3-
import { AP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
3+
import { AP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
44
import { restComponent } from '../components/RestComponent';
5+
import LoadingNotification from '../components/LoadingNotification';
56
import SectionContent from '../components/SectionContent';
67
import APSettingsForm from '../forms/APSettingsForm';
78

@@ -12,17 +13,20 @@ class APSettings extends Component {
1213
}
1314

1415
render() {
15-
const { data, fetched, errorMessage } = this.props;
16+
const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
1617
return (
1718
<SectionContent title="AP Settings">
18-
<APSettingsForm
19-
apSettings={data}
20-
apSettingsFetched={fetched}
21-
errorMessage={errorMessage}
22-
onSubmit={this.props.saveData}
23-
onReset={this.props.loadData}
24-
handleValueChange={this.props.handleValueChange}
25-
/>
19+
<LoadingNotification
20+
onReset={loadData}
21+
fetched={fetched}
22+
errorMessage={errorMessage}>
23+
<APSettingsForm
24+
apSettings={data}
25+
onSubmit={saveData}
26+
onReset={loadData}
27+
handleValueChange={handleValueChange}
28+
/>
29+
</LoadingNotification>
2630
</SectionContent>
2731
)
2832
}

‎interface/src/containers/APStatus.js

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
22

33
import { withStyles } from '@material-ui/core/styles';
44
import Button from '@material-ui/core/Button';
5-
import LinearProgress from '@material-ui/core/LinearProgress';
6-
import Typography from '@material-ui/core/Typography';
75
import List from '@material-ui/core/List';
86
import ListItem from '@material-ui/core/ListItem';
97
import ListItemText from '@material-ui/core/ListItemText';
@@ -15,6 +13,7 @@ import DeviceHubIcon from '@material-ui/icons/DeviceHub';
1513
import ComputerIcon from '@material-ui/icons/Computer';
1614

1715
import { restComponent } from '../components/RestComponent';
16+
import LoadingNotification from '../components/LoadingNotification';
1817
import SectionContent from '../components/SectionContent'
1918

2019
import * as Highlight from '../constants/Highlight';
@@ -27,10 +26,6 @@ const styles = theme => ({
2726
["apStatus_" + Highlight.IDLE]: {
2827
backgroundColor: theme.palette.highlight_idle
2928
},
30-
fetching: {
31-
margin: theme.spacing(4),
32-
textAlign: "center"
33-
},
3429
button: {
3530
marginRight: theme.spacing(2),
3631
marginTop: theme.spacing(2),
@@ -106,30 +101,15 @@ class APStatus extends Component {
106101
}
107102

108103
render() {
109-
const { data, fetched, errorMessage, classes } = this.props;
110-
104+
const { fetched, errorMessage, data, loadData, classes } = this.props;
111105
return (
112106
<SectionContent title="AP Status">
113-
{
114-
!fetched ?
115-
<div>
116-
<LinearProgress className={classes.fetching} />
117-
<Typography variant="h4" className={classes.fetching}>
118-
Loading...
119-
</Typography>
120-
</div>
121-
:
122-
data ? this.renderAPStatus(data, classes)
123-
:
124-
<div>
125-
<Typography variant="h4" className={classes.fetching}>
126-
{errorMessage}
127-
</Typography>
128-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
129-
Refresh
130-
</Button>
131-
</div>
132-
}
107+
<LoadingNotification
108+
onReset={loadData}
109+
fetched={fetched}
110+
errorMessage={errorMessage}>
111+
{this.renderAPStatus(data, classes)}
112+
</LoadingNotification>
133113
</SectionContent>
134114
)
135115
}

‎interface/src/containers/ManageUsers.js

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import React, { Component } from 'react';
22

33
import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
44
import { restComponent } from '../components/RestComponent';
5-
import ManageUsersForm from '../forms/ManageUsersForm';
5+
import LoadingNotification from '../components/LoadingNotification';
66
import SectionContent from '../components/SectionContent';
7+
import ManageUsersForm from '../forms/ManageUsersForm';
78

89
class ManageUsers extends Component {
910

@@ -12,18 +13,21 @@ class ManageUsers extends Component {
1213
}
1314

1415
render() {
15-
const { data, fetched, errorMessage } = this.props;
16+
const { fetched, errorMessage, data, saveData, loadData, setData, handleValueChange } = this.props;
1617
return (
1718
<SectionContent title="Manage Users" titleGutter>
18-
<ManageUsersForm
19-
userData={data}
20-
userDataFetched={fetched}
21-
errorMessage={errorMessage}
22-
onSubmit={this.props.saveData}
23-
onReset={this.props.loadData}
24-
setData={this.props.setData}
25-
handleValueChange={this.props.handleValueChange}
26-
/>
19+
<LoadingNotification
20+
onReset={loadData}
21+
fetched={fetched}
22+
errorMessage={errorMessage}>
23+
<ManageUsersForm
24+
userData={data}
25+
onSubmit={saveData}
26+
onReset={loadData}
27+
setData={setData}
28+
handleValueChange={handleValueChange}
29+
/>
30+
</LoadingNotification>
2731
</SectionContent>
2832
)
2933
}

‎interface/src/containers/NTPSettings.js

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,32 @@
11
import React, { Component } from 'react';
22

3-
import { NTP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
4-
import {restComponent} from '../components/RestComponent';
3+
import { NTP_SETTINGS_ENDPOINT } from '../constants/Endpoints';
4+
import { restComponent } from '../components/RestComponent';
5+
import LoadingNotification from '../components/LoadingNotification';
56
import SectionContent from '../components/SectionContent';
67
import NTPSettingsForm from '../forms/NTPSettingsForm';
78

89
class NTPSettings extends Component {
910

1011
componentDidMount() {
11-
this.props.loadData();
12+
this.props.loadData();
1213
}
1314

1415
render() {
15-
const { data, fetched, errorMessage } = this.props;
16+
const { fetched, errorMessage, data, saveData, loadData, handleValueChange } = this.props;
1617
return (
1718
<SectionContent title="NTP Settings">
18-
<NTPSettingsForm
19-
ntpSettings={data}
20-
ntpSettingsFetched={fetched}
21-
errorMessage={errorMessage}
22-
onSubmit={this.props.saveData}
23-
onReset={this.props.loadData}
24-
handleValueChange={this.props.handleValueChange}
25-
/>
19+
<LoadingNotification
20+
onReset={loadData}
21+
fetched={fetched}
22+
errorMessage={errorMessage}>
23+
<NTPSettingsForm
24+
ntpSettings={data}
25+
onSubmit={saveData}
26+
onReset={loadData}
27+
handleValueChange={handleValueChange}
28+
/>
29+
</LoadingNotification>
2630
</SectionContent>
2731
)
2832
}

‎interface/src/containers/NTPStatus.js

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@ import React, { Component, Fragment } from 'react';
22

33
import { withStyles } from '@material-ui/core/styles';
44
import Button from '@material-ui/core/Button';
5-
import LinearProgress from '@material-ui/core/LinearProgress';
6-
import Typography from '@material-ui/core/Typography';
75
import List from '@material-ui/core/List';
86
import ListItem from '@material-ui/core/ListItem';
97
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
@@ -22,6 +20,7 @@ import * as Highlight from '../constants/Highlight';
2220
import { unixTimeToTimeAndDate } from '../constants/TimeFormat';
2321
import { NTP_STATUS_ENDPOINT } from '../constants/Endpoints';
2422
import { restComponent } from '../components/RestComponent';
23+
import LoadingNotification from '../components/LoadingNotification';
2524
import SectionContent from '../components/SectionContent';
2625

2726
import moment from 'moment';
@@ -36,10 +35,6 @@ const styles = theme => ({
3635
["ntpStatus_" + Highlight.WARN]: {
3736
backgroundColor: theme.palette.highlight_warn
3837
},
39-
fetching: {
40-
margin: theme.spacing(4),
41-
textAlign: "center"
42-
},
4338
button: {
4439
marginRight: theme.spacing(2),
4540
marginTop: theme.spacing(2),
@@ -131,32 +126,17 @@ class NTPStatus extends Component {
131126
}
132127

133128
render() {
134-
const { data, fetched, errorMessage, classes } = this.props;
135-
129+
const { data, fetched, errorMessage, loadData, classes } = this.props;
136130
return (
137131
<SectionContent title="NTP Status">
138-
{
139-
!fetched ?
140-
<div>
141-
<LinearProgress className={classes.fetching} />
142-
<Typography variant="h4" className={classes.fetching}>
143-
Loading...
144-
</Typography>
145-
</div>
146-
:
147-
data ? this.renderNTPStatus(data, classes)
148-
:
149-
<div>
150-
<Typography variant="h4" className={classes.fetching}>
151-
{errorMessage}
152-
</Typography>
153-
<Button variant="contained" color="secondary" className={classes.button} onClick={this.props.loadData}>
154-
Refresh
155-
</Button>
156-
</div>
157-
}
132+
<LoadingNotification
133+
onReset={loadData}
134+
fetched={fetched}
135+
errorMessage={errorMessage}>
136+
{this.renderNTPStatus(data, classes)}
137+
</LoadingNotification>
158138
</SectionContent>
159-
)
139+
);
160140
}
161141
}
162142

‎interface/src/containers/OTASettings.js

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
import React, { Component } from 'react';
22

3-
import { OTA_SETTINGS_ENDPOINT } from '../constants/Endpoints';
4-
import {restComponent} from '../components/RestComponent';
3+
import { OTA_SETTINGS_ENDPOINT } from '../constants/Endpoints';
4+
import { restComponent } from '../components/RestComponent';
5+
import LoadingNotification from '../components/LoadingNotification';
56
import SectionContent from '../components/SectionContent';
67
import OTASettingsForm from '../forms/OTASettingsForm';
78

89
class OTASettings extends Component {
910

1011
componentDidMount() {
11-
this.props.loadData();
12+
this.props.loadData();
1213
}
1314

1415
render() {
15-
const { data, fetched, errorMessage } = this.props;
16+
const { fetched, errorMessage, data, saveData, loadData, handleValueChange, handleCheckboxChange } = this.props;
1617
return (
1718
<SectionContent title="OTA Settings">
18-
<OTASettingsForm
19-
otaSettings={data}
20-
otaSettingsFetched={fetched}
21-
errorMessage={errorMessage}
22-
onSubmit={this.props.saveData}
23-
onReset={this.props.loadData}
24-
handleValueChange={this.props.handleValueChange}
25-
handleCheckboxChange={this.props.handleCheckboxChange}
26-
/>
19+
<LoadingNotification
20+
onReset={loadData}
21+
fetched={fetched}
22+
errorMessage={errorMessage}>
23+
<OTASettingsForm
24+
otaSettings={data}
25+
onSubmit={saveData}
26+
onReset={loadData}
27+
handleValueChange={handleValueChange}
28+
handleCheckboxChange={handleCheckboxChange}
29+
/>
30+
</LoadingNotification>
2731
</SectionContent>
2832
)
2933
}

‎interface/src/containers/SecuritySettings.js

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
22

33
import { SECURITY_SETTINGS_ENDPOINT } from '../constants/Endpoints';
44
import { restComponent } from '../components/RestComponent';
5+
import LoadingNotification from '../components/LoadingNotification';
56
import SecuritySettingsForm from '../forms/SecuritySettingsForm';
67
import SectionContent from '../components/SectionContent';
78

@@ -15,14 +16,17 @@ class SecuritySettings extends Component {
1516
const { data, fetched, errorMessage, saveData, loadData, handleValueChange } = this.props;
1617
return (
1718
<SectionContent title="Security Settings">
18-
<SecuritySettingsForm
19-
securitySettings={data}
20-
securitySettingsFetched={fetched}
21-
errorMessage={errorMessage}
22-
onSubmit={saveData}
19+
<LoadingNotification
2320
onReset={loadData}
24-
handleValueChange={handleValueChange}
25-
/>
21+
fetched={fetched}
22+
errorMessage={errorMessage}>
23+
<SecuritySettingsForm
24+
securitySettings={data}
25+
onSubmit={saveData}
26+
onReset={loadData}
27+
handleValueChange={handleValueChange}
28+
/>
29+
</LoadingNotification>
2630
</SectionContent>
2731
)
2832
}

0 commit comments

Comments
 (0)