import React from "react" ; import * as styles from "./BackgroundImage.styles" ; import next from "next" ; import { getCurrentSection } from "../lib/time_table" ; class BackgroundImage extends React . Component < { } , any > { private intervalId : NodeJS . Timeout | undefined ; private base_url : string = 'https://source.unsplash.com/featured/1920x1080' ; private args : string = '/?' + 'work,cafe,study,nature,chill,coffee,tea,sea,lake,outdoor,land,spring,summer,fall,winter,hotel' + ',blossom,flower,corridor,door,background,wood,resort,travel,vacation,beach,grass' + ',pencil,pen,eraser,stationary,classic,jazz,lo-fi,fruit,vegetable' ; private unsplash_url = this . base_url + this . args ; updateState ( ) { const now = new Date ( ) ; const currentSection = getCurrentSection ( ) ; if ( currentSection ?. partType !== this . state . lastPartName ) { this . setState ( { srcUrl : this . unsplash_url + ',' + now . getTime ( ) , lastFetchedDate : now . getDate ( ) , lastPartName : currentSection ?. partType , } ) ; } } constructor ( props ) { super ( props ) ; this . state = { srcUrl : this . unsplash_url , lastFetchedDate : new Date ( ) . getDate ( ) , lastPartName : '' , } ; } componentDidMount ( ) { this . intervalId = setInterval ( ( ) => { this . updateState ( ) ; } , 1000 ) ; } componentWillUnmount ( ) { if ( this . intervalId ) { clearInterval ( this . intervalId ) ; } } render ( ) { return ( < div css = { styles . backgroundImage } > < img src = { this . state . srcUrl } alt = "背景画像" / > < /div>); } } export default BackgroundImage ;