stateful-page.ts
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

stateful-page.ts
View Options

	import { curryImportPath } from "../utils/import-path.js";

	export async function statefulPageTemplate(
	action_name: string,
	newfilefullpath: string
	): Promise<string> {
	const rel = curryImportPath(newfilefullpath);
	return `import { TempstreamJSX, Templatable } from "tempstream";
	import { BaseContext } from "koa";
	import { StatefulPage } from "@sealcode/sealgen";
	import html from "${rel("src/back/html.js")}";

	export const actionName = "${action_name}";

	const actions = {
	add: (state: State, inputs: Record<string, string>) => {
	return {
	...state,
	elements: [...state.elements, inputs.element_to_add \|\| "new element"],
	};
	},
	remove: (state: State, _: unknown, index_to_remove: number) => {
	return {
	...state,
	elements: state.elements.filter((_, index) => index != index_to_remove),
	};
	},
	} as const;

	type State = {
	elements: string[];
	};

	export default new (class ${action_name}Page extends StatefulPage<State, typeof actions> {
	actions = actions;

	getInitialState() {
	return { elements: ["one", "two", "three"] };
	}

	wrapInLayout(ctx: BaseContext, content: Templatable): Templatable {
	return html(ctx, "${action_name}", content);
	}

	render(ctx: BaseContext, state: State, inputs: Record<string, string>) {
	return (
	<div>
	<ul>
	{state.elements.map((e, index) => (
	<li>
	{e} {this.makeActionButton(state, "remove", index)}
	</li>
	))}
	</ul>
	<div>
	<input
	name="element_to_add"
	type="text"
	value={inputs.element_to_add \|\| ""}
	/>
	{this.makeActionButton(state, "add")}
	</div>
	</div>
	);
	}
	})();
	`;
	}