From c63af48594df3bd148bb8e8bd75fe7d28788d4a6 Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Thu, 12 Dec 2019 21:56:13 +0100
Subject: [PATCH] add 'loading' as initial room state

---
 src/pages/treff.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/pages/treff.js b/src/pages/treff.js
index ad7a82f..a76c944 100644
--- a/src/pages/treff.js
+++ b/src/pages/treff.js
@@ -1,14 +1,20 @@
 import React, { useEffect, useState } from "react"
 import Layout from "../components/layout"
 
+const roomStateData = {
+  loading: { text: "lade…", color: "white" },
+  open: { text: "OFFEN", color: "forestgreen" },
+  closed: { text: "GESCHLOSSEN", color: "firebrick" },
+}
+
 export default () => {
-  const [opened, setOpened] = useState(false)
+  const [openState, setOpenState] = useState("loading")
 
   useEffect(() => {
     async function fetchState() {
       const response = await fetch("https://status.ctdo.de/api/simple/v2")
       const json = await response.json()
-      setOpened(json.state)
+      setOpenState(json.state ? "open" : "closed")
     }
     fetchState()
   }, [])
@@ -17,8 +23,8 @@ export default () => {
     <Layout>
       <h2>
         Raumstatus:{" "}
-        <span style={{ color: opened ? `forestgreen` : `firebrick` }}>
-          {opened ? "OFFEN" : "GESCHLOSSEN"}
+        <span style={{ color: roomStateData[openState].color }}>
+          {roomStateData[openState].text}
         </span>
       </h2>
     </Layout>