very messy implementation of the actual calendar layout

client/src/App.js

@@ -6,8 +6,18 @@ const NameForm = ({ onNameSet }) => {
 
   return (
     <div>
-      <input type="text" onChange={({ target }) => setName(target.value)}></input>
-      <button disabled={name === ""} onClick={onNameSet}>Set Name</button>
+      <form onSubmit={onNameSet}>
+        <input 
+          type="text" 
+          onChange={({ target }) => setName(target.value)}
+          value={name}
+        />
+        <input 
+          disabled={name === ""} 
+          type="submit" 
+          value="Submit"
+        />
+      </form>
     </div>
   )
 }
@@ -24,12 +34,24 @@ const pad = num => {
   return snum
 }
 
-const Tile = ({ month, day, availability, onClick }) => (
-  <div onClick={onClick}>
+const Tile = ({ user, month, day, availability, onClick }) => (
+  <div 
+    onClick={onClick}
+    style={{
+      display: "flex",
+      flexFlow: "column nowrap",
+      width: "5em",
+      height: "5em",
+      border: "1px solid black",
+      margin: "2px 2px 2px 2px",
+      backgroundColor: colors[availability.filter(({ name }) => name === user)[0]] || "#fff",
+    }}
+  >
     <span>{pad(month)}/{pad(day)}</span>
     {
       availability
         .filter(({ status }) => status && status !== "unknown")
+        .filter(({ name }) => name !== user)
         .map(({ name, status }) => (
           <span 
             key={name} 
@@ -43,6 +65,14 @@ const Tile = ({ month, day, availability, onClick }) => (
 );
 
 
+const chunk = (arr, len) => {
+  const chunks = [];
+  for (let i = 0; i < arr.length;) {
+    chunks.push(arr.slice(i, i += len));
+  }
+  return chunks;
+}
+
 
 function App() {
   const [name, setName] = useState(null);
@@ -59,14 +89,36 @@ 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)}
+    <div
+      style={{
+        display: "flex",
+        flexFlow: "column nowrap",
+      }}
+    >
+      {
+        chunk(avail.availability, 7).map((row, ind) => (
+          <div
+            key={ind} 
+            style={{
+              display: "flex",
+              flexFlow: "row nowrap",
+              alignItems: "center",
+            }}
+          >
+            <div>WEEK</div>
+            <div 
+              style={{
+                display: "flex",
+                flexFlow: "row nowrap",
+              }}
+            >
+              {
+                row.map(item => <Tile 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>