37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import * as React from "react"
|
|
import secrets from "../../secrets.json"
|
|
import WeatherAndTimeContainer from "../components/WeatherAndTime"
|
|
|
|
function importAll(r) {
|
|
return r.keys().map(r);
|
|
}
|
|
|
|
const images = importAll(require.context('../images/bg/', false, /\.(png|jpe?g|svg)$/));
|
|
|
|
const IndexPage = () => {
|
|
const [currentBg, setCurrentBg] = React.useState(0);
|
|
|
|
React.useEffect(() => {
|
|
// This effect is executed onload
|
|
updateBackground()
|
|
const interval = setInterval(() => {
|
|
updateBackground();
|
|
}, 30 * 60 * 1000);
|
|
|
|
// Return will be executed onunload
|
|
return () => clearInterval(interval);
|
|
}, [])
|
|
|
|
const updateBackground = () => {
|
|
let nextBg = Math.floor(Math.random() * images.length)
|
|
while (nextBg == currentBg) nextBg = Math.floor(Math.random() * images.length)
|
|
setCurrentBg(nextBg)
|
|
}
|
|
|
|
return (<main style={{ backgroundImage: `url(${images[currentBg].default})` }}>
|
|
<WeatherAndTimeContainer apiKey={secrets.weather.apiKey} coords={secrets.weather.coords}/>
|
|
</main>)
|
|
}
|
|
|
|
export default IndexPage
|