40 lines
941 B
TypeScript
40 lines
941 B
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function Home() {
|
|
const [count, setCount] = useState<number | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetch("http://localhost:8000/api/counter")
|
|
.then((res) => res.json())
|
|
.then((data) => setCount(data.value));
|
|
}, []);
|
|
|
|
const increment = async () => {
|
|
const res = await fetch("http://localhost:8000/api/counter/increment", {
|
|
method: "POST",
|
|
});
|
|
const data = await res.json();
|
|
setCount(data.value);
|
|
};
|
|
|
|
return (
|
|
<main style={{ padding: "2rem", fontFamily: "system-ui", textAlign: "center" }}>
|
|
<h1 style={{ fontSize: "6rem", margin: "2rem 0" }}>
|
|
{count === null ? "..." : count}
|
|
</h1>
|
|
<button
|
|
onClick={increment}
|
|
style={{
|
|
fontSize: "1.5rem",
|
|
padding: "1rem 2rem",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
+1
|
|
</button>
|
|
</main>
|
|
);
|
|
}
|
|
|