feat: add num_cities field to RegionSerializer, update RegionCard to display city count, and enhance CSRF token handling

backend/server/worldtravel/serializers.py

@@ -33,10 +33,14 @@ class CountrySerializer(serializers.ModelSerializer):
 
 
 class RegionSerializer(serializers.ModelSerializer):
+    num_cities = serializers.SerializerMethodField()
     class Meta:
         model = Region
         fields = '__all__'
-        read_only_fields = ['id', 'name', 'country', 'longitude', 'latitude']
+        read_only_fields = ['id', 'name', 'country', 'longitude', 'latitude', 'num_cities']
+
+    def get_num_cities(self, obj):
+        return City.objects.filter(region=obj).count()
 
 class CitySerializer(serializers.ModelSerializer):
     class Meta:

frontend/src/hooks.server.ts

@@ -3,6 +3,7 @@ import { sequence } from '@sveltejs/kit/hooks';
 const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
 
 export const authHook: Handle = async ({ event, resolve }) => {
+	event.cookies.delete('csrftoken', { path: '/' });
 	try {
 		let sessionid = event.cookies.get('sessionid');
 

frontend/src/lib/components/RegionCard.svelte

@@ -54,7 +54,14 @@
 >
 	<div class="card-body">
 		<h2 class="card-title overflow-ellipsis">{region.name}</h2>
-		<p>{region.id}</p>
+		<div>
+			<div class="badge badge-primary">
+				<p>{region.id}</p>
+			</div>
+			<div class="badge badge-neutral-300">
+				<p>{region.num_cities} {$t('worldtravel.cities')}</p>
+			</div>
+		</div>
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
 			{#if !visited}
@@ -65,9 +72,11 @@
 			{#if visited}
 				<button class="btn btn-warning" on:click={removeVisit}>{$t('adventures.remove')}</button>
 			{/if}
-			<button class="btn btn-neutral-300" on:click={goToCity}
+			{#if region.num_cities > 0}
-				>{$t('worldtravel.view_cities')}</button
+				<button class="btn btn-neutral-300" on:click={goToCity}
-			>
+					>{$t('worldtravel.view_cities')}</button
+				>
+			{/if}
 		</div>
 	</div>
 </div>

frontend/src/lib/types.ts

@@ -62,6 +62,7 @@ export type Region = {
 	country: string;
 	latitude: number;
 	longitude: number;
+	num_cities: number;
 };
 
 export type City = {

frontend/src/locales/en.json

@@ -287,7 +287,8 @@
 		"marked_visited": "marked as visited",
 		"regions_in": "Regions in",
 		"region_stats": "Region Stats",
-		"all_visited": "You've visited all regions in"
+		"all_visited": "You've visited all regions in",
+		"cities": "cities"
 	},
 	"auth": {
 		"username": "Username",

frontend/src/routes/_allauth/[...path]/+server.ts

@@ -53,18 +53,25 @@ async function handleRequest(
 
 	const headers = new Headers(request.headers);
 
+	// Delete existing csrf cookie by setting an expired date
+	cookies.delete('csrftoken', { path: '/' });
+
+	// Generate a new csrf token (using your existing fetchCSRFToken function)
 	const csrfToken = await fetchCSRFToken();
 	if (!csrfToken) {
 		return json({ error: 'CSRF token is missing or invalid' }, { status: 400 });
 	}
 
+	// Set the new csrf token in both headers and cookies
+	const cookieHeader = `csrftoken=${csrfToken}; Path=/; HttpOnly; SameSite=Lax`;
+
 	try {
 		const response = await fetch(targetUrl, {
 			method: request.method,
 			headers: {
 				...Object.fromEntries(headers),
 				'X-CSRFToken': csrfToken,
-				Cookie: `csrftoken=${csrfToken}`
+				Cookie: cookieHeader
 			},
 			body:
 				request.method !== 'GET' && request.method !== 'HEAD' ? await request.text() : undefined,