Organise things a bit better

Author: TheKodeToad

frontend/package.json

@@ -11,9 +11,11 @@
 		"typescript": "^5.8.3"
 	},
 	"dependencies": {
+		"@codemirror/commands": "^6.8.1",
 		"@codemirror/language": "^6.11.0",
 		"@codemirror/state": "^6.5.2",
 		"@codemirror/theme-one-dark": "^6.1.2",
+		"@codemirror/view": "^6.36.6",
 		"@solid-primitives/deep": "^0.3.2",
 		"@solidjs/router": "^0.15.3",
 		"@tabler/icons-solidjs": "^3.31.0",

frontend/src/client/index.ts

@@ -1,6 +1,26 @@
-import { AUTH_LOG_IN, AUTH_LOG_OUT, GUILDS } from "./routes";
+import { AUTH_LOG_IN, AUTH_LOG_OUT, GUILD_CONFIG, GUILDS } from "./routes";
 
-type HttpMethod = "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "CONNECT" | "OPTIONS" | "TRACE" | "PATCH";
+type HTTPMethod = "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "CONNECT" | "OPTIONS" | "TRACE" | "PATCH";
+
+function extractMessage(body: unknown) {
+	if (typeof body === "string")
+		return body;
+
+	if (typeof body === "object" && body !== null && "error" in body)
+		return body.error;
+
+	return "No message";
+}
+
+export class RESTError extends Error {
+	body: unknown;
+
+	constructor(status: number, body: unknown) {
+		super(`${status} - ${extractMessage(body)}`);
+		this.name = "RESTError";
+		this.body = body;
+	}
+}
 
 export interface LogInResponse {
 	token: string;
@@ -20,9 +40,11 @@ export interface GuildResponse {
 	ownerID: string;
 }
 
-async function requestJSON<T>(route: string, method: HttpMethod, token?: string, body?: any): Promise<T | ErrorResponse> {
+async function request<T>(route: string, method: HTTPMethod, token?: string, body?: any): Promise<T> {
 	const headers = new Headers;
-	headers.set("Content-Type", "application/json");
+
+	if (body != null)
+		headers.set("Content-Type", "application/json");
 
 	if (token !== undefined)
 		headers.set("Authorization", token);
@@ -33,22 +55,30 @@ async function requestJSON<T>(route: string, method: HttpMethod, token?: string,
 		headers,
 	});
 
-	const text = await response.text();
-
-	if (text.length === 0)
+	if (response.status === 204)
 		return null as T;
 
-	return JSON.parse(text);
+	const isJson = response.headers.get("Content-Type") === "application/json";
+	const responseBody = isJson ? await response.json() : await response.text();
+
+	if (!response.ok)
+		throw new RESTError(response.status, responseBody);
+
+	return responseBody;
 }
 
 export function logIn(code: string) {
-	return requestJSON<LogInResponse>(AUTH_LOG_IN, "POST", undefined, { code });
+	return request<LogInResponse>(AUTH_LOG_IN, "POST", undefined, { code });
 }
 
 export function logOut(token: string) {
-	return requestJSON<null>(AUTH_LOG_OUT, "GET", token);
+	return request<null>(AUTH_LOG_OUT, "GET", token);
 }
 
 export function getGuilds(token: string) {
-	return requestJSON<GuildResponse[]>(GUILDS, "GET", token);
+	return request<GuildResponse[]>(GUILDS, "GET", token);
+}
+
+export async function getGuildConfig(token: string, guildID: string, config: string) {
+	return request<string>(GUILD_CONFIG(guildID, config), "GET", token);
 }

frontend/src/client/routes.ts

@@ -1,3 +1,6 @@
+import { buildURI } from "../common/uri";
+
 export const AUTH_LOG_IN = "/api/v1/auth/log-in";
 export const AUTH_LOG_OUT = "/api/v1/auth/log-out";
 export const GUILDS = "/api/v1/guilds";
+export const GUILD_CONFIG = (guildID: string, key: string) => buildURI`/api/v1/guilds/${guildID}/config/${key}`;

frontend/src/codemirror/toml.ts

@@ -32,5 +32,5 @@ export function CodeMirror(props: CodeMirrorProps) {
 		}, { defer: true }));
 	});
 
