m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-22 17:23:22 +01:00
Code Releases Activity

persist theme switch state

Browse Source 
* set initial state based on local storage
* set local storage when switch is clicked
* continue switrching between day/night, but only if no local storage key is found
This commit is contained in:
Matthias Kretschmann 2018-06-24 18:20:34 +02:00
parent e9375f9d7f
commit 43cadc9bd4
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 60 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/molecules/ThemeSwitch.jsx
View File

@ -1,34 +1,36 @@
import React, { PureComponent, Fragment } from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import { FadeIn } from '../atoms/Animations'
import Day from '../svg/Day'
import Night from '../svg/Night'
import styles from './ThemeSwitch.module.scss'
const ThemeToggle = props => {
return (
<span
id="toggle"
className={styles.checkboxContainer}
aria-live="assertive"
>
<Day className={props.dark ? null : 'active'} />
<span className={styles.checkboxFake} />
<Night className={props.dark ? 'active' : null} />
</span>
)
}
const ThemeToggle = props => (
<span id="toggle" className={styles.checkboxContainer} aria-live="assertive">
<Day className={props.dark ? null : 'active'} />
<span className={styles.checkboxFake} />
<Night className={props.dark ? 'active' : null} />
</span>
)
class ThemeSwitch extends PureComponent {
constructor(props) {
super(props)
this.state = { dark: false }
if (localStorage.getItem('dark') === 'true') {
this.state = { dark: true }
} else if (localStorage.getItem('dark') === 'false') {
this.state = { dark: null }
} else {
this.state = { dark: null }
}
}
componentDidMount() {
const now = new Date().getHours()
const darkLocalStorage = localStorage.getItem('dark')
if (darkLocalStorage) return
if (now >= 19 || now <= 7) {
this.setState({ dark: true })
@ -39,6 +41,7 @@ class ThemeSwitch extends PureComponent {
handleChange = () => {
this.setState({ dark: !this.isDark() })
localStorage.setItem('dark', !this.isDark())
}
render() {
@ -47,22 +50,20 @@ class ThemeSwitch extends PureComponent {
<Helmet>
<body className={this.state.dark ? 'dark' : null} />
</Helmet>
<FadeIn>
<aside className={styles.themeSwitch}>
<label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span>
<input
onChange={this.handleChange}
type="checkbox"
name="toggle"
value="toggle"
aria-describedby="toggle"
checked={this.state.dark}
/>
<ThemeToggle dark={this.state.dark} />
</label>
</aside>
</FadeIn>
<aside className={styles.themeSwitch}>
<label className={styles.checkbox}>
<span className={styles.label}>Toggle Night Mode</span>
<input
onChange={this.handleChange}
type="checkbox"
name="toggle"
value="toggle"
aria-describedby="toggle"
checked={this.state.dark}
/>
<ThemeToggle dark={this.state.dark} />
</label>
</aside>
</Fragment>
)
}

48
src/components/organisms/Header.jsx
View File

@ -1,35 +1,43 @@
import React from 'react'
import React, { PureComponent } from 'react'
import { Link } from 'gatsby'
import PropTypes from 'prop-types'
import { FadeIn } from '../atoms/Animations'
import Networks from '../molecules/Networks'
import Availability from '../molecules/Availability'
import ThemeSwitch from '../molecules/ThemeSwitch'
import LogoUnit from '../atoms/LogoUnit'
import styles from './Header.module.scss'
const Header = ({ meta, isHomepage }) => (
<header
className={
isHomepage ? `${styles.header}` : `${styles.header} ${styles.minimal}`
}
>
<ThemeSwitch />
<FadeIn>
<Link className={styles.header__link} to={'/'}>
<LogoUnit meta={meta} minimal={!isHomepage} />
</Link>
</FadeIn>
class Header extends PureComponent {
constructor(props) {
super(props)
}
<Networks meta={meta} hide={!isHomepage} />
render() {
const { isHomepage, meta } = this.props
<Availability hide={!isHomepage && !meta.availability.status} />
</header>
)
return (
<header
className={
isHomepage ? `${styles.header}` : `${styles.header} ${styles.minimal}`
}
>
<ThemeSwitch />
<Link className={styles.header__link} to={'/'}>
<LogoUnit meta={meta} minimal={!isHomepage} />
</Link>
<Networks meta={meta} hide={!isHomepage} />
<Availability hide={!isHomepage && !meta.availability.status} />
</header>
)
}
}
Header.propTypes = {
meta: PropTypes.object,
isHomepage: PropTypes.bool
isHomepage: PropTypes.bool,
meta: PropTypes.object
}
export default Header