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) { export default function LoadingNotification(props) {
const classes = useStyles(); const classes = useStyles();
const { fetched, errorMessage, onReset, children } = props; const { fetched, errorMessage, onReset, render } = props;
return ( return (
<div> <div>
{ {
@ -37,7 +37,7 @@ export default function LoadingNotification(props) {
</Button> </Button>
</div> </div>
: :
children render()
: :
<div className={classes.loadingSettings}> <div className={classes.loadingSettings}>
<LinearProgress className={classes.loadingSettingsDetails} /> <LinearProgress className={classes.loadingSettingsDetails} />
@ -53,5 +53,6 @@ export default function LoadingNotification(props) {
LoadingNotification.propTypes = { LoadingNotification.propTypes = {
fetched: PropTypes.bool.isRequired, fetched: PropTypes.bool.isRequired,
onReset: PropTypes.func.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 <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
<APSettingsForm render={() =>
apSettings={data} <APSettingsForm
onSubmit={saveData} apSettings={data}
onReset={loadData} onSubmit={saveData}
handleValueChange={handleValueChange} onReset={loadData}
/> handleValueChange={handleValueChange}
</LoadingNotification> />
}
/>
</SectionContent> </SectionContent>
) )
} }

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

@ -107,9 +107,11 @@ class APStatus extends Component {
<LoadingNotification <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
{this.renderAPStatus(data, classes)} render={
</LoadingNotification> () => this.renderAPStatus(data, classes)
}
/>
</SectionContent> </SectionContent>
) )
} }

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

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

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

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

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

@ -132,9 +132,11 @@ class NTPStatus extends Component {
<LoadingNotification <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
{this.renderNTPStatus(data, classes)} render={
</LoadingNotification> () => this.renderNTPStatus(data, classes)
}
/>
</SectionContent> </SectionContent>
); );
} }

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

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

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

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

10
interface/src/containers/SystemStatus.js
View File

@ -84,7 +84,7 @@ class SystemStatus extends Component {
); );
} }
renderNTPStatus(data, classes) { renderSystemStatus(data, classes) {
return ( return (
<div> <div>
<List> <List>
@ -104,9 +104,11 @@ class SystemStatus extends Component {
<LoadingNotification <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
{this.renderNTPStatus(data, classes)} render={
</LoadingNotification> () => this.renderSystemStatus(data, classes)
}
/>
</SectionContent> </SectionContent>
) )
} }

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

@ -42,17 +42,19 @@ class WiFiSettings extends Component {
<LoadingNotification <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
<WiFiSettingsForm render={() =>
wifiSettings={data} <WiFiSettingsForm
selectedNetwork={selectedNetwork} wifiSettings={data}
deselectNetwork={deselectNetwork} selectedNetwork={selectedNetwork}
onSubmit={saveData} deselectNetwork={deselectNetwork}
onReset={this.deselectNetworkAndLoadData} onSubmit={saveData}
handleValueChange={handleValueChange} onReset={this.deselectNetworkAndLoadData}
handleCheckboxChange={handleCheckboxChange} handleValueChange={handleValueChange}
/> handleCheckboxChange={handleCheckboxChange}
</LoadingNotification> />
}
/>
</SectionContent> </SectionContent>
) )
} }

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

@ -144,9 +144,11 @@ class WiFiStatus extends Component {
<LoadingNotification <LoadingNotification
onReset={loadData} onReset={loadData}
fetched={fetched} fetched={fetched}
errorMessage={errorMessage}> errorMessage={errorMessage}
{this.renderWiFiStatus(data, classes)} render={
</LoadingNotification> () => this.renderWiFiStatus(data, classes)
}
/>
</SectionContent> </SectionContent>
); );
} }

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

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