-	return <div ref={ref}></div>;
+	return <div ref={ref} />;
 }

frontend/src/component/common/CodeMirror.tsx

@@ -0,0 +1,19 @@
+import { createResource } from "solid-js";
+import { baseExtensions } from ".";
+import { getGuildConfig } from "../../client";
+import { account } from "../../state/account";
+import { useGuild } from "../../state/guilds";
+import { CodeMirror } from "../common/CodeMirror";
+
+export function ConfigEditor(props: { guildID: string; configKey: string; }) {
+	const guild = () => useGuild(props.guildID);
+
+	const [resource] = createResource(() => guild(), () => {
+		if (guild() !== undefined)
+			return getGuildConfig(account()!.token, guild()!.id, "moderation");
+		else
+			return undefined;
+	});
+
+	return <CodeMirror value={resource() ?? ""} extensions={baseExtensions} />;
+}

frontend/src/component/config/ConfigEditor.tsx

@@ -0,0 +1,32 @@
+import { indentLess, insertTab } from "@codemirror/commands";
+import { indentNodeProp, LRLanguage } from "@codemirror/language";
+import { oneDark } from "@codemirror/theme-one-dark";
+import { EditorView, keymap } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { parser } from "lezer-toml";
+
+const parserWithMetadata = parser.configure({
+	props: [
+		indentNodeProp.add({
+			Array: context => context.column(context.node.from) + context.unit
+		}),
+	]
+});
+
+export const baseExtensions = [
+	basicSetup,
+	oneDark,
+	LRLanguage.define({
+		parser: parserWithMetadata,
+	}),
+	keymap.of([{
+		key: "Tab",
+		run: insertTab,
+		shift: indentLess,
+	}]),
+	EditorView.theme({
+		"&.cm-focused": {
+			outline: "none"
+		}
+	})
+];

frontend/src/component/config/index.ts

@@ -24,8 +24,7 @@ export function handleLoginCallback() {
 	history.replaceState(null, "", "/");
 
 	requestLogIn(code).then(response => {
-		if ("error" in response)
-			return; // TODO handle errors
+		// TODO handle errors
 
 		setAccount({
 			token: response.token,

frontend/src/helper/auth.ts

@@ -1,29 +1,13 @@
-import { oneDark } from "@codemirror/theme-one-dark";
-import { basicSetup } from "codemirror";
-import { tomlHighlighting as tomlLanguage } from "../codemirror/toml";
-import { CodeMirror } from "../component/common/CodeMirror";
+import { useParams } from "@solidjs/router";
+import { ConfigEditor } from "../component/config/ConfigEditor";
 import { LoginGate } from "../component/LoginGate";
 
 export const Guild = () => <LoginGate><GuildComponent /></LoginGate>;
 
 export function GuildComponent() {
-	// const guildID = () => useParams().guildID!;
-	const config = `
-[groups.moderator]
-users = ["706152404072267788"]
+	const guildID = () => useParams().guildID!;
 
-[prefix_commands]
-prefix = "?"
-reply = true
-
-[default_permissions]
-groups_command = true
-help_command = true
-	`;
-	const extensions = [basicSetup, oneDark, tomlLanguage];
 	return (
-		<div>
-			<CodeMirror value={config} extensions={extensions} />
-		</div>
+		<div><ConfigEditor guildID={guildID()} configKey="core" /></div>
 	);
 }

frontend/src/route/guild.tsx

@@ -21,9 +21,6 @@ function GuildsComponent() {
 		if (guildList === undefined)
 			return;
 
-		if ("error" in guildList)
-			return;
-
 		return (
 			<For each={guildList}>
 				{guild => <GuildCard {...guild} />}