feat: Add country name to region page

backend/server/adventures/urls.py

@@ -1,10 +1,11 @@
 from django.urls import include, path
 from rest_framework.routers import DefaultRouter
-from .views import AdventureViewSet, TripViewSet
+from .views import AdventureViewSet, TripViewSet, StatsViewSet
 
 router = DefaultRouter()
 router.register(r'adventures', AdventureViewSet, basename='adventures')
 router.register(r'trips', TripViewSet, basename='trips')
+router.register(r'stats', StatsViewSet, basename='stats')
 
 urlpatterns = [
     # Include the router under the 'api/' prefix

backend/server/adventures/views.py

@@ -2,6 +2,7 @@ from rest_framework.decorators import action
 from rest_framework import viewsets
 from rest_framework.response import Response
 from .models import Adventure, Trip
+from worldtravel.models import VisitedRegion
 from .serializers import AdventureSerializer, TripSerializer
 from rest_framework.permissions import IsAuthenticated
 from django.db.models import Q, Prefetch
@@ -73,3 +74,29 @@ class TripViewSet(viewsets.ModelViewSet):
         trips = self.get_queryset().filter(type='featured', is_public=True)
         serializer = self.get_serializer(trips, many=True)
         return Response(serializer.data)
+    
+class StatsViewSet(viewsets.ViewSet):
+    permission_classes = [IsAuthenticated]
+
+    @action(detail=False, methods=['get'])
+    def counts(self, request):
+        visited_count = Adventure.objects.filter(
+            type='visited', user_id=request.user.id).count()
+        planned_count = Adventure.objects.filter(
+            type='planned', user_id=request.user.id).count()
+        featured_count = Adventure.objects.filter(
+            type='featured', is_public=True).count()
+        trips_count = Trip.objects.filter(
+            user_id=request.user.id).count()
+        region_count = VisitedRegion.objects.filter(
+            user_id=request.user.id).count()
+        country_count = VisitedRegion.objects.filter(
+            user_id=request.user.id).values('region__country').distinct().count()
+        return Response({
+            'visited_count': visited_count,
+            'planned_count': planned_count,
+            'featured_count': featured_count,
+            'trips_count': trips_count,
+            'region_count': region_count,
+            'country_count': country_count,
+        })

frontend/src/lib/components/RegionCard.svelte

@@ -10,8 +10,6 @@
 
 	export let visit_id: number | undefined | null;
 
-	console.log(visit_id);
-
 	async function markVisited() {
 		let res = await fetch(`/worldtravel?/markVisited`, {
 			method: 'POST',
@@ -47,6 +45,7 @@
 		if (res.ok) {
 			visited = false;
 			addToast('info', `Visit to ${region.name} removed`);
+			dispatch('remove', null);
 		} else {
 			console.error('Failed to remove visit');
 		}

frontend/src/lib/types.ts

@@ -37,7 +37,7 @@ export type Country = {
 export type Region = {
 	id: number;
 	name: string;
-	country_id: number;
+	country: number;
 };
 
 export type VisitedRegion = {

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

@@ -67,8 +67,6 @@ export const actions: Actions = {
 	removeVisited: async (event) => {
 		const body = await event.request.json();
 
-		console.log(body);
-
 		if (!body || !body.visitId) {
 			return {
 				status: 400

frontend/src/routes/worldtravel/[id]/+page.server.ts

@@ -1,5 +1,5 @@
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
-import type { Region, VisitedRegion } from '$lib/types';
+import type { Country, Region, VisitedRegion } from '$lib/types';
 import type { PageServerLoad } from './$types';
 
 const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
@@ -9,6 +9,7 @@ export const load = (async (event) => {
 
 	let regions: Region[] = [];
 	let visitedRegions: VisitedRegion[] = [];
+	let country: Country;
 
 	let res = await fetch(`${endpoint}/api/${id}/regions/`, {
 		method: 'GET',
@@ -23,6 +24,11 @@ export const load = (async (event) => {
 		regions = (await res.json()) as Region[];
 	}
 
+	if (regions.length === 0) {
+		console.error('No regions found');
+		return { status: 404 };
+	}
+
 	res = await fetch(`${endpoint}/api/${id}/visits/`, {
 		method: 'GET',
 		headers: {
@@ -36,10 +42,24 @@ export const load = (async (event) => {
 		visitedRegions = (await res.json()) as VisitedRegion[];
 	}
 
+	res = await fetch(`${endpoint}/api/countries/${regions[0].country}/`, {
+		method: 'GET',
+		headers: {
+			Cookie: `${event.cookies.get('auth')}`
+		}
+	});
+	if (!res.ok) {
+		console.error('Failed to fetch country');
+		return { status: 500 };
+	} else {
+		country = (await res.json()) as Country;
+	}
+
 	return {
 		props: {
 			regions,
-			visitedRegions
+			visitedRegions,
+			country
 		}
 	};
 }) satisfies PageServerLoad;

frontend/src/routes/worldtravel/[id]/+page.svelte

@@ -5,11 +5,27 @@
 	export let data: PageData;
 	let regions: Region[] = data.props?.regions || [];
 	let visitedRegions: VisitedRegion[] = data.props?.visitedRegions || [];
-
+	const country = data.props?.country || null;
 	console.log(data);
+
+	let numRegions: number = regions.length;
+	let numVisitedRegions: number = visitedRegions.length;
 </script>
 
-<h1 class="text-center font-bold text-4xl mb-4">Regions</h1>
+<h1 class="text-center font-bold text-4xl mb-4">Regions in {country?.name}</h1>
+<div class="flex items-center justify-center mb-4">
+	<div class="stats shadow bg-base-300">
+		<div class="stat">
+			<div class="stat-title">Region Stats</div>
+			<div class="stat-value">{numVisitedRegions}/{numRegions} Visited</div>
+			{#if numRegions === numVisitedRegions}
+				<div class="stat-desc">You've visited all regions in {country?.name} 🎉!</div>
+			{:else}
+				<div class="stat-desc">Keep exploring!</div>
+			{/if}
+		</div>
+	</div>
+</div>
 
 <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
 	{#each regions as region}
@@ -18,8 +34,10 @@
 			visited={visitedRegions.some((visitedRegion) => visitedRegion.region === region.id)}
 			on:visit={(e) => {
 				visitedRegions = [...visitedRegions, e.detail];
+				numVisitedRegions++;
 			}}
 			visit_id={visitedRegions.find((visitedRegion) => visitedRegion.region === region.id)?.id}
+			on:remove={() => numVisitedRegions--}
 		/>
 	{/each}
 </div>