88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
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
|