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";

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

	export const actionName = "${action_name}";

	const actions = <const>{
	add: (state: State, inputs: Record<string, string>) => {
	console.log({ inputs });
	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),
	};
	},
	};

	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 tempstream/* HTML */ \`<ul>
	\${state.elements.map(
	(e, index) => /* HTML */ \`<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>\`;
	}
	})();
	`;
	}