Add more client-side structure

e2e/tests/home.spec.js

@@ -18,5 +18,5 @@ test("has Vite.js link", async ({ page }) => {
 test("shows server status", async ({ page }) => {
 	await page.goto("/");
 
-	await expect(page.getByText("Server status: OK")).toBeAttached();
+	await expect(page.getByText("Server says: Hello, world!")).toBeAttached();
 });

web/src/components/ServerStatus.jsx

@@ -1,14 +1,18 @@
 import { useEffect, useState } from "react";
 
+import { getMessage } from "../services/messageService.js";
+
 export default function ServerStatus() {
+	const [loading, setLoading] = useState(false);
 	const [state, setState] = useState();
 
 	useEffect(() => {
-		fetch("/healthz")
-			.then((res) => res.text())
+		setLoading(true);
+		getMessage()
 			.then(setState)
-			.catch((err) => setState(err.message));
+			.catch((err) => console.error(err.message))
+			.finally(() => setLoading(false));
 	}, []);
 
-	return <div>Server status: {state ?? "unknown"}</div>;
+	return loading ? null : <div>Server says: {state ?? "unknown"}</div>;
 }

web/src/components/ServerStatus.test.jsx

@@ -8,22 +8,22 @@ import ServerStatus from "./ServerStatus";
 
 describe("ServerStatus component", () => {
 	it("fetches the right thing", async () => {
-		server.use(http.get("/healthz", () => HttpResponse.text("OK")));
+		server.use(http.get("/api/message", () => HttpResponse.text("hi!")));
 
 		render(<ServerStatus />);
 
 		await expect(
-			screen.findByText(/server status: ok/i),
+			screen.findByText(/server says: hi!/i),
 		).resolves.toBeInTheDocument();
 	});
 
 	it("shows message if server errors", async () => {
-		server.use(http.get("/healthz", () => HttpResponse.error()));
+		server.use(http.get("/api/message", () => HttpResponse.error()));
 
 		render(<ServerStatus />);
 
 		await expect(
-			screen.findByText(/server status: failed to fetch/i),
+			screen.findByText(/server says: unknown/i),
 		).resolves.toBeInTheDocument();
 	});
 });

web/src/pages/Home.test.jsx

@@ -8,7 +8,7 @@ import Home from "./Home.jsx";
 
 describe("Home component", () => {
 	beforeEach(() =>
-		server.use(http.get("/healthz", () => HttpResponse.text("OK"))),
+		server.use(http.get("/api/message", () => HttpResponse.text(""))),
 	);
 
 	it("shows a link", () => {

web/src/services/messageService.js

@@ -0,0 +1,7 @@
+export async function getMessage() {
+	const res = await fetch("/api/message");
+	if (res.ok) {
+		return res.text();
+	}
+	throw new Error(res.statusText);
+}