40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
|
import { useState, useEffect } from "react";
|
||
|
|
|
||
|
|
// Interface for the response from the server
|
||
|
|
// This should eventually reside in a dedicated file
|
||
|
|
interface CountResponse {
|
||
|
|
pressCount: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Some constants for the button
|
||
|
|
const BUTTON_ENDPOINT = "/api/button";
|
||
|
|
|
||
|
|
// A simple button that counts how many times it's been pressed
|
||
|
|
export function CountButton(): JSX.Element {
|
||
|
|
const [count, setCount] = useState<number>(NaN);
|
||
|
|
|
||
|
|
// useEffect with a [] dependency array runs only once
|
||
|
|
useEffect(() => {
|
||
|
|
async function getCount(): Promise<void> {
|
||
|
|
const response = await fetch(BUTTON_ENDPOINT);
|
||
|
|
const data = (await response.json()) as CountResponse;
|
||
|
|
setCount(data.pressCount);
|
||
|
|
}
|
||
|
|
void getCount();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// This is what runs on every button click
|
||
|
|
function press(): void {
|
||
|
|
async function pressPost(): Promise<void> {
|
||
|
|
await fetch(BUTTON_ENDPOINT, { method: "POST" });
|
||
|
|
const response = await fetch(BUTTON_ENDPOINT);
|
||
|
|
const data = (await response.json()) as CountResponse;
|
||
|
|
setCount(data.pressCount);
|
||
|
|
}
|
||
|
|
void pressPost();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Return some JSX with the button and associated handler
|
||
|
|
return <button onClick={press}>count is {count}</button>;
|
||
|
|
}
|