This might literally be some of the sloppiest code I've ever written, but it *does* work

client/src/App.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
-import { getHealth, getAvailability, setAvailability } from './api';
+import { getAvailability } from './api';
 
 const NameForm = ({ onNameSet }) => {
   const [name, setName] = useState("");
 
   return (
     <div>
-      <form onSubmit={onNameSet}>
+      <form onSubmit={() => onNameSet(name)}>
         <input 
           type="text" 
           onChange={({ target }) => setName(target.value)}
@@ -28,6 +28,13 @@ const colors = {
   maybe: "#ff0",
 }
 
+const nextState = {
+  yes: "no",
+  no: "maybe",
+  maybe: "unknown",
+  unknown: "yes",
+}
+
 const pad = num => {
   let snum = "" + num
   if (snum.length === 1) snum = "0" + snum
@@ -44,7 +51,7 @@ const Tile = ({ user, month, day, availability, onClick }) => (
       height: "5em",
       border: "1px solid black",
       margin: "2px 2px 2px 2px",
-      backgroundColor: colors[availability.filter(({ name }) => name === user)[0]] || "#fff",
+      backgroundColor: colors[availability.filter(({ name }) => name === user)[0]?.status] || "#fff",
     }}
   >
     <span>{pad(month)}/{pad(day)}</span>
@@ -73,11 +80,25 @@ const chunk = (arr, len) => {
   return chunks;
 }
 
+const advanceDay = (availability, name, month, day) => availability
+  .map(item => {
+    if (item.month === month && item.day === day) {
+      const ind = item.availability.findIndex(item => item.name === name)
+      if (ind === -1) {
+        return { ...item, availability: [...item.availability, { name, status: nextState.unknown }]}
+      }
+      const status = nextState[item.availability[ind].status];
+      return { ...item, availability: [...item.availability.slice(0, ind), { name, status }, ...item.availability.slice(ind + 1)]};
+    }
+    return item;
+  });
+
+const advanceWeek = (availability, name, dates) => dates.reduce((acc, { month, day }) => advanceDay(acc, name, month, day), availability)
 
 function App() {
   const [name, setName] = useState(null);
   const [avail, setAvail] = useState(null);
-  useEffect(() => { getAvailability().then(setAvail) }, []);
+  useEffect(() => { getAvailability().then(({availability}) => setAvail(availability)) }, []);
 
 
   if (name === null) {
@@ -95,8 +116,9 @@ function App() {
         flexFlow: "column nowrap",
       }}
     >
+      <span>I will plan this vacation if it kills me.</span>
       {
-        chunk(avail.availability, 7).map((row, ind) => (
+        chunk(avail, 7).map((row, ind) => (
           <div
             key={ind} 
             style={{
@@ -105,7 +127,11 @@ function App() {
               alignItems: "center",
             }}
           >
-            <div>WEEK</div>
+            <div
+              onClick={() => setAvail(advanceWeek(avail, name, row))}
+            >
+              WEEK
+            </div>
             <div 
               style={{
                 display: "flex",
@@ -113,15 +139,12 @@ function App() {
               }}
             >
               {
-                row.map(item => <Tile key={item.day} user={name} {...item}/>)
+                row.map(item => <Tile onClick={() => setAvail(advanceDay(avail, name, item.month, item.day))} key={item.day} user={name} {...item}/>)
               }
             </div>
           </div>
         ))
       }
-      <button onClick={() => getHealth().then(console.log)}>Get Status</button>
-      <button onClick={() => getAvailability().then(setAvail)}>Get Avail</button>
-      <button onClick={() => setAvailability({})}>Set Avail</button>
     </div>
   );
 }