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

Merge pull request #48 from rjwats/notistack

Browse Source 
Notistack - Replace custom notification component
This commit is contained in:
rjwats 2019-08-07 21:17:08 +01:00 committed by GitHub
commit 2ceb54ce4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
21 changed files with 875 additions and 1093 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,6 +4,7 @@
.clang_complete .clang_complete
.gcc-flags.json .gcc-flags.json
*Thumbs.db *Thumbs.db
/data/www
/interface/build /interface/build
/interface/node_modules /interface/node_modules
.vscode .vscode

BIN
data/www/app/icon.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.7 KiB

12
data/www/app/manifest.json
View File

@ -1,12 +0,0 @@
{
"name":"ESP8266 React",
"icons":[
{
"src":"/app/icon.png",
"sizes":"48x48 72x72 96x96 128x128 256x256"
}
],
"start_url":"/",
"display":"fullscreen",
"orientation":"any"
}

22
data/www/css/roboto.css
View File

@ -1,22 +0,0 @@
/* Just supporting latin due to size constrains on the esp chip */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 300;
src: local('Roboto Light'), local('Roboto-Light'), url(../fonts/ro-li.w2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('Roboto'), local('Roboto-Regular'), url(../fonts/ro-re.w2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 500;
src: local('Roboto Medium'), local('Roboto-Medium'), url(../fonts/ro-me.w2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

BIN
data/www/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

BIN
data/www/fonts/ro-li.w2
View File

Binary file not shown.

BIN
data/www/fonts/ro-me.w2
View File

Binary file not shown.

BIN
data/www/fonts/ro-re.w2
View File

Binary file not shown.

1
data/www/index.html
View File

@ -1 +0,0 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><link rel="stylesheet" href="/css/roboto.css"><link rel="manifest" href="/app/manifest.json"><title>ESP8266 React</title></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="/js/1.b351.js"></script><script src="/js/2.182e.js"></script><script src="/js/0.9b2e.js"></script></body></html>

BIN
data/www/js/0.9b2e.js.gz
View File

Binary file not shown.

BIN
data/www/js/1.b351.js.gz
View File

Binary file not shown.

BIN
data/www/js/2.182e.js.gz
View File

Binary file not shown.

1680
interface/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

9
interface/package.json
View File

@ -3,17 +3,18 @@
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.0.2", "@material-ui/core": "^4.3.1",
"@material-ui/icons": "^4.0.1", "@material-ui/icons": "^4.2.1",
"compression-webpack-plugin": "^2.0.0", "compression-webpack-plugin": "^2.0.0",
"jwt-decode": "^2.2.0", "jwt-decode": "^2.2.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"notistack": "^0.8.9",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"react-form-validator-core": "^0.6.3", "react-form-validator-core": "^0.6.3",
"react-jss": "^10.0.0-alpha.16", "react-jss": "^10.0.0-alpha.23",
"react-material-ui-form-validator": "^2.0.8", "react-material-ui-form-validator": "^2.0.9",
"react-router": "^5.0.1", "react-router": "^5.0.1",
"react-router-dom": "^5.0.1", "react-router-dom": "^5.0.1",
"react-scripts": "3.0.1" "react-scripts": "3.0.1"

6
interface/src/App.js
View File

@ -2,7 +2,7 @@ import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router'; import { Redirect, Route, Switch } from 'react-router';
import AppRouting from './AppRouting'; import AppRouting from './AppRouting';
import SnackbarNotification from './components/SnackbarNotification'; import { SnackbarProvider } from 'notistack';
import CssBaseline from '@material-ui/core/CssBaseline'; import CssBaseline from '@material-ui/core/CssBaseline';
import blueGrey from '@material-ui/core/colors/blueGrey'; import blueGrey from '@material-ui/core/colors/blueGrey';
@ -42,13 +42,13 @@ class App extends Component {
return ( return (
<StylesProvider jss={jss}> <StylesProvider jss={jss}>
<MuiThemeProvider theme={theme}> <MuiThemeProvider theme={theme}>
<SnackbarNotification> <SnackbarProvider maxSnack={3}>
<CssBaseline /> <CssBaseline />
<Switch> <Switch>
<Route exact path="/unauthorized" component={unauthorizedRedirect} /> <Route exact path="/unauthorized" component={unauthorizedRedirect} />
<Route component={AppRouting} /> <Route component={AppRouting} />
</Switch> </Switch>
</SnackbarNotification> </SnackbarProvider>
</MuiThemeProvider> </MuiThemeProvider>
</StylesProvider> </StylesProvider>
); );

10
interface/src/authentication/AuthenticatedRoute.js
View File

@ -5,12 +5,12 @@ import {
import { withAuthenticationContext } from './Context.js'; import { withAuthenticationContext } from './Context.js';
import * as Authentication from './Authentication'; import * as Authentication from './Authentication';
import { withNotifier } from '../components/SnackbarNotification'; import { withSnackbar } from 'notistack';
export class AuthenticatedRoute extends React.Component { export class AuthenticatedRoute extends React.Component {
render() { render() {
const { raiseNotification, authenticationContext, component: Component, ...rest } = this.props; const { enqueueSnackbar, authenticationContext, component: Component, ...rest } = this.props;
const { location } = this.props; const { location } = this.props;
const renderComponent = (props) => { const renderComponent = (props) => {
if (authenticationContext.isAuthenticated()) { if (authenticationContext.isAuthenticated()) {
@ -19,7 +19,9 @@ export class AuthenticatedRoute extends React.Component {
); );
} }
Authentication.storeLoginRedirect(location); Authentication.storeLoginRedirect(location);
raiseNotification("Please log in to continue."); enqueueSnackbar("Please log in to continue.", {
variant: 'info',
});
return ( return (
<Redirect to='/' /> <Redirect to='/' />
); );
@ -31,4 +33,4 @@ export class AuthenticatedRoute extends React.Component {
} }
export default withNotifier(withAuthenticationContext(AuthenticatedRoute)); export default withSnackbar(withAuthenticationContext(AuthenticatedRoute));

18
interface/src/authentication/AuthenticationWrapper.js
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import history from '../history' import history from '../history'
import { withNotifier } from '../components/SnackbarNotification'; import { withSnackbar } from 'notistack';
import { VERIFY_AUTHORIZATION_ENDPOINT } from '../constants/Endpoints'; import { VERIFY_AUTHORIZATION_ENDPOINT } from '../constants/Endpoints';
import { ACCESS_TOKEN, authorizedFetch } from './Authentication'; import { ACCESS_TOKEN, authorizedFetch } from './Authentication';
import { AuthenticationContext } from './Context'; import { AuthenticationContext } from './Context';
@ -80,7 +80,9 @@ class AuthenticationWrapper extends React.Component {
this.setState({ initialized: true, context: { ...this.state.context, user } }); this.setState({ initialized: true, context: { ...this.state.context, user } });
}).catch(error => { }).catch(error => {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } }); this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
this.props.raiseNotification("Error verifying authorization: " + error.message); this.props.enqueueSnackbar("Error verifying authorization: " + error.message, {
variant: 'error',
});
}); });
} else { } else {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } }); this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
@ -90,7 +92,11 @@ class AuthenticationWrapper extends React.Component {
signIn = (accessToken) => { signIn = (accessToken) => {
try { try {
localStorage.setItem(ACCESS_TOKEN, accessToken); localStorage.setItem(ACCESS_TOKEN, accessToken);
this.setState({ context: { ...this.state.context, user: jwtDecode(accessToken) } }); const user = jwtDecode(accessToken);
this.setState({ context: { ...this.state.context, user } });
this.props.enqueueSnackbar(`Logged in as ${user.username}`, {
variant: 'success',
});
} catch (err) { } catch (err) {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } }); this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
throw new Error("Failed to parse JWT " + err.message); throw new Error("Failed to parse JWT " + err.message);
@ -105,7 +111,9 @@ class AuthenticationWrapper extends React.Component {
user: undefined user: undefined
} }
}); });
this.props.raiseNotification("You have signed out."); this.props.enqueueSnackbar("You have signed out.", {
variant: 'success',
});
history.push('/'); history.push('/');
} }
@ -120,4 +128,4 @@ class AuthenticationWrapper extends React.Component {
} }
export default withStyles(styles)(withNotifier(AuthenticationWrapper)) export default withStyles(styles)(withSnackbar(AuthenticationWrapper))

