zontent/frontend/components/SchemaEditor/SchemaEditor.ts

import { h } from "preact";
import { Dispatch } from "../../utils.ts";
import { State, Action, setName, addField } from "./state.ts";
import { Action as AppAction } from "../App/state.ts";
import { TextInput } from "../lib/input/TextInput.ts";
import { Validated } from "../lib/input/Validated.ts";
import { validateSchema } from "../../../common/schema.ts";
import { Fields } from "./Fields/Fields.ts";
import { Client } from "../App/App.ts";
import { assert } from "../../../common/deps/yaypi.ts";
import { goHome } from "../App/state.ts";

export const SchemaEditor = (p: {
	state: State;
	dispatch: Dispatch<AppAction>;
	client: Client;
}) => {
	const errors = validateSchema(p.state);

	const nameInput = h(
		Validated,
		{
			errors: errors.name,
		},
		h(TextInput, {
			placeholder: "Schema name",
			value: p.state.name,
			onInput: (s) => p.dispatch(setName(s)),
			class: "name",
		}),
	);

	const fields = h(Fields, {
		fields: p.state.fields,
		dispatch: p.dispatch,
		errors: errors.fields,
	});

	const addFieldBtn = h(
		"button",
		{ onClick: () => p.dispatch(addField()) },
		"Add field",
	);

	const save = async () => {
		const result = assert(await p.client.v1.saveSchema(p.state));
		if (typeof result === "string") {
			console.error(result);
		}

		p.dispatch(goHome());
	};
	const saveBtn = h("button", { onClick: () => save() }, "Save");

	return h(
		"div",
		{ class: "schema-editor" },
		nameInput,
		fields,
		addFieldBtn,
		saveBtn,
	);
};