prefetch it

Author: aster-void

view/src/lib/consts.ts

@@ -1,2 +1,3 @@
 export const DAY = 24 * 60 * 60 * 1000;
 export const HOUR = 60 * 60 * 1000;
+export const MAX_DURATION = 6 * DAY;

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

@@ -1,8 +0,0 @@
-import type { Visit } from '~/db/schema';
-import type { PageServerLoad } from './$types';
-
-export const load: PageServerLoad = ({ fetch }) => {
-	return {
-		visits: fetch('/visits').then((res) => res.json() as Promise<Visit[]>)
-	};
-};

view/src/routes/+page.svelte

@@ -1,32 +1,33 @@
 <script lang="ts">
-	import { HOUR, DAY } from '~/lib/consts';
+	import { MAX_DURATION, HOUR, DAY } from '~/lib/consts';
 	import * as v from 'valibot';
 	import Dashboard from '~/pages/Dashboard.svelte';
 	import { type Kind, visit } from '~/share/schema';
 	import type { PageData } from './$types';
-	type Props = { data: PageData };
-	const { data }: Props = $props();
-	let visits = $state(data.visits);
 
 	let kind: Kind | 'all' = $state('all');
 	let duration: number = $state(3 * HOUR);
 	let lastFetch: Date = $state(new Date());
-	$effect(() => {
-		visits = fetch(`/visits?kind=${kind}&duration=${duration}`)
-			.then((res) => res.json())
-			.then((val) => {
-				const parsed = v.safeParse(v.array(visit), val);
-				if (!parsed.success) {
-					console.error(val, parsed.issues);
-					throw new Error(parsed.issues.toString());
-				}
-				return parsed.output;
-			})
-			.then((val) => {
-				lastFetch = new Date();
-				return val;
-			});
-	});
+	const data = fetch(`/visits?kind=all&duration=${MAX_DURATION}`)
+		.then((val) => {
+			const parsed = v.safeParse(v.array(visit), val);
+			if (!parsed.success) {
+				console.error(val, parsed.issues);
+				throw new Error(parsed.issues.toString());
+			}
+			return parsed.output;
+		})
+		.then((val) => {
+			lastFetch = new Date();
+			return val;
+		});
+
+	const lower_limit = $derived(lastFetch.getTime() - duration);
+	const visits = $derived(
+		data.then((data) =>
+			data.filter((val) => val.at.getTime() > lower_limit && (kind === 'all' || val.kind === kind))
+		)
+	);
 </script>
 
 <header>

view/src/routes/visits/+server.ts

@@ -1,5 +1,5 @@
 import type { ServerLoad } from '@sveltejs/kit';
-import { and, eq, gte } from 'drizzle-orm';
+import { gte } from 'drizzle-orm';
 import { drizzle } from 'drizzle-orm/d1';
 import { visitsTable } from '~/db/schema';
 
@@ -10,19 +10,9 @@ export const GET: ServerLoad = async ({ url, platform }) => {
 			`{"error": "failed to parse ${url.searchParams.get('duration')} to number"}`
 		);
 	const threshold = new Date(new Date().getTime() - duration);
-	const kind = url.searchParams.get('kind') ?? 'all';
 
 	if (!platform) return new Response('platform not found');
 	const db = drizzle(platform.env.DB);
-	const resp = await db
-		.select()
-		.from(visitsTable)
-		.where(
-			and(
-				eq(visitsTable.kind, kind !== 'all' ? kind : visitsTable.kind),
-				gte(visitsTable.at, threshold)
-			)
-		)
-		.all();
+	const resp = await db.select().from(visitsTable).where(gte(visitsTable.at, threshold)).all();
 	return new Response(JSON.stringify(resp));
 };