Create class for API requests

src/lib/atproto.ts

···
+import { isXRPCErrorPayload, type Client } from "@atcute/client";
+import type {} from "@atcute/atproto";
+import type {} from "@atcute/bluesky";
+import type { Did } from "@atcute/lexicons";
+
+export interface Bundle {
+	description?: string;
+	assets: Record<string, { $type: "blob"; ref: { $link: string }; mimeType: string; size: number }>;
+	createdAt: string;
+}
+
+export default class ATProto {
+	#did: Did;
+	#client: Client;
+
+	constructor(did: Did, client: Client) {
+		this.#did = did;
+		this.#client = client;
+	}
+
+	async getProfile(did: Did) {
+		const { data } = await this.#client.get("app.bsky.actor.getProfile", {
+			params: { actor: did },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error(data.error);
+		return data;
+	}
+
+	async listBundles() {
+		const { data } = await this.#client.get("com.atproto.repo.listRecords", {
+			params: { repo: this.#did, collection: "com.jakelazaroff.test" },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error("couldn't load records");
+		return data;
+	}
+
+	async createBundle(rkey: string) {
+		const record = {
+			assets: {},
+			createdAt: new Date().toISOString(),
+		};
+
+		const { data } = await this.#client.post("com.atproto.repo.createRecord", {
+			input: { repo: this.#did, collection: "com.jakelazaroff.test", rkey, record },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error(data.error);
+	}
+
+	async getBundle(rkey: string) {
+		const { data } = await this.#client.get("com.atproto.repo.getRecord", {
+			params: { repo: this.#did, collection: "com.jakelazaroff.test", rkey },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error("couldn't load records");
+		return data;
+	}
+
+	async updateBundle(rkey: string, description: string, files: File[]) {
+		const bundle: Bundle = { description, assets: {}, createdAt: new Date().toISOString() };
+
+		for (const file of files) {
+			if (!(file instanceof File)) continue;
+
+			const { data } = await this.#client.post("com.atproto.repo.uploadBlob", { input: file });
+			if (isXRPCErrorPayload(data)) throw new Error("couldn't upload file");
+
+			const filepath = file.webkitRelativePath?.replace(/^.+\//, "") ?? file.name;
+			bundle.assets[filepath] = {
+				$type: "blob",
+				ref: data.blob.ref,
+				mimeType: file.type,
+				size: file.size,
+			};
+		}
+
+		const { data } = await this.#client.post("com.atproto.repo.putRecord", {
+			input: {
+				repo: this.#did,
+				collection: "com.jakelazaroff.test",
+				rkey,
+				record: bundle as any,
+			},
+		});
+		if (isXRPCErrorPayload(data)) throw new Error("couldn't deploy");
+	}
+
+	async deleteBundle(rkey: string) {
+		const { data } = await this.#client.post("com.atproto.repo.deleteRecord", {
+			input: { repo: this.#did, collection: "com.jakelazaroff.test", rkey },
+		});
+
+		if (isXRPCErrorPayload(data)) throw new Error(data.error);
+	}
+}

src/lib/oauth.ts

···
 import { Client } from "@atcute/client";
 import { configureOAuth, OAuthUserAgent, type Session } from "@atcute/oauth-browser-client";
 
+import ATProto from "./atproto";
+
 export const CLIENT_ID = `${PUBLIC_HOST}/client-metadata.json`;
 export const REDIRECT_URI = `${PUBLIC_REDIRECT_HOST || PUBLIC_HOST}/oauth/callback`;
 
···
 
 export function client(session: Session) {
 	const handler = new OAuthUserAgent(session);
-	return new Client({ handler });
+	const client = new Client({ handler });
+
+	return new ATProto(session.info.sub, client);
 }

src/routes/~/+layout.ts

···
-import type {} from "@atcute/bluesky";
-import { Client, isXRPCErrorPayload } from "@atcute/client";
-import { getSession, OAuthUserAgent } from "@atcute/oauth-browser-client";
+import { getSession } from "@atcute/oauth-browser-client";
 
-import { configure } from "~/lib/oauth";
+import { client, configure } from "~/lib/oauth";
 
 import type { LayoutLoad } from "./$types";
 import { redirect } from "@sveltejs/kit";
···
 		const did = localStorage.getItem("did") as any;
 		const session = await getSession(did);
 
-		const handler = new OAuthUserAgent(session);
-		const rpc = new Client({ handler });
+		const atp = client(session);
 
-		const { data } = await rpc.get("app.bsky.actor.getProfile", {
-			params: { actor: did },
-		});
-
-		if (isXRPCErrorPayload(data)) throw new Error("couldn't load profile");
+		const { displayName } = await atp.getProfile(did);
 
-		return { session, pds: session.info.aud, did, name: data.displayName };
+		return { session, pds: session.info.aud, did, name: displayName };
 	} catch (e) {
 		console.error(e);
 		redirect(303, "/");

src/routes/~/+page.svelte

···
 <script lang="ts">
 	import { invalidate } from "$app/navigation";
 
-	import type {} from "@atcute/atproto";
-	import { Client } from "@atcute/client";
-	import { OAuthUserAgent } from "@atcute/oauth-browser-client";
+	import { client } from "~/lib/oauth";
 
 	let { data } = $props();
 
-	const handler = new OAuthUserAgent(data.session);
-	const rpc = new Client({ handler });
+	const atp = client(data.session);
 
 	async function createWebsite(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
···
 		const rkey = formdata.get("rkey");
 		if (typeof rkey !== "string") throw new Error("invalid rkey");
 
-		const record = {
-			assets: [],
-			createdAt: new Date().toISOString(),
-		};
-
-		await rpc.post("com.atproto.repo.createRecord", {
-			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey, record },
-		});
+		await atp.createBundle(rkey);
 		await invalidate("collection:com.jakelazaroff.test");
 		form.reset();
 	}