16
interface/src/components/RestComponent.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { withNotifier } from '../components/SnackbarNotification'; import { withSnackbar } from 'notistack';
import { redirectingAuthorizedFetch } from '../authentication/Authentication'; import { redirectingAuthorizedFetch } from '../authentication/Authentication';
/* /*
* It is unlikely this application will grow complex enough to require redux. * It is unlikely this application will grow complex enough to require redux.
@ -10,7 +10,7 @@ import { redirectingAuthorizedFetch } from '../authentication/Authentication';
*/ */
export const restComponent = (endpointUrl, FormComponent) => { export const restComponent = (endpointUrl, FormComponent) => {
return withNotifier( return withSnackbar(
class extends React.Component { class extends React.Component {
constructor(props) { constructor(props) {
@ -51,7 +51,9 @@ export const restComponent = (endpointUrl, FormComponent) => {
}) })
.then(json => { this.setState({ data: json, fetched: true }) }) .then(json => { this.setState({ data: json, fetched: true }) })
.catch(error => { .catch(error => {
this.props.raiseNotification("Problem fetching: " + error.message); this.props.enqueueSnackbar("Problem fetching: " + error.message, {
variant: 'error',
});
this.setState({ data: null, fetched: true, errorMessage: error.message }); this.setState({ data: null, fetched: true, errorMessage: error.message });
}); });
} }
@ -72,10 +74,14 @@ export const restComponent = (endpointUrl, FormComponent) => {
throw Error("Invalid status code: " + response.status); throw Error("Invalid status code: " + response.status);
}) })
.then(json => { .then(json => {
this.props.raiseNotification("Changes successfully applied."); this.props.enqueueSnackbar("Changes successfully applied.", {
variant: 'success',
});
this.setState({ data: json, fetched: true }); this.setState({ data: json, fetched: true });
}).catch(error => { }).catch(error => {
this.props.raiseNotification("Problem saving: " + error.message); this.props.enqueueSnackbar("Problem saving: " + error.message, {
variant: 'error',
});
this.setState({ data: null, fetched: true, errorMessage: error.message }); this.setState({ data: null, fetched: true, errorMessage: error.message });
}); });
} }

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

