From caae81f87f8b62c90dc76df0fe14fdf3b97e6aa8 Mon Sep 17 00:00:00 2001 From: wildscotsmen Date: Sun, 2 Dec 2018 21:13:16 -0500 Subject: [PATCH 1/2] Theme changing now sets a cookie! This means that the chosen theme persists between sessions. --- package-lock.json | 54 +++++++++++++++++ package.json | 1 + src/App.js | 3 + src/components/Main.js | 130 ++++++++++++++++++++++++++++------------- 4 files changed, 147 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index da5811d..130377c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 13674b8..af07e07 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index bd3131f..43fe772 100644 --- a/src/App.js +++ b/src/App.js @@ -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 ( +
+ ); } } diff --git a/src/components/Main.js b/src/components/Main.js index 15700cf..012d14a 100644 --- a/src/components/Main.js +++ b/src/components/Main.js @@ -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({ - typography: { - useNextVariants: true, - }, - palette: { - type: 'light' + componentWillMount() { + const { cookies } = this.props; + + var newName, newTheme, newChecked; + + if (cookies.get('themeName') === undefined) { + newName = 'light' + newTheme = createMuiTheme({ + typography: { + useNextVariants: true, + }, + palette: { + type: 'light' + } + }); + 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; } - }), - themeName: 'light', - themeChecked: true - }; + } + + 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({ - typography: { - useNextVariants: true, - }, - palette: { - type: 'dark' - } - }) - }) + newTheme = createMuiTheme({ + typography: { + useNextVariants: true, + }, + palette: { + type: 'dark' + } + }); + + newName = 'dark'; } else { - this.setState({ - themeName: 'light', - theme: createMuiTheme({ - typography: { - useNextVariants: true, - }, - palette: { - type: 'light' - } - }) - }) + 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); \ No newline at end of file +export default withStyles(styles, { withTheme: true })(withCookies(ResponsiveDrawer)); \ No newline at end of file From 0ac722ed115db49e4dd692e68032dd1171139811 Mon Sep 17 00:00:00 2001 From: wildscotsmen Date: Sun, 2 Dec 2018 21:15:24 -0500 Subject: [PATCH 2/2] Fixed formatting in App.js. --- src/App.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/App.js b/src/App.js index 43fe772..945adb3 100644 --- a/src/App.js +++ b/src/App.js @@ -11,10 +11,10 @@ class App extends Component { render() { return ( -
-
-
- +
+
+
+ ); } }