pagination!

backend/server/adventures/views.py

@@ -7,10 +7,23 @@ from .serializers import AdventureSerializer, TripSerializer
 from rest_framework.permissions import IsAuthenticated
 from django.db.models import Q, Prefetch
 from .permissions import IsOwnerOrReadOnly, IsPublicReadOnly
+from rest_framework.pagination import PageNumberPagination
+
+class StandardResultsSetPagination(PageNumberPagination):
+    page_size = 6
+    page_size_query_param = 'page_size'
+    max_page_size = 1000
+
+from rest_framework.pagination import PageNumberPagination
+
+from rest_framework.decorators import action
+from rest_framework.response import Response
+from django.db.models import Q
 
 class AdventureViewSet(viewsets.ModelViewSet):
     serializer_class = AdventureSerializer
     permission_classes = [IsOwnerOrReadOnly, IsPublicReadOnly]
+    pagination_class = StandardResultsSetPagination
 
     def get_queryset(self):
         return Adventure.objects.filter(
@@ -21,24 +34,33 @@ class AdventureViewSet(viewsets.ModelViewSet):
         serializer.save(user_id=self.request.user)
 
     @action(detail=False, methods=['get'])
-    def visited(self, request):
-        visited_adventures = Adventure.objects.filter(
-            type='visited', user_id=request.user.id, trip=None)
-        serializer = self.get_serializer(visited_adventures, many=True)
-        return Response(serializer.data)
+    def filtered(self, request):
+        types = request.query_params.get('types', '').split(',')
+        valid_types = ['visited', 'planned', 'featured']
+        types = [t for t in types if t in valid_types]
 
-    @action(detail=False, methods=['get'])
-    def planned(self, request):
-        planned_adventures = Adventure.objects.filter(
-            type='planned', user_id=request.user.id, trip=None)
-        serializer = self.get_serializer(planned_adventures, many=True)
-        return Response(serializer.data)
+        if not types:
+            return Response({"error": "No valid types provided"}, status=400)
 
-    @action(detail=False, methods=['get'])
-    def featured(self, request):
-        featured_adventures = Adventure.objects.filter(
+        queryset = Adventure.objects.none()
+
+        for adventure_type in types:
+            if adventure_type in ['visited', 'planned']:
+                queryset |= Adventure.objects.filter(
+                    type=adventure_type, user_id=request.user.id, trip=None)
+            elif adventure_type == 'featured':
+                queryset |= Adventure.objects.filter(
                     type='featured', is_public=True, trip=None)
-        serializer = self.get_serializer(featured_adventures, many=True)
+
+        return self.paginate_and_respond(queryset, request)
+
+    def paginate_and_respond(self, queryset, request):
+        paginator = self.pagination_class()
+        page = paginator.paginate_queryset(queryset, request)
+        if page is not None:
+            serializer = self.get_serializer(page, many=True)
+            return paginator.get_paginated_response(serializer.data)
+        serializer = self.get_serializer(queryset, many=True)
         return Response(serializer.data)
 
 class TripViewSet(viewsets.ModelViewSet):
@@ -57,11 +79,12 @@ class TripViewSet(viewsets.ModelViewSet):
     def perform_create(self, serializer):
         serializer.save(user_id=self.request.user)
 
+    @action(detail=False, methods=['get'])
     @action(detail=False, methods=['get'])
     def visited(self, request):
-        trips = self.get_queryset().filter(type='visited', user_id=request.user.id)
-        serializer = self.get_serializer(trips, many=True)
-        return Response(serializer.data)
+        visited_adventures = Adventure.objects.filter(
+            type='visited', user_id=request.user.id, trip=None)
+        return self.get_paginated_response(visited_adventures)
 
     @action(detail=False, methods=['get'])
     def planned(self, request):

docker-compose.yml

@@ -2,11 +2,11 @@ version: "3.9"
 
 services:
   web:
-    #build: ./frontend/
-    image: ghcr.io/seanmorley15/adventurelog-frontend:latest
+    build: ./frontend/
+    #image: ghcr.io/seanmorley15/adventurelog-frontend:latest
     environment:
       - PUBLIC_SERVER_URL=http://server:8000
-      - ORIGIN=http://localhost:8080
+      - ORIGIN=http://10.0.0.92:8080
       - BODY_SIZE_LIMIT=Infinity
     ports:
       - "8080:3000"
@@ -23,8 +23,8 @@ services:
       - postgres_data:/var/lib/postgresql/data/
 
   server:
-    #build: ./backend/
-    image: ghcr.io/seanmorley15/adventurelog-backend:latest
+    build: ./backend/
+    #image: ghcr.io/seanmorley15/adventurelog-backend:latest
     environment:
       - PGHOST=db
       - PGDATABASE=database
@@ -34,7 +34,7 @@ services:
       - DJANGO_ADMIN_USERNAME=admin
       - DJANGO_ADMIN_PASSWORD=admin
       - DJANGO_ADMIN_EMAIL=admin@example.com
-      - PUBLIC_URL='http://127.0.0.1:81'
+      - PUBLIC_URL='http://10.0.92:81'
       - CSRF_TRUSTED_ORIGINS=https://api.adventurelog.app,https://adventurelog.app
       - DEBUG=False
     ports:

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/`, {
+		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/`, {
+			filterString += 'visited';
+		}
+		if (planned) {
+			if (filterString) {
+				filterString += ',';
+			}
+			filterString += 'planned';
+		}
+		if (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 (!visitedFetch.ok) {
 			console.error('Failed to fetch visited adventures');
 			return redirect(302, '/login');
 		} else {
-				let visited = (await visitedFetch.json()) as Adventure[];
+			let res = await visitedFetch.json();
+			let visited = res.results as Adventure[];
+			next = res.next;
+			previous = res.previous;
+			count = res.count;
 			adventures = [...adventures, ...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 (featured) {
-			let featuredFetch = await fetch(`${serverEndpoint}/api/adventures/featured/`, {
-				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];
-			}
-		}
-		// 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, '/');