@ -1,93 +0,0 @@
import React, {Fragment} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';
import IconButton from '@material-ui/core/IconButton';
import CloseIcon from '@material-ui/icons/Close';
const styles = theme => ({
close: {
padding: theme.spacing(0.5),
},
});
class SnackbarNotification extends React.Component {
constructor(props) {
super(props);
this.raiseNotification=this.raiseNotification.bind(this);
}
static childContextTypes = {
raiseNotification: PropTypes.func.isRequired
}
getChildContext = () => {
return {raiseNotification : this.raiseNotification};
};
state = {
open: false,
message: null
};
raiseNotification = (message) => {
this.setState({ open: true, message:message });
};
handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
this.setState({ open: false });
};
render() {
const { classes } = this.props;
return (
<Fragment>
<Snackbar
anchorOrigin={{
vertical: 'bottom',
horizontal: 'left',
}}
open={this.state.open}
autoHideDuration={6000}
onClose={this.handleClose}
ContentProps={{
'aria-describedby': 'message-id',
}}
message={<span id="message-id">{this.state.message}</span>}
action={
<IconButton
aria-label="Close"
color="inherit"
className={classes.close}
onClick={this.handleClose}
>
<CloseIcon />
</IconButton>
}
/>
{this.props.children}
</Fragment>
);
}
}
SnackbarNotification.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(SnackbarNotification);
export function withNotifier(WrappedComponent) {
return class extends React.Component {
static contextTypes = {
raiseNotification: PropTypes.func.isRequired
};
render() {
return <WrappedComponent raiseNotification={this.context.raiseNotification} {...this.props} />;
}
};
}

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

