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