First version

frontend/src/pages/homepage.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useEffectEvent, useState } from 'react'
+import '../App.css'
+import { getTrackingEntries, loadFoodItems, loadNutritionalKinds, trackFood } from '../api';
+
+function Homepage() {
+  const [foodItems, setFoodItems] = useState([]);
+  useEffect(() => {
+    let ignore = false;
+
+    loadFoodItems().then((resp) => {
+        setFoodItems(resp);
+    })
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  const [nutritionKinds, setNutritionKinds] = useState([]);
+  useEffect(() => {
+    let ignore = false;
+
+    loadNutritionalKinds().then((kinds) => {
+      setNutritionKinds(kinds);
+    })
+
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  const [trackingEntries, setTrackingEntries] = useState([]);
+  useEffect(() => {
+    getTrackingEntries().then((entries) => {
+      console.log(entries);
+      setTrackingEntries(entries);
+    });
+
+    return () => {};
+  }, []);
+
+  const submitFoodTracking = (formData: FormData) => {
+    console.log("Track food");
+
+    const food_id = Number(formData.get("food"));
+    const quantity = Number(formData.get("quantity"));
+    const timestamp = Math.floor(Date.now() / 1000);
+    
+    console.log("Track food", food_id, quantity, timestamp);
+
+    trackFood(food_id, quantity, timestamp).then(() => {
+      console.log("Tracked food")
+    });
+  };
+
+  return (
+    <>
+      <h1>CalFlow</h1>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+
+      <form action={submitFoodTracking}>
+        <select name="food">
+          {
+            foodItems.map((entry) => {
+              return <option value={entry.id} key={entry.id}>{entry.name}</option>
+            })
+          }
+        </select>
+        <input name="quantity" type="number" placeholder="Quantity" />
+        <button type="submit">Track Now</button>
+      </form>
+
+      <ul>
+        {
+          trackingEntries.map((entry) => {
+            const date = new Date(entry.timestamp * 1000);
+            return <li key={entry.id}>[{date.toLocaleString()}] {entry.food_name} ({entry.quantity} {entry.unit_short})</li>
+          })
+        }
+      </ul>
+    </>
+  )
+}
+
+export default Homepage