import React, { useEffect, useState } from 'react' import { StaticImage } from 'gatsby-plugin-image' const roomStateData = { loading: { text: '...', color: 'white' }, open: { text: 'offen', color: '#00aa00' }, closed: { text: 'geschlossen', color: '#ee3333' }, error: { text: 'laut API kaputt', color: '#ee3333' }, } function GetRightImage(openState) { if(openState === 'loading') { return } if(openState === 'open'){ return } if(openState === 'closed'){ return } if(openState === 'error'){ return } } export default function RoomState() { const [openState, setOpenState] = useState('loading') useEffect(() => { fetch('https://status.ctdo.de/api/simple/v2') .then((response) => { if (response.status >= 200 && response.status <= 299) { return response } else { throw new Error() } }) .then((response) => response.json()) .then((json) => setOpenState(json.state ? 'open' : 'closed')) .catch(() => setOpenState('error')) }, []) const isSSR = typeof window === 'undefined' const useIMG = false return ( {isSSR ? '' : useIMG ? GetRightImage(openState) : roomStateData[openState].text} ) }