m/portfolio
1
0
Fork 0
mirror of https://github.com/kremalicious/portfolio.git synced 2025-01-03 18:35:00 +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

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

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

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