pagination!

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

@@ -34,8 +34,8 @@ export const actions: Actions = {
 			}
 		});
 		if (res.ok) {
-			cookies.delete('auth', { path: '/' });
-			cookies.delete('refresh', { path: '/' });
+			cookies.delete('auth', { path: '/', secure: false });
+			cookies.delete('refresh', { path: '/', secure: false });
 			return redirect(302, '/login');
 		} else {
 			return redirect(302, '/');

frontend/src/routes/adventures/+page.server.ts

@@ -13,32 +13,37 @@ 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 visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
+		let initialFetch = await fetch(
+			`${serverEndpoint}/api/adventures/filtered?types=visited,planned`,
+			{
+				headers: {
+					Cookie: `${event.cookies.get('auth')}`
+				}
 			}
-		});
-		if (!visitedFetch.ok) {
+		);
+		if (!initialFetch.ok) {
 			console.error('Failed to fetch visited adventures');
 			return redirect(302, '/login');
 		} else {
-			let visited = (await visitedFetch.json()) as Adventure[];
+			let res = await initialFetch.json();
+			let visited = res.results as Adventure[];
+			next = res.next;
+			previous = res.previous;
+			count = res.count;
 			adventures = [...adventures, ...visited];
 		}
-		let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
-			headers: {
-				Cookie: `${event.cookies.get('auth')}`
+
+		return {
+			props: {
+				adventures,
+				next,
+				previous
 			}
-		});
-		if (!plannedFetch.ok) {
-			console.error('Failed to fetch visited adventures');
-			return redirect(302, '/login');
-		} else {
-			let planned = (await plannedFetch.json()) as Adventure[];
-			adventures = [...adventures, ...planned];
-		}
-		return { adventures } as { adventures: Adventure[] };
+		};
 	}
 }) satisfies PageServerLoad;
 
@@ -366,49 +371,55 @@ export const actions: Actions = {
 			};
 		}
 
+		let filterString = '';
 		if (visited) {
-			let visitedFetch = await fetch(`${serverEndpoint}/api/adventures/visited/`, {
-				headers: {
-					Cookie: `${event.cookies.get('auth')}`
-				}
-			});
-			if (!visitedFetch.ok) {
-				console.error('Failed to fetch visited adventures');
-				return redirect(302, '/login');
-			} else {
-				let visited = (await visitedFetch.json()) as Adventure[];
-				adventures = [...adventures, ...visited];
-			}
+			filterString += 'visited';
 		}
 		if (planned) {
-			let plannedFetch = await fetch(`${serverEndpoint}/api/adventures/planned/`, {
-				headers: {
-					Cookie: `${event.cookies.get('auth')}`
-				}
-			});
-			if (!plannedFetch.ok) {
-				console.error('Failed to fetch visited adventures');
-				return redirect(302, '/login');
-			} else {
-				let planned = (await plannedFetch.json()) as Adventure[];
-				adventures = [...adventures, ...planned];
+			if (filterString) {
+				filterString += ',';
 			}
+			filterString += 'planned';
 		}
 		if (featured) {
-			let featuredFetch = await fetch(`${serverEndpoint}/api/adventures/featured/`, {
+			if (filterString) {
+				filterString += ',';
+			}
+			filterString += 'featured';
+		}
+		if (!filterString) {
+			filterString = '';
+		}
+
+		let next = null;
+		let previous = null;
+		let count = 0;
+
+		let visitedFetch = await fetch(
+			`${serverEndpoint}/api/adventures/filtered?types=${filterString}`,
+			{
 				headers: {
 					Cookie: `${event.cookies.get('auth')}`
 				}
-			});
-			if (!featuredFetch.ok) {
-				console.error('Failed to fetch visited adventures');
-				return redirect(302, '/login');
-			} else {
-				let featured = (await featuredFetch.json()) as Adventure[];
-				adventures = [...adventures, ...featured];
 			}
+		);
+		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(adventures);
-		return adventures as Adventure[];
+
+		return {
+			adventures,
+			next,
+			previous,
+			count
+		};
 	}
 };

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

@@ -11,13 +11,34 @@
 	export let data: any;
 	console.log(data);
 
-	let adventures: Adventure[] = data.adventures || [];
+	let adventures: Adventure[] = data.props.adventures || [];
 
 	let currentSort = { attribute: 'name', order: 'asc' };
 
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
+	let next: string | null = null;
+	let previous: string | null = null;
+	let count = 0;
+
+	async function changePage(direction: string) {
+		let url: string = '';
+		if (direction === 'next' && next) {
+			url = next;
+		} else if (direction === 'previous' && previous) {
+			url = previous;
+		} else {
+			return;
+		}
+		let res = await fetch(url);
+		let result = await res.json();
+		adventures = result.results as Adventure[];
+		next = result.next;
+		previous = result.previous;
+		count = result.count;
+	}
+
 	function handleSubmit() {
 		return async ({ result, update }: any) => {
 			// First, call the update function with reset: false
@@ -27,8 +48,11 @@
 			if (result.type === 'success') {
 				if (result.data) {
 					// console.log(result.data);
-					adventures = result.data as Adventure[];
-					sort(currentSort);
+					adventures = result.data.adventures as Adventure[];
+					next = result.data.next;
+					previous = result.data.previous;
+					count = result.data.count;
+					// sort(currentSort);
 				}
 			}
 		};
@@ -39,9 +63,9 @@
 		currentSort.order = order;
 		if (attribute === 'name') {
 			if (order === 'asc') {
-				adventures = adventures.sort((a, b) => a.name.localeCompare(b.name));
-			} else {
 				adventures = adventures.sort((a, b) => b.name.localeCompare(a.name));
+			} else {
+				adventures = adventures.sort((a, b) => a.name.localeCompare(b.name));
 			}
 		}
 	}
@@ -140,6 +164,7 @@
 	<div class="drawer-content">
 		<!-- Page content -->
 		<h1 class="text-center font-bold text-4xl mb-6">My Adventures</h1>
+		<p class="text-center">This search returned {count} results.</p>
 		{#if adventures.length === 0}
 			<NotFound />
 		{/if}
@@ -160,6 +185,17 @@
 					/>
 				{/each}
 			</div>
+			<div class="join grid grid-cols-2">
+				{#if previous}
+					<button class="join-item btn btn-outline" on:click={() => changePage('previous')}
+						>Previous page</button
+					>
+				{/if}
+				{#if next}
+					<button class="join-item btn btn-outline" on:click={() => changePage('next')}>Next</button
+					>
+				{/if}
+			</div>
 		</div>
 	</div>
 	<div class="drawer-side">

frontend/src/routes/login/+page.server.ts

@@ -60,13 +60,15 @@ export const actions: Actions = {
 				httpOnly: true,
 				sameSite: 'lax',
 				expires: new Date(Date.now() + 60 * 60 * 1000), // 60 minutes
-				path: '/'
+				path: '/',
+				secure: false
 			});
 			event.cookies.set('refresh', refreshToken, {
 				httpOnly: true,
 				sameSite: 'lax',
 				expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000), // 1 year
-				path: '/'
+				path: '/',
+				secure: false
 			});
 
 			return redirect(302, '/');