@ -6,7 +6,7 @@ import Typography from '@material-ui/core/Typography';
import Fab from '@material-ui/core/Fab'; import Fab from '@material-ui/core/Fab';
import { APP_NAME } from '../constants/App'; import { APP_NAME } from '../constants/App';
import ForwardIcon from '@material-ui/icons/Forward'; import ForwardIcon from '@material-ui/icons/Forward';
import { withNotifier } from '../components/SnackbarNotification'; import { withSnackbar } from 'notistack';
import { SIGN_IN_ENDPOINT } from '../constants/Endpoints'; import { SIGN_IN_ENDPOINT } from '../constants/Endpoints';
import { withAuthenticationContext } from '../authentication/Context'; import { withAuthenticationContext } from '../authentication/Context';
import PasswordValidator from '../components/PasswordValidator'; import PasswordValidator from '../components/PasswordValidator';
@ -84,7 +84,9 @@ class SignInPage extends Component {
authenticationContext.signIn(json.access_token); authenticationContext.signIn(json.access_token);
}) })
.catch(error => { .catch(error => {
this.props.raiseNotification(error.message); this.props.enqueueSnackbar(error.message, {
variant: 'warning',
});
this.setState({ processing: false }); this.setState({ processing: false });
}); });
}; };
@ -132,5 +134,5 @@ class SignInPage extends Component {
} }
export default withAuthenticationContext( export default withAuthenticationContext(
withNotifier(withStyles(styles)(SignInPage)) withSnackbar(withStyles(styles)(SignInPage))
); );

12
interface/src/containers/WiFiNetworkScanner.js
View File

@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { SCAN_NETWORKS_ENDPOINT, LIST_NETWORKS_ENDPOINT } from '../constants/Endpoints'; import { SCAN_NETWORKS_ENDPOINT, LIST_NETWORKS_ENDPOINT } from '../constants/Endpoints';
import SectionContent from '../components/SectionContent'; import SectionContent from '../components/SectionContent';
import WiFiNetworkSelector from '../forms/WiFiNetworkSelector'; import WiFiNetworkSelector from '../forms/WiFiNetworkSelector';
import {withNotifier} from '../components/SnackbarNotification'; import { withSnackbar } from 'notistack';
import { redirectingAuthorizedFetch } from '../authentication/Authentication'; import { redirectingAuthorizedFetch } from '../authentication/Authentication';
const NUM_POLLS = 10 const NUM_POLLS = 10
@ -46,7 +46,9 @@ class WiFiNetworkScanner extends Component {
} }
throw Error("Scanning for networks returned unexpected response code: " + response.status); throw Error("Scanning for networks returned unexpected response code: " + response.status);
}).catch(error => { }).catch(error => {
this.props.raiseNotification("Problem scanning: " + error.message); this.props.enqueueSnackbar("Problem scanning: " + error.message, {
variant: 'error',
});
this.setState({ scanningForNetworks: false, networkList: null, errorMessage: error.message }); this.setState({ scanningForNetworks: false, networkList: null, errorMessage: error.message });
}); });
} }
@ -92,7 +94,9 @@ class WiFiNetworkScanner extends Component {
}) })
.catch(error => { .catch(error => {
if (error.name !== RETRY_EXCEPTION_TYPE) { if (error.name !== RETRY_EXCEPTION_TYPE) {
this.props.raiseNotification("Problem scanning: " + error.message); this.props.enqueueSnackbar("Problem scanning: " + error.message, {
variant: 'error',
});
this.setState({ scanningForNetworks: false, networkList: null, errorMessage: error.message }); this.setState({ scanningForNetworks: false, networkList: null, errorMessage: error.message });
} }
}); });
@ -118,4 +122,4 @@ WiFiNetworkScanner.propTypes = {
selectNetwork: PropTypes.func.isRequired selectNetwork: PropTypes.func.isRequired
}; };
export default withNotifier(WiFiNetworkScanner); export default withSnackbar(WiFiNetworkScanner);