WIP: attempt to refactor api routes into server load functions

src/routes/connections/+page.server.ts

@@ -0,0 +1,47 @@
+import type { PageServerLoad } from './$types';
+import type { ConnectionDetails } from '$lib/connections';
+import { findDevices } from '$lib/server/devices';
+import wgProvider from '$lib/server/wg-provider';
+import { error } from '@sveltejs/kit';
+
+export const load: PageServerLoad = async ({ locals, setHeaders, depends }) => {
+	if (!locals.user) {
+		error(401, 'Unauthorized');
+	}
+	console.debug('/connections');
+
+	const peersResult = await wgProvider.findConnections(locals.user);
+	if (peersResult._tag === 'err') return error(500, peersResult.error.message);
+
+	const devices = await findDevices(locals.user.id);
+	console.debug('/connections: fetched db devices');
+
+	// TODO: this is all garbage performance
+	// filter devices with no recent handshakes
+	const peers = peersResult.value.filter((peer) => peer.latestHandshake);
+
+	// start from devices, to treat db as the source of truth
+	const connections: ConnectionDetails[] = [];
+	for (const device of devices) {
+		const peerData = peers.find((peer) => peer.publicKey === device.publicKey);
+		if (!peerData) continue;
+		connections.push({
+			deviceId: device.id,
+			deviceName: device.name,
+			devicePublicKey: device.publicKey,
+			deviceIps: peerData.allowedIps.split(','),
+			endpoint: peerData.endpoint,
+			// swap rx and tx, since the opnsense values are from the server perspective
+			transferRx: peerData.transferTx,
+			transferTx: peerData.transferRx,
+			latestHandshake: peerData.latestHandshake,
+		});
+	}
+
+	setHeaders({
+		'Cache-Control': 'max-age=5',
+	});
+
+	depends('connections');
+	return { connections };
+};

src/routes/connections/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { PageData } from './$types';
-	import { invalidate } from '$app/navigation';
+	import { invalidate, invalidateAll } from '$app/navigation';
 	import * as Table from '$lib/components/ui/table';
 	import { Badge } from '$lib/components/ui/badge';
 
@@ -10,7 +10,7 @@
 		// refresh every 5 seconds
 		const interval = setInterval(() => {
 			console.log('Refreshing connections');
-			invalidate('/api/connections');
+			invalidate('/connections');
 		}, 5000);
 
 		return () => clearInterval(interval);

src/routes/connections/+page.ts

@@ -1,9 +0,0 @@
-import type { PageLoad } from './$types';
-import type { ConnectionDetails } from '$lib/connections';
-
-export const load: PageLoad = async ({ fetch }) => {
-	const res = await fetch('/api/connections');
-	const connections = await res.json() as ConnectionDetails[];
-
-	return { connections };
-};

src/routes/devices/+page.server.ts

@@ -1,7 +1,15 @@
-import type { Actions } from './$types';
+import type { Actions, PageServerLoad } from './$types';
-import { createDevice } from '$lib/server/devices';
+import { createDevice, findDevices, mapDeviceToDetails } from '$lib/server/devices';
 import { error, fail, redirect } from '@sveltejs/kit';
-import wgProvider from '$lib/server/wg-provider';
+
+export const load: PageServerLoad = async (event) => {
+	if (!event.locals.user) {
+		error(401, 'Unauthorized');
+	}
+
+	const devices = await findDevices(event.locals.user.id);
+	return { devices };
+};
 
 export const actions = {
 	create: async (event) => {

src/routes/devices/+page.ts

@@ -1,9 +0,0 @@
-import type { PageLoad } from './$types';
-import type { DeviceDetails } from '$lib/devices';
-
-export const load: PageLoad = async ({ fetch }) => {
-	const res = await fetch('/api/devices');
-	const { devices } = await res.json() as { devices: DeviceDetails[] };
-
-	return { devices };
-};