show error state when room api is not reachable

src/components/roomState.js

@@ -1,21 +1,27 @@
-import React, { useEffect, useState } from "react"
+import React, { useEffect, useState } from 'react'
 
 const roomStateData = {
-  loading: { text: "lade…", color: "white" },
+  loading: { text: '...', color: 'white' },
-  open: { text: "OFFEN", color: "#00aa00" },
+  open: { text: 'offen', color: '#00aa00' },
-  closed: { text: "GESCHLOSSEN", color: "#ee3333" },
+  closed: { text: 'geschlossen', color: '#ee3333' },
+  error: { text: 'laut API kaputt', color: '#ee3333' },
 }
 
 export default () => {
-  const [openState, setOpenState] = useState("loading")
+  const [openState, setOpenState] = useState('loading')
 
   useEffect(() => {
-    async function fetchState() {
+    fetch('https://status.ctdo.de/api/simple/v2')
-      const response = await fetch("https://status.ctdo.de/api/simple/v2")
+      .then(response => {
-      const json = await response.json()
+        if (response.status >= 200 && response.status <= 299) {
-      setOpenState(json.state ? "open" : "closed")
+          return response
+        } else {
+          throw new Error()
         }
-    fetchState()
+      })
+      .then(response => response.json())
+      .then(json => setOpenState(json.state ? 'open' : 'closed'))
+      .catch(() => setOpenState('error'))
   }, [])
 
   return (