src/routes/~/+page.ts

···
 import { Client, isXRPCErrorPayload } from "@atcute/client";
 import { OAuthUserAgent } from "@atcute/oauth-browser-client";
 
-import { configure } from "~/lib/oauth";
+import { client, configure } from "~/lib/oauth";
 
 import type { PageLoad } from "./$types";
 import { redirect } from "@sveltejs/kit";
···
 	try {
 		const { did, session } = await parent();
 
-		const handler = new OAuthUserAgent(session);
-		const rpc = new Client({ handler });
-
-		const { data } = await rpc.get("com.atproto.repo.listRecords", {
-			params: { repo: did, collection: "com.jakelazaroff.test" },
-		});
-
-		if (isXRPCErrorPayload(data)) throw new Error("couldn't load records");
+		const atp = client(session);
+		const { records } = await atp.listBundles();
 
-		return { records: data.records };
+		return { records };
 	} catch (e) {
 		console.error(e);
 		redirect(303, "/");

src/routes/~/sites/[name]/+page.svelte

···
 <script lang="ts">
 	import { goto, invalidate } from "$app/navigation";
 
-	import type {} from "@atcute/atproto";
-	import { isXRPCErrorPayload } from "@atcute/client";
-
 	import { client } from "~/lib/oauth";
 
 	let { params, data } = $props();
 
-	const rpc = client(data.session);
+	const atp = client(data.session);
 
 	async function deleteBundle(e: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		e.preventDefault();
···
 		const rkey = formdata.get("rkey");
 		if (typeof rkey !== "string") throw new Error("invalid rkey");
 
-		await rpc.post("com.atproto.repo.deleteRecord", {
-			input: { repo: data.did, collection: "com.jakelazaroff.test", rkey },
-		});
+		await atp.deleteBundle(rkey);
 		goto("/~/");
 	}
 
···
 		let description = formdata.get("description");
 		if (typeof description !== "string" || !description) description = "Uploaded on website";
 
-		const files = formdata.getAll("files");
-		const bundle: Bundle = { description, assets: {}, createdAt: new Date().toISOString() };
-		for (const file of files) {
-			if (!(file instanceof File)) continue;
-
-			const { data } = await rpc.post("com.atproto.repo.uploadBlob", { input: file });
-			if (isXRPCErrorPayload(data)) throw new Error("couldn't upload file");
-
-			const filepath = file.webkitRelativePath?.replace(/^.+\//, "") ?? file.name;
-			bundle.assets[filepath] = {
-				$type: "blob",
-				ref: data.blob.ref,
-				mimeType: file.type,
-				size: file.size,
-			};
-		}
-
-		await rpc.post("com.atproto.repo.putRecord", {
-			input: {
-				repo: data.did,
-				collection: "com.jakelazaroff.test",
-				rkey,
-				record: bundle as any,
-			},
-		});
-		if (isXRPCErrorPayload(data)) throw new Error("couldn't deploy");
-
+		const files = formdata.getAll("files").filter(entry => entry instanceof File);
+		await atp.updateBundle(rkey, description, files);
 		invalidate(`rkey:${rkey}`);
 		form.reset();
 	}

src/routes/~/sites/[name]/+page.ts

···
 	depends(`rkey:${params.name}`);
 
 	try {
-		const { did, session } = await parent();
+		const { session } = await parent();
 
-		const rpc = client(session);
+		const atp = client(session);
+		const record = await atp.getBundle(params.name);
 
-		const { data } = await rpc.get("com.atproto.repo.getRecord", {
-			params: { repo: did, collection: "com.jakelazaroff.test", rkey: params.name },
-		});
-
-		if (isXRPCErrorPayload(data)) throw new Error("couldn't load records");
-
-		return { record: data };
+		return { record };
 	} catch (e) {
 		console.error(e);
 		redirect(303, "/");