1
0
mirror of https://github.com/kremalicious/portfolio.git synced 2024-12-23 01:29:41 +01:00

initial state based on time of day

This commit is contained in:
Matthias Kretschmann 2018-05-10 17:58:45 +02:00
parent d37bafb379
commit c2f62634bc
Signed by: m
GPG Key ID: 606EEEF3C479A91F

View File

@ -7,12 +7,16 @@ class ThemeSwitch extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = { dark: false }
dark: false
}
} }
componentDidMount() { componentDidMount() {
const now = new Date().getHours()
if (now >= 19 || now <= 7) {
this.setState({ dark: true })
}
this.toggleTheme() this.toggleTheme()
} }
@ -22,7 +26,7 @@ class ThemeSwitch extends Component {
isDark = () => this.state.dark === true isDark = () => this.state.dark === true
toggleState = () => { handleChange = () => {
this.setState({ dark: !this.isDark() }) this.setState({ dark: !this.isDark() })
} }
@ -36,11 +40,12 @@ class ThemeSwitch extends Component {
<label className="checkbox"> <label className="checkbox">
<span className="checkbox__label">Toggle Night Mode</span> <span className="checkbox__label">Toggle Night Mode</span>
<input <input
onClick={this.toggleState} 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}
/> />
<span <span
id="toggle" id="toggle"