Theme changing now sets a cookie! This means that the chosen theme persists between sessions.
This commit is contained in:
wildscotsmen
parent
85bc95cd54
commit
caae81f87f
|
|
@ -917,6 +917,11 @@
|
|||
"integrity": "sha512-FhlMa34NHp9K5MY1Uz8yb+ZvuX0pnvn3jScRSNAb75KHGB8d3rEU6hqMs3Z2vjuytcMfRg6c5CHMc3wtYyD2/A==",
|
||||
"optional": true
|
||||
},
|
||||
"@types/cookie": {
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.3.2.tgz",
|
||||
"integrity": "sha512-aHQA072E10/8iUQsPH7mQU/KUyQBZAGzTVRCUvnSz8mSvbrYsP4xEO2RSA0Pjltolzi0j8+8ixrm//Hr4umPzw=="
|
||||
},
|
||||
"@types/form-data": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/form-data/-/form-data-2.2.1.tgz",
|
||||
|
|
@ -936,6 +941,14 @@
|
|||
"@types/request": "*"
|
||||
}
|
||||
},
|
||||
"@types/hoist-non-react-statics": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
|
||||
"integrity": "sha512-3wTz66vV+WatOAjMST+hKCmo01KYPFgnsu+QeLcn0FuwPCoymX6aj1a4RvFCdVsfh2m0hfTPhE/zTv4M28ho1Q==",
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/jss": {
|
||||
"version": "9.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/jss/-/jss-9.5.5.tgz",
|
||||
|
|
@ -961,6 +974,11 @@
|
|||
"resolved": "https://registry.npmjs.org/@types/node/-/node-8.10.36.tgz",
|
||||
"integrity": "sha512-SL6KhfM7PTqiFmbCW3eVNwVBZ+88Mrzbuvn9olPsfv43mbiWaFY+nRcz/TGGku0/lc2FepdMbImdMY1JrQ+zbw=="
|
||||
},
|
||||
"@types/object-assign": {
|
||||
"version": "4.0.30",
|
||||
"resolved": "http://registry.npmjs.org/@types/object-assign/-/object-assign-4.0.30.tgz",
|
||||
"integrity": "sha1-iUk3HVqZ9Dge4PHfCpt6GH4H5lI="
|
||||
},
|
||||
"@types/prop-types": {
|
||||
"version": "15.5.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.5.5.tgz",
|
||||
|
|
@ -12494,6 +12512,26 @@
|
|||
"schedule": "^0.4.0"
|
||||
}
|
||||
},
|
||||
"react-cookie": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/react-cookie/-/react-cookie-3.0.7.tgz",
|
||||
"integrity": "sha512-c4lGOqIPC54kUocE7kbuqZNeIdXtZGzXQMA7BSWhaJ/5tWeoW5fJ7mF/pR+rU5fYDF9kktTHCIbovwSsNYblOg==",
|
||||
"requires": {
|
||||
"@types/hoist-non-react-statics": "^3.0.1",
|
||||
"hoist-non-react-statics": "^3.0.0",
|
||||
"universal-cookie": "^3.0.7"
|
||||
},
|
||||
"dependencies": {
|
||||
"hoist-non-react-statics": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.0.tgz",
|
||||
"integrity": "sha512-3IascCRfaEkbmHjJnUxWSspIUE1okLPjGTMVXW8zraUo1t3yg1BadKAxAGILHwgoBzmMnzrgeeaDGBvpuPz6dA==",
|
||||
"requires": {
|
||||
"react-is": "^16.3.2"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-dev-utils": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-5.0.2.tgz",
|
||||
|
|
@ -12577,6 +12615,11 @@
|
|||
"resize-observer-polyfill": "^1.5.0"
|
||||
}
|
||||
},
|
||||
"react-is": {
|
||||
"version": "16.6.3",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.6.3.tgz",
|
||||
"integrity": "sha512-u7FDWtthB4rWibG/+mFbVd5FvdI20yde86qKGx4lVUTWmPlSWQ4QxbBIrrs+HnXGbxOUlUzTAP/VDmvCwaP2yA=="
|
||||
},
|
||||
"react-jss": {
|
||||
"version": "8.6.1",
|
||||
"resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
|
||||
|
|
@ -14675,6 +14718,17 @@
|
|||
"crypto-random-string": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"universal-cookie": {
|
||||
"version": "3.0.7",
|
||||
"resolved": "https://registry.npmjs.org/universal-cookie/-/universal-cookie-3.0.7.tgz",
|
||||
"integrity": "sha512-wfZRbaEzFTDbP64fzTfGDfokB3pWkDNjtsuRAZQWaiuj/Up+3/0AEvN4IhFHPK24iGNtGJ6PNIxv1GQzMSiyMw==",
|
||||
"requires": {
|
||||
"@types/cookie": "^0.3.1",
|
||||
"@types/object-assign": "^4.0.30",
|
||||
"cookie": "^0.3.1",
|
||||
"object-assign": "^4.1.0"
|
||||
}
|
||||
},
|
||||
"universal-deep-strict-equal": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/universal-deep-strict-equal/-/universal-deep-strict-equal-1.2.2.tgz",
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
"material-ui-icons": "^1.0.0-beta.36",
|
||||
"moment": "^2.22.2",
|
||||
"react": "^16.5.1",
|
||||
"react-cookie": "^3.0.7",
|
||||
"react-dom": "^16.5.1",
|
||||
"react-image-gallery": "^0.8.12",
|
||||
"react-quiz-component": "0.2.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import Main from './components/Main';
|
||||
import './App.css';
|
||||
import { CookiesProvider } from 'react-cookie';
|
||||
|
||||
class App extends Component {
|
||||
componentDidMount() {
|
||||
|
|
@ -9,9 +10,11 @@ class App extends Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<CookiesProvider>
|
||||
<div>
|
||||
<Main/>
|
||||
</div>
|
||||
</CookiesProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import PropTypes, { instanceOf } from 'prop-types';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import Drawer from '@material-ui/core/Drawer';
|
||||
import AppBar from '@material-ui/core/AppBar';
|
||||
|
|
@ -35,6 +35,7 @@ import Collapse from '@material-ui/core/Collapse';
|
|||
import FlameLinkCollectionGallery from '../components/FlameLinkCollectionGallery';
|
||||
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
|
||||
import Switch from '@material-ui/core/Switch';
|
||||
import { withCookies, Cookies } from 'react-cookie';
|
||||
|
||||
const drawerWidth = 240;
|
||||
|
||||
|
|
@ -74,22 +75,60 @@ const styles = theme => ({
|
|||
});
|
||||
|
||||
class ResponsiveDrawer extends React.Component {
|
||||
state = {
|
||||
mobileOpen: false,
|
||||
key: 'Home',
|
||||
open: false,
|
||||
open2: false,
|
||||
theme: createMuiTheme({
|
||||
componentWillMount() {
|
||||
const { cookies } = this.props;
|
||||
|
||||
var newName, newTheme, newChecked;
|
||||
|
||||
if (cookies.get('themeName') === undefined) {
|
||||
newName = 'light'
|
||||
newTheme = createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'light'
|
||||
}
|
||||
}),
|
||||
themeName: 'light',
|
||||
themeChecked: true
|
||||
};
|
||||
});
|
||||
newChecked = true;
|
||||
|
||||
cookies.set('themeName', newName, { path: '/' });
|
||||
} else {
|
||||
if (cookies.get('themeName') === 'light') {
|
||||
newName = 'light'
|
||||
newTheme = createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'light'
|
||||
}
|
||||
});
|
||||
newChecked = true;
|
||||
} else {
|
||||
newName = 'dark'
|
||||
newTheme = createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'dark'
|
||||
}
|
||||
});
|
||||
newChecked = false;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
mobileOpen: false,
|
||||
key: 'Home',
|
||||
open: false,
|
||||
open2: false,
|
||||
theme: newTheme,
|
||||
themeName: newName,
|
||||
themeChecked: newChecked
|
||||
});
|
||||
}
|
||||
|
||||
handleDrawerToggle = () => {
|
||||
this.setState(state => ({ mobileOpen: !state.mobileOpen }));
|
||||
|
|
@ -110,32 +149,42 @@ class ResponsiveDrawer extends React.Component {
|
|||
}
|
||||
|
||||
handleChange = name => event => {
|
||||
const { cookies } = this.props;
|
||||
|
||||
this.setState({ [name]: event.target.checked });
|
||||
|
||||
var newTheme, newName;
|
||||
|
||||
if (this.state.themeName === 'light') {
|
||||
this.setState({
|
||||
themeName: 'dark',
|
||||
theme: createMuiTheme({
|
||||
newTheme = createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'dark'
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
newName = 'dark';
|
||||
} else {
|
||||
this.setState({
|
||||
themeName: 'light',
|
||||
theme: createMuiTheme({
|
||||
newTheme = createMuiTheme({
|
||||
typography: {
|
||||
useNextVariants: true,
|
||||
},
|
||||
palette: {
|
||||
type: 'light'
|
||||
}
|
||||
})
|
||||
})
|
||||
});
|
||||
|
||||
newName = 'light';
|
||||
}
|
||||
|
||||
this.setState({
|
||||
themeName: newName,
|
||||
theme: newTheme
|
||||
})
|
||||
|
||||
cookies.set('themeName', newName, { path: '/' });
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -297,10 +346,9 @@ class ResponsiveDrawer extends React.Component {
|
|||
|
||||
ResponsiveDrawer.propTypes = {
|
||||
classes: PropTypes.object.isRequired,
|
||||
// Injected by the documentation to work in an iframe.
|
||||
// You won't need it on your project.
|
||||
container: PropTypes.object,
|
||||
theme: PropTypes.object.isRequired,
|
||||
cookies: instanceOf(Cookies).isRequired,
|
||||
};
|
||||
|
||||
export default withStyles(styles, { withTheme: true })(ResponsiveDrawer);
|
||||
export default withStyles(styles, { withTheme: true })(withCookies(ResponsiveDrawer));
|
||||
Loading…
Reference in New Issue