Merge pull request #64 from alDuncanson/feature/theme-cookies

Theme cookies

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",

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",

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 (
-        <div>
+            <CookiesProvider>
-            <Main/>
+                <div>
-        </div>
+                    <Main />
+                </div>
+            </CookiesProvider>
         );
     }
 }

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 = {
+    componentWillMount() {
-        mobileOpen: false,
+        const { cookies } = this.props;
-        key: 'Home',
+
-        open: false,
+        var newName, newTheme, newChecked;
-        open2: false,
+
-        theme: createMuiTheme({
+        if (cookies.get('themeName') === undefined) {
-            typography: {
+            newName = 'light'
-                useNextVariants: true,
+            newTheme = createMuiTheme({
-            },
+                typography: {
-            palette: {
+                    useNextVariants: true,
-                type: 'light'
+                },
+                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({
+            newTheme = createMuiTheme({
-                themeName: 'dark',
+                typography: {
-                theme: createMuiTheme({
+                    useNextVariants: true,
-                    typography: {
+                },
-                        useNextVariants: true,
+                palette: {
-                    },
+                    type: 'dark'
-                    palette: {
+                }
-                        type: 'dark'
+            });
-                    }
+
-                })
+            newName = 'dark';
-            })
         } else {
-            this.setState({
+            newTheme = createMuiTheme({
-                themeName: 'light',
+                typography: {
-                theme: createMuiTheme({
+                    useNextVariants: true,
-                    typography: {
+                },
-                        useNextVariants: true,
+                palette: {
-                    },
+                    type: 'light'
-                    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));