52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
// src/routes/index.tsx
|
|
import * as fs from "node:fs";
|
|
import { createFileRoute, useRouter } from "@tanstack/react-router";
|
|
import { createServerFn } from "@tanstack/react-start";
|
|
|
|
const filePath = "count.txt";
|
|
|
|
async function readCount() {
|
|
return parseInt(
|
|
await fs.promises.readFile(filePath, "utf-8").catch(() => "0")
|
|
);
|
|
}
|
|
|
|
const getCount = createServerFn({
|
|
method: "GET",
|
|
}).handler(() => {
|
|
return readCount();
|
|
});
|
|
|
|
const updateCount = createServerFn({ method: "POST" })
|
|
.validator((d: number) => d)
|
|
.handler(async ({ data }) => {
|
|
const count = await readCount();
|
|
await fs.promises.writeFile(filePath, `${count + data}`);
|
|
});
|
|
|
|
export const Route = createFileRoute("/")({
|
|
component: Home,
|
|
loader: async () => await getCount(),
|
|
});
|
|
|
|
function Home() {
|
|
const router = useRouter();
|
|
const state = Route.useLoaderData();
|
|
|
|
return (
|
|
<div>
|
|
<p>This is just something to put in here</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
updateCount({ data: 1 }).then(() => {
|
|
router.invalidate();
|
|
});
|
|
}}
|
|
>
|
|
Add 1 to {state}?
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|