homepage/src/components/roomState.js

import React, { useEffect, useState } from 'react'

const roomStateData = {
  loading: { text: '...', color: 'white' },
  open: { text: 'offen', color: '#00aa00' },
  closed: { text: 'geschlossen', color: '#ee3333' },
  error: { text: 'laut API kaputt', color: '#ee3333' },
}

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'))
  }, [])

  return (
    <a
      href="https://status.ctdo.de/"
      style={{ color: roomStateData[openState].color }}
    >
      {roomStateData[openState].text}
    </a>
  )
}