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
.gcc-flags.json
*Thumbs.db
/data/www
/interface/build
/interface/node_modules
.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",
"private": true,
"dependencies": {
"@material-ui/core": "^4.0.2",
"@material-ui/icons": "^4.0.1",
"@material-ui/core": "^4.3.1",
"@material-ui/icons": "^4.2.1",
"compression-webpack-plugin": "^2.0.0",
"jwt-decode": "^2.2.0",
"moment": "^2.24.0",
"notistack": "^0.8.9",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-form-validator-core": "^0.6.3",
"react-jss": "^10.0.0-alpha.16",
"react-material-ui-form-validator": "^2.0.8",
"react-jss": "^10.0.0-alpha.23",
"react-material-ui-form-validator": "^2.0.9",
"react-router": "^5.0.1",
"react-router-dom": "^5.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 AppRouting from './AppRouting';
import SnackbarNotification from './components/SnackbarNotification';
import { SnackbarProvider } from 'notistack';
import CssBaseline from '@material-ui/core/CssBaseline';
import blueGrey from '@material-ui/core/colors/blueGrey';
@ -42,13 +42,13 @@ class App extends Component {
return (
<StylesProvider jss={jss}>
<MuiThemeProvider theme={theme}>
<SnackbarNotification>
<SnackbarProvider maxSnack={3}>
<CssBaseline />
<Switch>
<Route exact path="/unauthorized" component={unauthorizedRedirect} />
<Route component={AppRouting} />
</Switch>
</SnackbarNotification>
</SnackbarProvider>
</MuiThemeProvider>
</StylesProvider>
);

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

@ -5,12 +5,12 @@ import {
import { withAuthenticationContext } from './Context.js';
import * as Authentication from './Authentication';
import { withNotifier } from '../components/SnackbarNotification';
import { withSnackbar } from 'notistack';
export class AuthenticatedRoute extends React.Component {
render() {
const { raiseNotification, authenticationContext, component: Component, ...rest } = this.props;
const { enqueueSnackbar, authenticationContext, component: Component, ...rest } = this.props;
const { location } = this.props;
const renderComponent = (props) => {
if (authenticationContext.isAuthenticated()) {
@ -19,7 +19,9 @@ export class AuthenticatedRoute extends React.Component {
);
}
Authentication.storeLoginRedirect(location);
raiseNotification("Please log in to continue.");
enqueueSnackbar("Please log in to continue.", {
variant: 'info',
});
return (
<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 history from '../history'
import { withNotifier } from '../components/SnackbarNotification';
import { withSnackbar } from 'notistack';
import { VERIFY_AUTHORIZATION_ENDPOINT } from '../constants/Endpoints';
import { ACCESS_TOKEN, authorizedFetch } from './Authentication';
import { AuthenticationContext } from './Context';
@ -80,7 +80,9 @@ class AuthenticationWrapper extends React.Component {
this.setState({ initialized: true, context: { ...this.state.context, user } });
}).catch(error => {
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 {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
@ -90,7 +92,11 @@ class AuthenticationWrapper extends React.Component {
signIn = (accessToken) => {
try {
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) {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
throw new Error("Failed to parse JWT " + err.message);
@ -105,7 +111,9 @@ class AuthenticationWrapper extends React.Component {
user: undefined
}
});
this.props.raiseNotification("You have signed out.");
this.props.enqueueSnackbar("You have signed out.", {
variant: 'success',
});
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 { withNotifier } from '../components/SnackbarNotification';
import { withSnackbar } from 'notistack';
import { redirectingAuthorizedFetch } from '../authentication/Authentication';
/*
* 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) => {
return withNotifier(
return withSnackbar(
class extends React.Component {
constructor(props) {
@ -51,7 +51,9 @@ export const restComponent = (endpointUrl, FormComponent) => {
})
.then(json => { this.setState({ data: json, fetched: true }) })
.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 });
});
}
@ -72,10 +74,14 @@ export const restComponent = (endpointUrl, FormComponent) => {
throw Error("Invalid status code: " + response.status);
})
.then(json => {
this.props.raiseNotification("Changes successfully applied.");
this.props.enqueueSnackbar("Changes successfully applied.", {
variant: 'success',
});
this.setState({ data: json, fetched: true });
}).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 });
});
}

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 { APP_NAME } from '../constants/App';
import ForwardIcon from '@material-ui/icons/Forward';
import { withNotifier } from '../components/SnackbarNotification';
import { withSnackbar } from 'notistack';
import { SIGN_IN_ENDPOINT } from '../constants/Endpoints';
import { withAuthenticationContext } from '../authentication/Context';
import PasswordValidator from '../components/PasswordValidator';
@ -84,7 +84,9 @@ class SignInPage extends Component {
authenticationContext.signIn(json.access_token);
})
.catch(error => {
this.props.raiseNotification(error.message);
this.props.enqueueSnackbar(error.message, {
variant: 'warning',
});
this.setState({ processing: false });
});
};
@ -132,5 +134,5 @@ class SignInPage extends Component {
}
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 SectionContent from '../components/SectionContent';
import WiFiNetworkSelector from '../forms/WiFiNetworkSelector';
import {withNotifier} from '../components/SnackbarNotification';
import { withSnackbar } from 'notistack';
import { redirectingAuthorizedFetch } from '../authentication/Authentication';
const NUM_POLLS = 10
@ -46,7 +46,9 @@ class WiFiNetworkScanner extends Component {
}
throw Error("Scanning for networks returned unexpected response code: " + response.status);
}).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 });
});
}
@ -92,7 +94,9 @@ class WiFiNetworkScanner extends Component {
})
.catch(error => {
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 });
}
});
@ -118,4 +122,4 @@ WiFiNetworkScanner.propTypes = {
selectNetwork: PropTypes.func.isRequired
};
export default withNotifier(WiFiNetworkScanner);
export default withSnackbar(WiFiNetworkScanner);