use render callbacks for loading notification

This commit is contained in:
Rick Watson 2019-08-09 18:55:11 +01:00
parent ff85c2e661
commit ef8061cbc3
12 changed files with 103 additions and 80 deletions

View File

@ -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
};

View File

@ -19,14 +19,16 @@ class APSettings extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<APSettingsForm
apSettings={data}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -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>
)
}

View File

@ -19,7 +19,8 @@ class ManageUsers extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<ManageUsersForm
userData={data}
onSubmit={saveData}
@ -27,7 +28,8 @@ class ManageUsers extends Component {
setData={setData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -19,14 +19,16 @@ class NTPSettings extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<NTPSettingsForm
ntpSettings={data}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -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>
);
}

View File

@ -19,7 +19,8 @@ class OTASettings extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<OTASettingsForm
otaSettings={data}
onSubmit={saveData}
@ -27,7 +28,8 @@ class OTASettings extends Component {
handleValueChange={handleValueChange}
handleCheckboxChange={handleCheckboxChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -19,14 +19,16 @@ class SecuritySettings extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<SecuritySettingsForm
securitySettings={data}
onSubmit={saveData}
onReset={loadData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -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>
)
}

View File

@ -42,7 +42,8 @@ class WiFiSettings extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<WiFiSettingsForm
wifiSettings={data}
selectedNetwork={selectedNetwork}
@ -52,7 +53,8 @@ class WiFiSettings extends Component {
handleValueChange={handleValueChange}
handleCheckboxChange={handleCheckboxChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}

View File

@ -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>
);
}

View File

@ -25,14 +25,16 @@ class DemoController extends Component {
<LoadingNotification
onReset={loadData}
fetched={fetched}
errorMessage={errorMessage}>
errorMessage={errorMessage}
render={() =>
<DemoControllerForm
demoSettings={data}
onReset={loadData}
onSubmit={saveData}
handleValueChange={handleValueChange}
/>
</LoadingNotification>
}
/>
</SectionContent>
)
}
@ -43,7 +45,7 @@ const useStyles = makeStyles(theme => ({
marginRight: theme.spacing(2),
marginTop: theme.spacing(2),
},
blinkSpeedLabel:{
blinkSpeedLabel: {
marginBottom: theme.spacing(5),
}
}));