Changing the API around a bit to be less annoying

README.md

@@ -16,11 +16,11 @@ Returns
 {
     "availability": [
         {
-            "name": "string",
+            "month": 6,
+            "day": 1,
             "availability": [
                 {
-                    "month": 6,
-                    "day": 1,
+                    "name": "string",
                     "status": "yes/maybe/no/unknown"
                 }
             ]

client/src/App.js

@@ -1,11 +1,38 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { getHealth, getAvailability, setAvailability } from './api';
 
+const NameForm = ({ onNameSet }) => {
+  const [name, setName] = useState("");
+
+  return (
+    <div>
+      <input type="text" onChange={({ target }) => setName(target.value)}></input>
+      <button disabled={name === ""} onClick={onNameSet}>Set Name</button>
+    </div>
+  )
+}
+
+
+
 function App() {
+  const [name, setName] = useState(null);
+  const [avail, setAvail] = useState(null);
+  useEffect(() => { getAvailability().then(setAvail) }, []);
+
+
+  if (name === null) {
+    return <NameForm onNameSet={setName} />
+  }
+
+  if (avail === null) {
+    return <span>Loading...</span>
+  }
+
   return (
     <div>
+      {JSON.stringify(avail)}
       <button onClick={() => getHealth().then(console.log)}>Get Status</button>
-      <button onClick={() => getAvailability().then(console.log)}>Get Avail</button>
+      <button onClick={() => getAvailability().then(setAvail)}>Get Avail</button>
       <button onClick={() => setAvailability({})}>Set Avail</button>
     </div>
   );

client/src/api.js

@@ -19,7 +19,7 @@ export const getAvailability = async () => {
   return await res.json();
 }
 
-export const setAvailability = async (availability) => {
+export const setAvailability = async (name, availability) => {
   const res = await fetch(
     BASE_URL + "/availability", 
     {
@@ -27,7 +27,7 @@ export const setAvailability = async (availability) => {
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(availability),
+      body: JSON.stringify({ name, availability }),
     }
   );
   if (!res.ok) {

server/app.py

@@ -47,9 +47,10 @@ def status():
             "lastUpdated": last_update.isoformat(),
             "availability": [
                 {
-                    "name": name,
+                    "month": month,
+                    "day": day,
                     "availability": avail,
-                } for name, avail in db.items()
+                } for (month, day), avail in db.items()
             ],
         })