Component for a single tile on the calendar, also fixing the way the db will be mapped to requests

client/src/App.js

@@ -12,6 +12,36 @@ const NameForm = ({ onNameSet }) => {
   )
 }
 
+const colors = {
+  yes: "#0f0",
+  no: "#f00",
+  maybe: "#ff0",
+}
+
+const pad = num => {
+  let snum = "" + num
+  if (snum.length === 1) snum = "0" + snum
+  return snum
+}
+
+const Tile = ({ month, day, availability, onClick }) => (
+  <div onClick={onClick}>
+    <span>{pad(month)}/{pad(day)}</span>
+    {
+      availability
+        .filter(({ status }) => status && status !== "unknown")
+        .map(({ name, status }) => (
+          <span 
+            key={name} 
+            style={{ color: colors[status] }}
+          >
+            {name}
+          </span>
+        ))
+      }
+  </div>
+);
+
 
 
 function App() {
@@ -30,6 +60,12 @@ function App() {
 
   return (
     <div>
+      <Tile month={6} day={1} availability={[
+        { name: "Foo", status: "unknown" },
+        { name: "Bar", status: "yes" },
+        { name: "Baz", status: "no" },
+        { name: "Bix", status: "maybe" },
+      ]}/>
       {JSON.stringify(avail)}
       <button onClick={() => getHealth().then(console.log)}>Get Status</button>
       <button onClick={() => getAvailability().then(setAvail)}>Get Avail</button>

server/app.py

@@ -49,7 +49,10 @@ def status():
                 {
                     "month": month,
                     "day": day,
-                    "availability": avail,
+                    "availability": [{
+                        "name": name,
+                        "status": status,
+                    } for (name, status) in avail.items()],
                 } for (month, day), avail in db.items()
             ],
         })