fetch actual room state

src/pages/treff.js

@@ -1,10 +1,26 @@
-import React from "react"
+import React, { useEffect, useState } from "react"
 import Layout from "../components/layout"
 
-export default () => (
-  <Layout>
-    <h2>
-      Raumtatus <span style={{ color: `green` }}>OFFEN</span>
-    </h2>
-  </Layout>
-)
+export default () => {
+  const [opened, setOpened] = useState(false)
+
+  useEffect(() => {
+    async function fetchState() {
+      const response = await fetch("https://status.ctdo.de/api/simple/v2")
+      const json = await response.json()
+      setOpened(json.state)
+    }
+    fetchState()
+  }, [])
+
+  return (
+    <Layout>
+      <h2>
+        Raumtatus{" "}
+        <span style={{ color: opened ? `green` : `darkred` }}>
+          {opened ? "OFFEN" : "GESCHLOSSEN"}
+        </span>
+      </h2>
+    </Layout>
+  )
+}