diff --git a/package-lock.json b/package-lock.json index 4fd766f..2cd4d28 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "CNPLv7", "dependencies": { + "body-parser": "^1.20.3", "express": "^4.21.1", "preact": "^10.24.3", "preact-render-to-string": "^6.5.11" @@ -16,6 +17,7 @@ "devDependencies": { "@eslint/js": "^9.15.0", "@tsconfig/strictest": "^2.0.5", + "@types/body-parser": "^1.19.5", "@types/eslint__js": "^8.42.3", "@types/express": "^5.0.0", "copyfiles": "^2.4.1", diff --git a/package.json b/package.json index 37c3897..8e0107d 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "devDependencies": { "@eslint/js": "^9.15.0", "@tsconfig/strictest": "^2.0.5", + "@types/body-parser": "^1.19.5", "@types/eslint__js": "^8.42.3", "@types/express": "^5.0.0", "copyfiles": "^2.4.1", @@ -32,6 +33,7 @@ "typescript-eslint": "^8.14.0" }, "dependencies": { + "body-parser": "^1.20.3", "express": "^4.21.1", "preact": "^10.24.3", "preact-render-to-string": "^6.5.11" diff --git a/src/backend/app.ts b/src/backend/app.ts index 2d8cb5f..aa21d6f 100644 --- a/src/backend/app.ts +++ b/src/backend/app.ts @@ -1,11 +1,14 @@ import path from "node:path"; +import bodyParser from "body-parser"; import express from "express"; import { mainPageHandler } from "./main.tsx"; +import { createProgressiveForm } from "./progressive-form.ts"; export const createApp = () => { const app = express(); + app.use(bodyParser.urlencoded({ extended: true })); - app.get("/", mainPageHandler); + app.use("/", createProgressiveForm(mainPageHandler)); app.use("/frontend", express.static(path.join(import.meta.dirname, "..", "frontend"))); app.use("/shared", express.static(path.join(import.meta.dirname, "..", "shared"))); diff --git a/src/backend/main.tsx b/src/backend/main.tsx index 18ad654..ab4727b 100644 --- a/src/backend/main.tsx +++ b/src/backend/main.tsx @@ -2,7 +2,8 @@ import type { RequestHandler } from "express"; import { safeGetQueryValue, sendHtml } from "./utils.ts"; export const mainPageHandler: RequestHandler = (req, res) => { - const pageNumber = parseInt(safeGetQueryValue(req, "page") ?? "0", 10); + const a = parseInt(safeGetQueryValue(req, "a") ?? "0", 10); + const b = parseInt(safeGetQueryValue(req, "b") ?? "0", 10); sendHtml( res, @@ -18,12 +19,28 @@ export const mainPageHandler: RequestHandler = (req, res) => {

Hello world!

-

- Page number {pageNumber} -

-

- Go to the next page -

+ +
+

+ +

+
+
+

+ +

+
, ); diff --git a/src/backend/progressive-form.ts b/src/backend/progressive-form.ts new file mode 100644 index 0000000..9d89222 --- /dev/null +++ b/src/backend/progressive-form.ts @@ -0,0 +1,11 @@ +import express, { RequestHandler } from "express"; +import { rewriteQueryParams } from "./utils.ts"; + +export const createProgressiveForm = (mainHandler: RequestHandler) => { + const router = express.Router(); + + router.get("/", mainHandler); + router.post("/", rewriteQueryParams); + + return router; +}; diff --git a/src/backend/utils.ts b/src/backend/utils.ts index 6b78b53..ce6f601 100644 --- a/src/backend/utils.ts +++ b/src/backend/utils.ts @@ -1,4 +1,4 @@ -import type { Request, Response } from "express"; +import type { Request, RequestHandler, Response } from "express"; import type { VNode } from "preact"; import { render } from "preact-render-to-string"; @@ -17,3 +17,24 @@ export const safeGetQueryValue = (req: Request, name: string) => { return result || null; }; + +export const rewriteQueryParams: RequestHandler = (req, res) => { + const newQuery = new URLSearchParams(); + + for (const [param, value] of Object.entries(req.query)) { + if (typeof value === "string") { + newQuery.set(param, value); + } + } + + if (req.body) { + const body = req.body as Record; + for (const [param, value] of Object.entries(body)) { + if (typeof value === "string") { + newQuery.set(param, value); + } + } + } + + res.redirect(`?${newQuery.toString()}`); +}; diff --git a/src/frontend/static/style.css b/src/frontend/static/style.css index bd55de0..35bd1d3 100644 --- a/src/frontend/static/style.css +++ b/src/frontend/static/style.css @@ -1,4 +1,4 @@ -.pageNumber { +.counter { font-weight: bold; color: red; }