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

63
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 <Day className={props.dark ? null : 'active'} />
id="toggle" <span className={styles.checkboxFake} />
className={styles.checkboxContainer} <Night className={props.dark ? 'active' : null} />
aria-live="assertive" </span>
> )
<Day className={props.dark ? null : 'active'} />
<span className={styles.checkboxFake} />
<Night className={props.dark ? 'active' : null} />
</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,22 +50,20 @@ 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> <input
<input onChange={this.handleChange}
onChange={this.handleChange} type="checkbox"
type="checkbox" name="toggle"
name="toggle" value="toggle"
value="toggle" aria-describedby="toggle"
aria-describedby="toggle" checked={this.state.dark}
checked={this.state.dark} />
/> <ThemeToggle dark={this.state.dark} />
<ThemeToggle dark={this.state.dark} /> </label>
</label> </aside>
</aside>
</FadeIn>
</Fragment> </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 { 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 {
<header constructor(props) {
className={ super(props)
isHomepage ? `${styles.header}` : `${styles.header} ${styles.minimal}` }
}
>
<ThemeSwitch />
<FadeIn>
<Link className={styles.header__link} to={'/'}>
<LogoUnit meta={meta} minimal={!isHomepage} />
</Link>
</FadeIn>
<Networks meta={meta} hide={!isHomepage} /> render() {
const { isHomepage, meta } = this.props
<Availability hide={!isHomepage && !meta.availability.status} /> return (
</header> <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 = { Header.propTypes = {
meta: PropTypes.object, isHomepage: PropTypes.bool,
isHomepage: PropTypes.bool meta: PropTypes.object
} }
export default Header export default Header