From 32f5c1a806b92faa7799286e394f4a55f7cf9090 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sun, 4 Aug 2024 22:19:09 -0400
Subject: [PATCH 1/3] chore: Increase page size to 25 for adventures and
 collections views

---
 backend/server/adventures/views.py           | 2 +-
 frontend/src/routes/adventures/+page.svelte  | 2 +-
 frontend/src/routes/collections/+page.svelte | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/backend/server/adventures/views.py b/backend/server/adventures/views.py
index d208bbd3..e36302c5 100644
--- a/backend/server/adventures/views.py
+++ b/backend/server/adventures/views.py
@@ -15,7 +15,7 @@
 from rest_framework import status
 
 class StandardResultsSetPagination(PageNumberPagination):
-    page_size = 10
+    page_size = 25
     page_size_query_param = 'page_size'
     max_page_size = 1000
 
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 3ab518b2..9837da60 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -18,7 +18,7 @@
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
-	let resultsPerPage: number = 10;
+	let resultsPerPage: number = 25;
 
 	let next: string | null = data.props.next || null;
 	let previous: string | null = data.props.previous || null;
diff --git a/frontend/src/routes/collections/+page.svelte b/frontend/src/routes/collections/+page.svelte
index 4371a5c9..cdb9e028 100644
--- a/frontend/src/routes/collections/+page.svelte
+++ b/frontend/src/routes/collections/+page.svelte
@@ -21,7 +21,7 @@
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
-	let resultsPerPage: number = 10;
+	let resultsPerPage: number = 25;
 
 	let currentView: string = 'cards';
 

From 44cad305287c00acc440a8af21bf4e8454e3bbaa Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 5 Aug 2024 09:33:21 -0400
Subject: [PATCH 2/3] better filters

---
 .../src/routes/adventures/+page.server.ts     | 428 +++++++++---------
 frontend/src/routes/adventures/+page.svelte   |  89 ++--
 2 files changed, 267 insertions(+), 250 deletions(-)

diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts
index 4f3794ef..db019cf7 100644
--- a/frontend/src/routes/adventures/+page.server.ts
+++ b/frontend/src/routes/adventures/+page.server.ts
@@ -13,12 +13,33 @@ 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[] = [];
+
+		const visited = event.url.searchParams.get('visited');
+		const planned = event.url.searchParams.get('planned');
+
+		let typeString: string = '';
+
+		if (visited == 'on') {
+			typeString += 'visited';
+		}
+		if (planned == 'on') {
+			if (typeString) {
+				typeString += ',';
+			}
+			typeString += 'planned';
+		} else if (!visited && !planned) {
+			typeString = 'visited,planned';
+		}
+
+		const include_collections = event.url.searchParams.get('include_collections') || 'false';
+		const order_by = event.url.searchParams.get('order_by') || 'updated_at';
+		const order_direction = event.url.searchParams.get('order_direction') || 'asc';
+		const page = event.url.searchParams.get('page') || '1';
+
 		let initialFetch = await fetch(
-			`${serverEndpoint}/api/adventures/filtered?types=visited,planned&include_collections=false`,
+			`${serverEndpoint}/api/adventures/filtered?types=${typeString}&order_by=${order_by}&order_direction=${order_direction}&include_collections=${include_collections}&page=${page}`,
 			{
 				headers: {
 					Cookie: `${event.cookies.get('auth')}`
@@ -31,8 +52,7 @@ export const load = (async (event) => {
 		} else {
 			let res = await initialFetch.json();
 			let visited = res.results as Adventure[];
-			next = res.next;
-			previous = res.previous;
+
 			count = res.count;
 			adventures = [...adventures, ...visited];
 		}
@@ -40,8 +60,6 @@ export const load = (async (event) => {
 		return {
 			props: {
 				adventures,
-				next,
-				previous,
 				count
 			}
 		};
@@ -384,203 +402,203 @@ export const actions: Actions = {
 		let image_url = adventure.image;
 		let link_url = adventure.link;
 		return { image_url, link_url };
-	},
-	get: async (event) => {
-		if (!event.locals.user) {
-		}
-
-		const formData = await event.request.formData();
-		const visited = formData.get('visited');
-		const planned = formData.get('planned');
-
-		let include_collections = formData.get('include_collections') as string;
-
-		if (include_collections) {
-			include_collections = 'true';
-		} else {
-			include_collections = 'false';
-		}
-
-		const order_direction = formData.get('order_direction') as string;
-		const order_by = formData.get('order_by') as string;
-
-		console.log(order_direction, order_by);
-
-		let adventures: Adventure[] = [];
-
-		if (!event.locals.user) {
-			return {
-				status: 401,
-				body: { message: 'Unauthorized' }
-			};
-		}
-
-		let filterString = '';
-		if (visited) {
-			filterString += 'visited';
-		}
-		if (planned) {
-			if (filterString) {
-				filterString += ',';
-			}
-			filterString += 'planned';
-		}
-		if (!filterString) {
-			filterString = '';
-		}
-
-		let next = null;
-		let previous = null;
-		let count = 0;
-
-		console.log(filterString);
-
-		let visitedFetch = await fetch(
-			`${serverEndpoint}/api/adventures/filtered?types=${filterString}&order_by=${order_by}&order_direction=${order_direction}&include_collections=${include_collections}`,
-			{
-				headers: {
-					Cookie: `${event.cookies.get('auth')}`
-				}
-			}
-		);
-		if (!visitedFetch.ok) {
-			console.error('Failed to fetch visited adventures');
-			return redirect(302, '/login');
-		} else {
-			let res = await visitedFetch.json();
-			let visited = res.results as Adventure[];
-			next = res.next;
-			previous = res.previous;
-			count = res.count;
-			adventures = [...adventures, ...visited];
-			console.log(next, previous, count);
-		}
-
-		return {
-			adventures,
-			next,
-			previous,
-			count
-		};
-	},
-	changePage: async (event) => {
-		const formData = await event.request.formData();
-		const next = formData.get('next') as string;
-		const previous = formData.get('previous') as string;
-		const page = formData.get('page') as string;
-
-		if (!event.locals.user) {
-			return {
-				status: 401,
-				body: { message: 'Unauthorized' }
-			};
-		}
-
-		if (!page) {
-			return {
-				status: 400,
-				body: { error: 'Missing required fields' }
-			};
-		}
-
-		// Start with the provided URL or default to the filtered adventures endpoint
-		let url: string = next || previous || '/api/adventures/filtered';
-
-		// Extract the path starting from '/api/adventures'
-		const apiIndex = url.indexOf('/api/adventures');
-		if (apiIndex !== -1) {
-			url = url.slice(apiIndex);
-		} else {
-			url = '/api/adventures/filtered';
-		}
-
-		// Replace or add the page number in the URL
-		if (url.includes('page=')) {
-			url = url.replace(/page=\d+/, `page=${page}`);
-		} else {
-			// If 'page=' is not in the URL, add it
-			url += url.includes('?') ? '&' : '?';
-			url += `page=${page}`;
-		}
-
-		const fullUrl = `${serverEndpoint}${url}`;
-		console.log(fullUrl);
-		console.log(serverEndpoint);
-
-		try {
-			const response = await fetch(fullUrl, {
-				headers: {
-					'Content-Type': 'application/json',
-					Cookie: `${event.cookies.get('auth')}`
-				}
-			});
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-			const data = await response.json();
-			let adventures = data.results as Adventure[];
-			let next = data.next;
-			let previous = data.previous;
-			let count = data.count;
-
-			return {
-				status: 200,
-				body: {
-					adventures,
-					next,
-					previous,
-					count,
-					page
-				}
-			};
-		} catch (error) {
-			console.error('Error fetching data:', error);
-			return {
-				status: 500,
-				body: { error: 'Failed to fetch data' }
-			};
-		}
-	},
-	all: async (event) => {
-		if (!event.locals.user) {
-			return {
-				status: 401,
-				body: { message: 'Unauthorized' }
-			};
-		}
-
-		const formData = await event.request.formData();
-
-		let include_collections = formData.get('include_collections') as string;
-
-		if (include_collections !== 'true' && include_collections !== 'false') {
-			include_collections = 'false';
-		}
-
-		let adventures: Adventure[] = [];
-
-		let visitedFetch = await fetch(
-			`${serverEndpoint}/api/adventures/all/?include_collections=${include_collections}`,
-			{
-				headers: {
-					Cookie: `${event.cookies.get('auth')}`,
-					'Content-Type': 'application/json'
-				}
-			}
-		);
-		if (!visitedFetch.ok) {
-			console.error('Failed to fetch all adventures');
-			return redirect(302, '/login');
-		} else {
-			console.log('Fetched all adventures');
-			let res = await visitedFetch.json();
-			console.log(res);
-			adventures = res as Adventure[];
-		}
-
-		return {
-			adventures
-		};
 	}
+	// get: async (event) => {
+	// 	if (!event.locals.user) {
+	// 	}
+
+	// 	const formData = await event.request.formData();
+	// 	const visited = formData.get('visited');
+	// 	const planned = formData.get('planned');
+
+	// 	let include_collections = formData.get('include_collections') as string;
+
+	// 	if (include_collections) {
+	// 		include_collections = 'true';
+	// 	} else {
+	// 		include_collections = 'false';
+	// 	}
+
+	// 	const order_direction = formData.get('order_direction') as string;
+	// 	const order_by = formData.get('order_by') as string;
+
+	// 	console.log(order_direction, order_by);
+
+	// 	let adventures: Adventure[] = [];
+
+	// 	if (!event.locals.user) {
+	// 		return {
+	// 			status: 401,
+	// 			body: { message: 'Unauthorized' }
+	// 		};
+	// 	}
+
+	// 	let filterString = '';
+	// 	if (visited) {
+	// 		filterString += 'visited';
+	// 	}
+	// 	if (planned) {
+	// 		if (filterString) {
+	// 			filterString += ',';
+	// 		}
+	// 		filterString += 'planned';
+	// 	}
+	// 	if (!filterString) {
+	// 		filterString = '';
+	// 	}
+
+	// 	let next = null;
+	// 	let previous = null;
+	// 	let count = 0;
+
+	// 	console.log(filterString);
+
+	// 	let visitedFetch = await fetch(
+	// 		`${serverEndpoint}/api/adventures/filtered?types=${filterString}&order_by=${order_by}&order_direction=${order_direction}&include_collections=${include_collections}`,
+	// 		{
+	// 			headers: {
+	// 				Cookie: `${event.cookies.get('auth')}`
+	// 			}
+	// 		}
+	// 	);
+	// 	if (!visitedFetch.ok) {
+	// 		console.error('Failed to fetch visited adventures');
+	// 		return redirect(302, '/login');
+	// 	} else {
+	// 		let res = await visitedFetch.json();
+	// 		let visited = res.results as Adventure[];
+	// 		next = res.next;
+	// 		previous = res.previous;
+	// 		count = res.count;
+	// 		adventures = [...adventures, ...visited];
+	// 		console.log(next, previous, count);
+	// 	}
+
+	// 	return {
+	// 		adventures,
+	// 		next,
+	// 		previous,
+	// 		count
+	// 	};
+	// },
+	// changePage: async (event) => {
+	// 	const formData = await event.request.formData();
+	// 	const next = formData.get('next') as string;
+	// 	const previous = formData.get('previous') as string;
+	// 	const page = formData.get('page') as string;
+
+	// 	if (!event.locals.user) {
+	// 		return {
+	// 			status: 401,
+	// 			body: { message: 'Unauthorized' }
+	// 		};
+	// 	}
+
+	// 	if (!page) {
+	// 		return {
+	// 			status: 400,
+	// 			body: { error: 'Missing required fields' }
+	// 		};
+	// 	}
+
+	// 	// Start with the provided URL or default to the filtered adventures endpoint
+	// 	let url: string = next || previous || '/api/adventures/filtered';
+
+	// 	// Extract the path starting from '/api/adventures'
+	// 	const apiIndex = url.indexOf('/api/adventures');
+	// 	if (apiIndex !== -1) {
+	// 		url = url.slice(apiIndex);
+	// 	} else {
+	// 		url = '/api/adventures/filtered';
+	// 	}
+
+	// 	// Replace or add the page number in the URL
+	// 	if (url.includes('page=')) {
+	// 		url = url.replace(/page=\d+/, `page=${page}`);
+	// 	} else {
+	// 		// If 'page=' is not in the URL, add it
+	// 		url += url.includes('?') ? '&' : '?';
+	// 		url += `page=${page}`;
+	// 	}
+
+	// 	const fullUrl = `${serverEndpoint}${url}`;
+	// 	console.log(fullUrl);
+	// 	console.log(serverEndpoint);
+
+	// 	try {
+	// 		const response = await fetch(fullUrl, {
+	// 			headers: {
+	// 				'Content-Type': 'application/json',
+	// 				Cookie: `${event.cookies.get('auth')}`
+	// 			}
+	// 		});
+
+	// 		if (!response.ok) {
+	// 			throw new Error(`HTTP error! status: ${response.status}`);
+	// 		}
+	// 		const data = await response.json();
+	// 		let adventures = data.results as Adventure[];
+	// 		let next = data.next;
+	// 		let previous = data.previous;
+	// 		let count = data.count;
+
+	// 		return {
+	// 			status: 200,
+	// 			body: {
+	// 				adventures,
+	// 				next,
+	// 				previous,
+	// 				count,
+	// 				page
+	// 			}
+	// 		};
+	// 	} catch (error) {
+	// 		console.error('Error fetching data:', error);
+	// 		return {
+	// 			status: 500,
+	// 			body: { error: 'Failed to fetch data' }
+	// 		};
+	// 	}
+	// },
+	// all: async (event) => {
+	// 	if (!event.locals.user) {
+	// 		return {
+	// 			status: 401,
+	// 			body: { message: 'Unauthorized' }
+	// 		};
+	// 	}
+
+	// 	const formData = await event.request.formData();
+
+	// 	let include_collections = formData.get('include_collections') as string;
+
+	// 	if (include_collections !== 'true' && include_collections !== 'false') {
+	// 		include_collections = 'false';
+	// 	}
+
+	// 	let adventures: Adventure[] = [];
+
+	// 	let visitedFetch = await fetch(
+	// 		`${serverEndpoint}/api/adventures/all/?include_collections=${include_collections}`,
+	// 		{
+	// 			headers: {
+	// 				Cookie: `${event.cookies.get('auth')}`,
+	// 				'Content-Type': 'application/json'
+	// 			}
+	// 		}
+	// 	);
+	// 	if (!visitedFetch.ok) {
+	// 		console.error('Failed to fetch all adventures');
+	// 		return redirect(302, '/login');
+	// 	} else {
+	// 		console.log('Fetched all adventures');
+	// 		let res = await visitedFetch.json();
+	// 		console.log(res);
+	// 		adventures = res as Adventure[];
+	// 	}
+
+	// 	return {
+	// 		adventures
+	// 	};
+	// }
 };
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 9837da60..192bd58d 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { enhance, deserialize } from '$app/forms';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import EditAdventure from '$lib/components/EditAdventure.svelte';
 	import NewAdventure from '$lib/components/NewAdventure.svelte';
@@ -20,46 +22,46 @@
 
 	let resultsPerPage: number = 25;
 
-	let next: string | null = data.props.next || null;
-	let previous: string | null = data.props.previous || null;
+	// let next: string | null = data.props.next || null;
+	// let previous: string | null = data.props.previous || null;
 	let count = data.props.count || 0;
 	let totalPages = Math.ceil(count / resultsPerPage);
 	let currentPage: number = 1;
 
-	function handleChangePage() {
-		return async ({ result }: any) => {
-			if (result.type === 'success') {
-				console.log(result.data);
-				adventures = result.data.body.adventures as Adventure[];
-				next = result.data.body.next;
-				previous = result.data.body.previous;
-				count = result.data.body.count;
-				currentPage = result.data.body.page;
-				totalPages = Math.ceil(count / resultsPerPage);
-			}
-		};
-	}
+	function handleChangePage(pageNumber: number) {
+		// let query = new URLSearchParams($page.url.searchParams.toString());
 
-	function handleSubmit() {
-		return async ({ result, update }: any) => {
-			// First, call the update function with reset: false
-			update({ reset: false });
+		// query.set('page', pageNumber.toString());
 
-			// Then, handle the result
-			if (result.type === 'success') {
-				if (result.data) {
-					// console.log(result.data);
-					adventures = result.data.adventures as Adventure[];
-					next = result.data.next;
-					previous = result.data.previous;
-					count = result.data.count;
-					totalPages = Math.ceil(count / resultsPerPage);
-					currentPage = 1;
+		// console.log(query.toString());
+		currentPage = pageNumber;
 
-					console.log(next);
-				}
-			}
-		};
+		let url = new URL(window.location.href);
+		url.searchParams.set('page', pageNumber.toString());
+		adventures = [];
+		adventures = data.props.adventures;
+		console.log(adventures);
+		goto(url.toString(), { invalidateAll: true, replaceState: true });
+
+		// goto(`?${query.toString()}`, { invalidateAll: true });
+	}
+
+	$: {
+		let url = new URL($page.url);
+		let page = url.searchParams.get('page');
+		if (page) {
+			currentPage = parseInt(page);
+		}
+	}
+
+	$: {
+		if (data.props.adventures) {
+			adventures = data.props.adventures;
+		}
+		if (data.props.count) {
+			count = data.props.count;
+			totalPages = Math.ceil(count / resultsPerPage);
+		}
 	}
 
 	function sort({ attribute, order }: { attribute: string; order: string }) {
@@ -193,19 +195,16 @@
 			</div>
 
 			<div class="join flex items-center justify-center mt-4">
-				{#if next || previous}
+				{#if totalPages > 1}
 					<div class="join">
 						{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
-							<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
-								<input type="hidden" name="page" value={page} />
-								<input type="hidden" name="next" value={next} />
-								<input type="hidden" name="previous" value={previous} />
-								{#if currentPage != page}
-									<button class="join-item btn btn-lg">{page}</button>
-								{:else}
-									<button class="join-item btn btn-lg btn-active">{page}</button>
-								{/if}
-							</form>
+							{#if currentPage != page}
+								<button class="join-item btn btn-lg" on:click={() => handleChangePage(page)}
+									>{page}</button
+								>
+							{:else}
+								<button class="join-item btn btn-lg btn-active">{page}</button>
+							{/if}
 						{/each}
 					</div>
 				{/if}
@@ -219,7 +218,7 @@
 			<!-- Sidebar content here -->
 			<div class="form-control">
 				<h3 class="text-center font-bold text-lg mb-4">Adventure Types</h3>
-				<form action="?/get" method="post" use:enhance={handleSubmit}>
+				<form method="get">
 					<label class="label cursor-pointer">
 						<span class="label-text">Completed</span>
 						<input

From 77c11fefeacd7aea5fa060fb620b673493b63dbc Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 5 Aug 2024 09:59:34 -0400
Subject: [PATCH 3/3] better filters

---
 .../src/routes/adventures/+page.server.ts     | 198 ------------------
 frontend/src/routes/adventures/+page.svelte   |  58 +++--
 2 files changed, 41 insertions(+), 215 deletions(-)

diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts
index db019cf7..1b0edcf2 100644
--- a/frontend/src/routes/adventures/+page.server.ts
+++ b/frontend/src/routes/adventures/+page.server.ts
@@ -403,202 +403,4 @@ export const actions: Actions = {
 		let link_url = adventure.link;
 		return { image_url, link_url };
 	}
-	// get: async (event) => {
-	// 	if (!event.locals.user) {
-	// 	}
-
-	// 	const formData = await event.request.formData();
-	// 	const visited = formData.get('visited');
-	// 	const planned = formData.get('planned');
-
-	// 	let include_collections = formData.get('include_collections') as string;
-
-	// 	if (include_collections) {
-	// 		include_collections = 'true';
-	// 	} else {
-	// 		include_collections = 'false';
-	// 	}
-
-	// 	const order_direction = formData.get('order_direction') as string;
-	// 	const order_by = formData.get('order_by') as string;
-
-	// 	console.log(order_direction, order_by);
-
-	// 	let adventures: Adventure[] = [];
-
-	// 	if (!event.locals.user) {
-	// 		return {
-	// 			status: 401,
-	// 			body: { message: 'Unauthorized' }
-	// 		};
-	// 	}
-
-	// 	let filterString = '';
-	// 	if (visited) {
-	// 		filterString += 'visited';
-	// 	}
-	// 	if (planned) {
-	// 		if (filterString) {
-	// 			filterString += ',';
-	// 		}
-	// 		filterString += 'planned';
-	// 	}
-	// 	if (!filterString) {
-	// 		filterString = '';
-	// 	}
-
-	// 	let next = null;
-	// 	let previous = null;
-	// 	let count = 0;
-
-	// 	console.log(filterString);
-
-	// 	let visitedFetch = await fetch(
-	// 		`${serverEndpoint}/api/adventures/filtered?types=${filterString}&order_by=${order_by}&order_direction=${order_direction}&include_collections=${include_collections}`,
-	// 		{
-	// 			headers: {
-	// 				Cookie: `${event.cookies.get('auth')}`
-	// 			}
-	// 		}
-	// 	);
-	// 	if (!visitedFetch.ok) {
-	// 		console.error('Failed to fetch visited adventures');
-	// 		return redirect(302, '/login');
-	// 	} else {
-	// 		let res = await visitedFetch.json();
-	// 		let visited = res.results as Adventure[];
-	// 		next = res.next;
-	// 		previous = res.previous;
-	// 		count = res.count;
-	// 		adventures = [...adventures, ...visited];
-	// 		console.log(next, previous, count);
-	// 	}
-
-	// 	return {
-	// 		adventures,
-	// 		next,
-	// 		previous,
-	// 		count
-	// 	};
-	// },
-	// changePage: async (event) => {
-	// 	const formData = await event.request.formData();
-	// 	const next = formData.get('next') as string;
-	// 	const previous = formData.get('previous') as string;
-	// 	const page = formData.get('page') as string;
-
-	// 	if (!event.locals.user) {
-	// 		return {
-	// 			status: 401,
-	// 			body: { message: 'Unauthorized' }
-	// 		};
-	// 	}
-
-	// 	if (!page) {
-	// 		return {
-	// 			status: 400,
-	// 			body: { error: 'Missing required fields' }
-	// 		};
-	// 	}
-
-	// 	// Start with the provided URL or default to the filtered adventures endpoint
-	// 	let url: string = next || previous || '/api/adventures/filtered';
-
-	// 	// Extract the path starting from '/api/adventures'
-	// 	const apiIndex = url.indexOf('/api/adventures');
-	// 	if (apiIndex !== -1) {
-	// 		url = url.slice(apiIndex);
-	// 	} else {
-	// 		url = '/api/adventures/filtered';
-	// 	}
-
-	// 	// Replace or add the page number in the URL
-	// 	if (url.includes('page=')) {
-	// 		url = url.replace(/page=\d+/, `page=${page}`);
-	// 	} else {
-	// 		// If 'page=' is not in the URL, add it
-	// 		url += url.includes('?') ? '&' : '?';
-	// 		url += `page=${page}`;
-	// 	}
-
-	// 	const fullUrl = `${serverEndpoint}${url}`;
-	// 	console.log(fullUrl);
-	// 	console.log(serverEndpoint);
-
-	// 	try {
-	// 		const response = await fetch(fullUrl, {
-	// 			headers: {
-	// 				'Content-Type': 'application/json',
-	// 				Cookie: `${event.cookies.get('auth')}`
-	// 			}
-	// 		});
-
-	// 		if (!response.ok) {
-	// 			throw new Error(`HTTP error! status: ${response.status}`);
-	// 		}
-	// 		const data = await response.json();
-	// 		let adventures = data.results as Adventure[];
-	// 		let next = data.next;
-	// 		let previous = data.previous;
-	// 		let count = data.count;
-
-	// 		return {
-	// 			status: 200,
-	// 			body: {
-	// 				adventures,
-	// 				next,
-	// 				previous,
-	// 				count,
-	// 				page
-	// 			}
-	// 		};
-	// 	} catch (error) {
-	// 		console.error('Error fetching data:', error);
-	// 		return {
-	// 			status: 500,
-	// 			body: { error: 'Failed to fetch data' }
-	// 		};
-	// 	}
-	// },
-	// all: async (event) => {
-	// 	if (!event.locals.user) {
-	// 		return {
-	// 			status: 401,
-	// 			body: { message: 'Unauthorized' }
-	// 		};
-	// 	}
-
-	// 	const formData = await event.request.formData();
-
-	// 	let include_collections = formData.get('include_collections') as string;
-
-	// 	if (include_collections !== 'true' && include_collections !== 'false') {
-	// 		include_collections = 'false';
-	// 	}
-
-	// 	let adventures: Adventure[] = [];
-
-	// 	let visitedFetch = await fetch(
-	// 		`${serverEndpoint}/api/adventures/all/?include_collections=${include_collections}`,
-	// 		{
-	// 			headers: {
-	// 				Cookie: `${event.cookies.get('auth')}`,
-	// 				'Content-Type': 'application/json'
-	// 			}
-	// 		}
-	// 	);
-	// 	if (!visitedFetch.ok) {
-	// 		console.error('Failed to fetch all adventures');
-	// 		return redirect(302, '/login');
-	// 	} else {
-	// 		console.log('Fetched all adventures');
-	// 		let res = await visitedFetch.json();
-	// 		console.log(res);
-	// 		adventures = res as Adventure[];
-	// 	}
-
-	// 	return {
-	// 		adventures
-	// 	};
-	// }
 };
diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte
index 192bd58d..5bd6a99b 100644
--- a/frontend/src/routes/adventures/+page.svelte
+++ b/frontend/src/routes/adventures/+page.svelte
@@ -15,15 +15,19 @@
 
 	let adventures: Adventure[] = data.props.adventures || [];
 
-	let currentSort = { attribute: 'name', order: 'asc' };
+	let currentSort = {
+		order_by: '',
+		order: '',
+		visited: true,
+		planned: true,
+		includeCollections: true
+	};
 
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
 	let resultsPerPage: number = 25;
 
-	// let next: string | null = data.props.next || null;
-	// let previous: string | null = data.props.previous || null;
 	let count = data.props.count || 0;
 	let totalPages = Math.ceil(count / resultsPerPage);
 	let currentPage: number = 1;
@@ -40,7 +44,7 @@
 		url.searchParams.set('page', pageNumber.toString());
 		adventures = [];
 		adventures = data.props.adventures;
-		console.log(adventures);
+
 		goto(url.toString(), { invalidateAll: true, replaceState: true });
 
 		// goto(`?${query.toString()}`, { invalidateAll: true });
@@ -64,15 +68,30 @@
 		}
 	}
 
-	function sort({ attribute, order }: { attribute: string; order: string }) {
-		currentSort.attribute = attribute;
-		currentSort.order = order;
-		if (attribute === 'name') {
-			if (order === 'asc') {
-				adventures = adventures.sort((a, b) => b.name.localeCompare(a.name));
-			} else {
-				adventures = adventures.sort((a, b) => a.name.localeCompare(b.name));
-			}
+	$: {
+		let url = new URL($page.url);
+		currentSort.order_by = url.searchParams.get('order_by') || 'updated_at';
+		currentSort.order = url.searchParams.get('order_direction') || 'asc';
+
+		if (url.searchParams.get('planned') === 'on') {
+			currentSort.planned = true;
+		} else {
+			currentSort.planned = false;
+		}
+		if (url.searchParams.get('visited') === 'on') {
+			currentSort.visited = true;
+		} else {
+			currentSort.visited = false;
+		}
+		if (url.searchParams.get('include_collections') === 'on') {
+			currentSort.includeCollections = true;
+		} else {
+			currentSort.includeCollections = false;
+		}
+
+		if (!currentSort.visited && !currentSort.planned) {
+			currentSort.visited = true;
+			currentSort.planned = true;
 		}
 	}
 
@@ -226,7 +245,7 @@
 							name="visited"
 							id="visited"
 							class="checkbox checkbox-primary"
-							checked
+							checked={currentSort.visited}
 						/>
 					</label>
 					<label class="label cursor-pointer">
@@ -236,7 +255,7 @@
 							id="planned"
 							name="planned"
 							class="checkbox checkbox-primary"
-							checked
+							checked={currentSort.planned}
 						/>
 					</label>
 					<!-- <div class="divider"></div> -->
@@ -250,7 +269,7 @@
 							id="asc"
 							value="asc"
 							aria-label="Ascending"
-							checked
+							checked={currentSort.order === 'asc'}
 						/>
 						<input
 							class="join-item btn btn-neutral"
@@ -259,6 +278,7 @@
 							id="desc"
 							value="desc"
 							aria-label="Descending"
+							checked={currentSort.order === 'desc'}
 						/>
 					</div>
 					<br />
@@ -271,7 +291,7 @@
 							id="updated_at"
 							value="updated_at"
 							aria-label="Updated"
-							checked
+							checked={currentSort.order_by === 'updated_at'}
 						/>
 						<input
 							class="join-item btn btn-neutral"
@@ -280,6 +300,7 @@
 							id="name"
 							aria-label="Name"
 							value="name"
+							checked={currentSort.order_by === 'name'}
 						/>
 						<input
 							class="join-item btn btn-neutral"
@@ -288,6 +309,7 @@
 							name="order_by"
 							id="date"
 							aria-label="Date"
+							checked={currentSort.order_by === 'date'}
 						/>
 						<input
 							class="join-item btn btn-neutral"
@@ -296,6 +318,7 @@
 							id="rating"
 							aria-label="Rating"
 							value="rating"
+							checked={currentSort.order_by === 'rating'}
 						/>
 					</div>
 
@@ -308,6 +331,7 @@
 							name="include_collections"
 							id="include_collections"
 							class="checkbox checkbox-primary"
+							checked={currentSort.includeCollections}
 						/>
 					</label>
 					<button type="submit" class="btn btn-success mt-4">Filter</button>