harmony/examples/compose_java_react/app/frontend/src/App.jsx

import { useEffect, useState } from "react";

export default function App() {
  const [entries, setEntries] = useState([]);
  const [note, setNote] = useState("");

  const load = () =>
    fetch("/api/entries")
      .then((r) => r.json())
      .then(setEntries);

  useEffect(() => {
    load();
  }, []);

  const submit = async (e) => {
    e.preventDefault();
    if (!note.trim()) return;
    await fetch("/api/entries", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ note }),
    });
    setNote("");
    load();
  };

  return (
    <main style={{ fontFamily: "sans-serif", maxWidth: 600, margin: "2rem auto" }}>
      <h1>Timesheet</h1>
      <form onSubmit={submit}>
        <input
          value={note}
          onChange={(e) => setNote(e.target.value)}
          placeholder="What did you work on?"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {entries.map((e) => (
          <li key={e.id}>
            {e.note} <small>({e.created_at})</small>
          </li>
        ))}
      </ul>
    </main>
  );
}