zontent/frontend/main.ts

import { makeClient, assert } from "../common/deps/yaypi.ts";
import { Api, replacer, reviver } from "../common/api.ts";
import { swel } from "./deps/swel.ts";
import { SchemaEditorView } from "./schema_editor.ts";

const client = makeClient(Api, "/api", replacer, reviver);
export type Client = typeof client;

type ShowView = (node: HTMLElement) => void;

const Home = async (p: { showView: ShowView; client: Client }) => {
	const schemas = assert(await client.v1.listSchemas(null));

	const container = swel("div", { className: "home" }, [
		swel("header", "Schemas"),
		swel(
			"ul",
			schemas.map((s) => swel("li", `${s.name}`)),
		),
		swel(
			"button",
			{
				on: { click: () => p.showView(SchemaEditorView(p)) },
			},
			"New Schema",
		),
	]);

	return container;
};

const init = async () => {
	let viewIdx = -1;
	const viewStack: HTMLElement[] = [];

	self.addEventListener("popstate", (ev) => {
		const state = ev.state as typeof viewIdx;
		viewIdx = state;

		const view = viewStack[viewIdx];
		if (!view) {
			return;
		}

		main.replaceChildren(view);
	});

	const showView = (view: HTMLElement) => {
		if (viewIdx == -1) {
			history.replaceState(++viewIdx, "", null);
		} else {
			history.pushState(++viewIdx, "", null);
		}
		viewStack[viewIdx] = view;

		main.replaceChildren(view);
	};

	const chrome = swel("nav", { className: "nav-chrome" }, [
		swel(
			"a",
			{ on: { click: async () => showView(await Home({ showView, client })) } },
			"Home",
		),
	]);
	const main = swel("div", { className: "main" });

	showView(await Home({ showView, client }));
	document.body.replaceChildren(chrome, main);
};

document.addEventListener("DOMContentLoaded", init);