Archive Collections

frontend/src/routes/collections/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { enhance, deserialize } from '$app/forms';
+	import { goto } from '$app/navigation';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import CollectionCard from '$lib/components/CollectionCard.svelte';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
@@ -247,6 +248,11 @@
 					<button type="submit" class="btn btn-success btn-primary mt-4">Filter</button>
 				</form>
 				<div class="divider"></div>
+				<button
+					type="submit"
+					class="btn btn-neutral btn-primary mt-4"
+					on:click={() => goto('/collections/archived')}>Archived Collections</button
+				>
 			</div>
 		</ul>
 	</div>

frontend/src/routes/collections/archived/+page.server.ts

@@ -0,0 +1,35 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+import type { Adventure } from '$lib/types';
+const serverEndpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	if (!event.locals.user) {
+		return redirect(302, '/login');
+	} else {
+		let next = null;
+		let previous = null;
+		let count = 0;
+		let adventures: Adventure[] = [];
+		let initialFetch = await fetch(`${serverEndpoint}/api/collections/archived/`, {
+			headers: {
+				Cookie: `${event.cookies.get('auth')}`
+			}
+		});
+		if (!initialFetch.ok) {
+			console.error('Failed to fetch visited adventures');
+			return redirect(302, '/login');
+		} else {
+			let res = await initialFetch.json();
+			let visited = res as Adventure[];
+			adventures = [...adventures, ...visited];
+		}
+
+		return {
+			props: {
+				adventures
+			}
+		};
+	}
+}) satisfies PageServerLoad;

frontend/src/routes/collections/archived/+page.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { enhance, deserialize } from '$app/forms';
+	import AdventureCard from '$lib/components/AdventureCard.svelte';
+	import CollectionCard from '$lib/components/CollectionCard.svelte';
+	import EditAdventure from '$lib/components/EditAdventure.svelte';
+	import EditCollection from '$lib/components/EditCollection.svelte';
+	import NewAdventure from '$lib/components/NewAdventure.svelte';
+	import NewCollection from '$lib/components/NewCollection.svelte';
+	import NotFound from '$lib/components/NotFound.svelte';
+	import type { Adventure, Collection } from '$lib/types';
+
+	import Plus from '~icons/mdi/plus';
+
+	export let data: any;
+	console.log(data);
+
+	let collections: Collection[] = data.props.adventures || [];
+
+	function deleteCollection(event: CustomEvent<number>) {
+		collections = collections.filter((collection) => collection.id !== event.detail);
+	}
+</script>
+
+<div class="drawer lg:drawer-open">
+	<div class="drawer-content">
+		<!-- Page content -->
+		<h1 class="text-center font-bold text-4xl mb-6">Archived Collections</h1>
+		{#if collections.length === 0}
+			<NotFound error={undefined} />
+		{/if}
+		<div class="p-4">
+			<div class="flex flex-wrap gap-4 mr-4 justify-center content-center">
+				{#each collections as collection}
+					<CollectionCard type="" {collection} on:delete={deleteCollection} />
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>
+
+<svelte:head>
+	<title>Collections</title>
+	<meta name="description" content="View your adventure collections." />
+</svelte:head>