dark mode in global store

README.md

@@ -40,7 +40,7 @@ The whole [portfolio](https://matthiaskretschmann.com) is a React-based Single P
 
 ### Lighthouse score
 
-[![Lighthouse scores](https://lighthouse.now.sh/?perf=99&pwa=100&a11y=100&bp=100&seo=100)](https://travis-ci.com/kremalicious/portfolio)
+[![Lighthouse scores](https://lighthouse.now.sh/?perf=100&pwa=100&a11y=100&bp=100&seo=100)](https://travis-ci.com/kremalicious/portfolio)
 
 ### One data file to rule all pages
 

src/components/molecules/Availability.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
-import posed, { PoseGroup } from 'react-pose'
+import posed from 'react-pose'
 import { fadeIn } from '../atoms/Transitions'
 import styles from './Availability.module.scss'
 
@@ -32,7 +32,6 @@ export default class Availability extends PureComponent {
 
           return (
             !this.props.hide && (
-              <PoseGroup animateOnMount={true}>
               <Animation
                 className={
                   status
@@ -46,7 +45,6 @@ export default class Availability extends PureComponent {
                   }}
                 />
               </Animation>
-              </PoseGroup>
             )
           )
         }}

src/components/molecules/LogoUnit.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
-import posed, { PoseGroup } from 'react-pose'
+import posed from 'react-pose'
 import { moveInBottom } from '../atoms/Transitions'
 
 import Logo from '../svg/Logo'
@@ -48,7 +48,6 @@ export default class LogoUnit extends PureComponent {
           const { minimal } = this.state
 
           return (
-            <PoseGroup animateOnMount={true}>
             <Animation>
               <div className={minimal ? styles.minimal : styles.logounit}>
                 <Logo className={styles.logounit__logo} />
@@ -60,7 +59,6 @@ export default class LogoUnit extends PureComponent {
                 </p>
               </div>
             </Animation>
-            </PoseGroup>
           )
         }}
       />

src/components/molecules/Networks.jsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import { StaticQuery, graphql } from 'gatsby'
-import posed, { PoseGroup } from 'react-pose'
+import posed from 'react-pose'
 import { moveInTop } from '../atoms/Transitions'
 
 import Email from '../svg/Email'
@@ -81,7 +81,6 @@ export default class Network extends PureComponent {
 
           return (
             !this.props.hide && (
-              <PoseGroup animateOnMount={true}>
               <Animation className={this.state.classes}>
                 {Object.keys(meta.social).map((key, i) => (
                   <a className={styles.link} href={meta.social[key]} key={i}>
@@ -90,7 +89,6 @@ export default class Network extends PureComponent {
                   </a>
                 ))}
               </Animation>
-              </PoseGroup>
             )
           )
         }}

src/components/molecules/ThemeSwitch.jsx

@@ -1,7 +1,8 @@
 import React, { PureComponent, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
-import posed, { PoseGroup } from 'react-pose'
+import posed from 'react-pose'
+import { Consumer } from '../../store/createContext'
 import { fadeIn } from '../atoms/Transitions'
 
 import Day from '../svg/Day'
@@ -22,66 +23,41 @@ ThemeToggle.propTypes = {
   dark: PropTypes.bool
 }
 
-export default class ThemeSwitch extends PureComponent {
+const ThemeToggleInput = ({ dark, toggleDark }) => (
-  state = { dark: null }
-
-  isDark = () => this.state.dark === true
-
-  darkLocalStorageMode = darkLocalStorage => {
-    if (darkLocalStorage === 'true') {
-      this.setState({ dark: true })
-    } else {
-      this.setState({ dark: false })
-    }
-  }
-
-  darkMode = now => {
-    if (!this.isDark() && (now >= 19 || now <= 7)) {
-      this.setState({ dark: true })
-    } else {
-      this.setState({ dark: null })
-    }
-  }
-
-  componentDidMount() {
-    const now = new Date().getHours()
-    const darkLocalStorage = localStorage.getItem('dark')
-
-    if (darkLocalStorage) {
-      this.darkLocalStorageMode(darkLocalStorage)
-    } else {
-      this.darkMode(now)
-    }
-  }
-
-  handleChange = event => {
-    this.setState({ dark: event.target.checked })
-    localStorage.setItem('dark', event.target.checked)
-  }
-
-  render() {
-    return (
-      <Fragment>
-        <Helmet>
-          <body className={this.isDark() ? 'dark' : null} />
-        </Helmet>
-        <PoseGroup animateOnMount={true}>
-          <Animation className={styles.themeSwitch}>
-            <label className={styles.checkbox}>
-              <span className={styles.label}>Toggle Night Mode</span>
   <input
-                onChange={this.handleChange}
+    onChange={toggleDark}
     type="checkbox"
     name="toggle"
     value="toggle"
     aria-describedby="toggle"
-                checked={this.isDark()}
+    checked={dark}
   />
-              <ThemeToggle dark={this.isDark()} />
+)
+
+ThemeToggleInput.propTypes = {
+  dark: PropTypes.bool,
+  toggleDark: PropTypes.func
+}
+
+export default class ThemeSwitch extends PureComponent {
+  render() {
+    return (
+      <Consumer>
+        {({ dark, toggleDark }) => (
+          <Fragment>
+            <Helmet>
+              <body className={dark ? 'dark' : null} />
+            </Helmet>
+            <Animation className={styles.themeSwitch}>
+              <label className={styles.checkbox}>
+                <span className={styles.label}>Toggle Night Mode</span>
+                <ThemeToggleInput dark={dark} toggleDark={toggleDark} />
+                <ThemeToggle dark={dark} />
               </label>
             </Animation>
-        </PoseGroup>
           </Fragment>
+        )}
+      </Consumer>
     )
   }
 }

src/store/provider.jsx

@@ -4,13 +4,53 @@ import { Provider } from './createContext'
 
 export default class AppProvider extends Component {
   state = {
-    dark: false
+    dark: false,
+    toggleDark: () => {
+      this.setState({ dark: !this.state.dark })
+
+      if (this.store) {
+        this.store.setItem('dark', !this.state.dark)
+      }
+    }
   }
 
   static propTypes = {
     children: PropTypes.any.isRequired
   }
 
+  store = typeof localStorage === 'undefined' ? null : localStorage
+
+  darkLocalStorageMode = darkLocalStorage => {
+    if (darkLocalStorage === 'true') {
+      this.setState({ dark: true })
+    } else {
+      this.setState({ dark: false })
+    }
+  }
+
+  darkMode = now => {
+    if (!this.state.dark && (now >= 19 || now <= 7)) {
+      this.setState({ dark: true })
+    } else {
+      this.setState({ dark: null })
+    }
+  }
+
+  checkDark = () => {
+    const now = new Date().getHours()
+    const darkLocalStorage = this.store.getItem('dark')
+
+    if (darkLocalStorage) {
+      this.darkLocalStorageMode(darkLocalStorage)
+    } else {
+      this.darkMode(now)
+    }
+  }
+
+  componentDidMount() {
+    this.checkDark()
+  }
+
   render() {
     return <Provider value={this.state}>{this.props.children}</Provider>
   }