pagination! fixed for private

backend/server/adventures/views.py

@@ -12,7 +12,7 @@
 from rest_framework.pagination import PageNumberPagination
 
 class StandardResultsSetPagination(PageNumberPagination):
-    page_size = 6
+    page_size = 10
     page_size_query_param = 'page_size'
     max_page_size = 1000
 

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

@@ -428,19 +428,37 @@ export const actions: Actions = {
 	},
 	changePage: async (event) => {
 		const formData = await event.request.formData();
-		const url = formData.get('url');
+		const next = formData.get('next') as string;
+		const previous = formData.get('previous') as string;
+		const page = formData.get('page') as string;
 
-		console.log('Received URL:', url);
-
-		if (!url) {
+		if (!page) {
 			return {
 				status: 400,
-				body: { error: 'URL is required' }
+				body: { error: 'Missing required fields' }
 			};
 		}
 
+		// Start with the current URL if next and previous are not provided
+		let url: string = next || previous || event.url.toString();
+
+		let index = url.indexOf('/api');
+		let newUrl = url.substring(index);
+		console.log('NEW URL' + newUrl);
+		url = serverEndpoint + newUrl;
+		console.log('URL' + url);
+
+		// 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}`;
+		}
+
 		try {
-			const response = await fetch(url.toString(), {
+			const response = await fetch(url, {
 				headers: {
 					'Content-Type': 'application/json',
 					Cookie: `${event.cookies.get('auth')}`

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

@@ -18,9 +18,12 @@
 	let isShowingCreateModal: boolean = false;
 	let newType: string = '';
 
+	let resultsPerPage: number = 10;
+
 	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);
 
 	function handleChangePage() {
 		return async ({ result }: any) => {
@@ -30,6 +33,7 @@
 				next = result.data.body.next;
 				previous = result.data.body.previous;
 				count = result.data.body.count;
+				totalPages = Math.ceil(count / resultsPerPage);
 			}
 		};
 	}
@@ -47,6 +51,7 @@
 					next = result.data.next;
 					previous = result.data.previous;
 					count = result.data.count;
+					totalPages = Math.ceil(count / resultsPerPage);
 					console.log(next);
 				}
 			}
@@ -182,17 +187,17 @@
 			</div>
 			<div class="join grid grid-cols-2">
 				<div class="join grid grid-cols-2">
-					{#if previous}
-						<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
-							<input type="hidden" name="url" value={previous} />
-							<button class="join-item btn btn-outline" type="submit">Previous page</button>
-						</form>
-					{/if}
-					{#if next}
-						<form action="?/changePage" method="POST" use:enhance={handleChangePage}>
-							<input type="hidden" name="url" value={next} />
-							<button class="join-item btn btn-outline" type="submit">Next page</button>
-						</form>
+					{#if next || previous}
+						<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} />
+									<button class="join-item btn">{page}</button>
+								</form>
+							{/each}
+						</div>
 					{/if}
 				</div>
 			</div>