lukas/WordClockESP
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

use render callbacks for loading notification

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
interface/src/components/LoadingNotification.js
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
};

18
interface/src/containers/APSettings.js
View File

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

8
interface/src/containers/APStatus.js
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>
)
}

20
interface/src/containers/ManageUsers.js
View File

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

18
interface/src/containers/NTPSettings.js
View File

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

8
interface/src/containers/NTPStatus.js
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>
);
}

20
interface/src/containers/OTASettings.js
View File

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

18
interface/src/containers/SecuritySettings.js
View File

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

10
interface/src/containers/SystemStatus.js
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>
)
}

24
interface/src/containers/WiFiSettings.js
View File

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

8
interface/src/containers/WiFiStatus.js
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>
);
}

24
interface/src/project/DemoController.js
View File

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