Update AdventureCard component to include regionId and visited properties

src/lib/components/AdventureCard.svelte

@@ -10,6 +10,8 @@
   export let location: String | undefined = undefined;
   export let created: String | undefined = undefined;
   export let id: Number | undefined = undefined;
+  export let regionId: String | undefined = undefined;
+  export let visited: Boolean | undefined = undefined;
 
   function remove() {
     dispatch("remove", id);
@@ -20,6 +22,14 @@
   function add() {
     dispatch("add", { name, location });
   }
+  function markVisited() {
+    dispatch("markVisited", regionId);
+    visited = true;
+  }
+  function removeVisit() {
+    dispatch("removeVisit", regionId);
+    visited = false;
+  }
 </script>
 
 {#if type === "mylog"}
@@ -110,8 +120,16 @@
   >
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
+      <p>{regionId}</p>
       <div class="card-actions justify-end">
-        <button class="btn btn-primary">Mark Visited</button>
+        {#if !visited}
+          <button class="btn btn-primary" on:click={markVisited}
+            >Mark Visited</button
+          >
+        {/if}
+        {#if visited}
+          <button class="btn btn-warning" on:click={removeVisit}>Remove</button>
+        {/if}
       </div>
     </div>
   </div>

src/routes/api/regionvisit/+server.ts

@@ -0,0 +1,77 @@
+import type { RequestEvent } from "@sveltejs/kit";
+import { db } from "$lib/db/db.server";
+import { userVisitedAdventures, userVisitedWorldTravel } from "$lib/db/schema";
+import { and, eq } from "drizzle-orm";
+
+export async function POST(event: RequestEvent): Promise<Response> {
+    if (!event.locals.user) {
+        return new Response(JSON.stringify({ error: "Unauthorized" }), {
+            status: 401,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+    let body = await event.request.json();
+    let res = await db
+    .insert(userVisitedWorldTravel)
+    .values({
+        userId: event.locals.user.id,
+        region_id: body.region_id,
+    })
+    .execute();
+    return new Response(JSON.stringify({ res: res }), {
+        status: 200,
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function GET(event: RequestEvent): Promise<Response> {
+    if (!event.locals.user) {
+        return new Response(JSON.stringify({ error: "Unauthorized" }), {
+            status: 401,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+    let res = await db
+    .select()
+    .from(userVisitedWorldTravel)
+    .where(eq(userVisitedWorldTravel.userId,event.locals.user.id));
+    return new Response(JSON.stringify({ res: res }), {
+        status: 200,
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+}
+
+export async function DELETE(event: RequestEvent): Promise<Response> {
+    if (!event.locals.user) {
+        return new Response(JSON.stringify({ error: "Unauthorized" }), {
+            status: 401,
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+    }
+    let body = await event.request.json();
+    let res = await db
+    .delete(userVisitedWorldTravel)
+    .where(
+        and(
+            eq(userVisitedWorldTravel.userId, event.locals.user.id),
+            eq(userVisitedWorldTravel.region_id, body.region_id),
+        )
+    )
+    .execute();
+    return new Response(JSON.stringify({ res: res }), {
+        status: 200,
+        headers: {
+            "Content-Type": "application/json",
+        },
+    });
+}

src/routes/worldtravel/[countrycode]/+page.server.ts

@@ -1,6 +1,5 @@
-// server laod function
 import { db } from '$lib/db/db.server.js';
-import { worldTravelCountryRegions } from '$lib/db/schema.js';
+import { userVisitedWorldTravel, worldTravelCountryRegions } from '$lib/db/schema.js';
 import { eq } from 'drizzle-orm';
 import type { PageServerLoad } from './$types';
 
@@ -11,8 +10,19 @@ export const load: PageServerLoad  = async ({ params, locals })  => {
     .select()
     .from(worldTravelCountryRegions)
     .where(eq(worldTravelCountryRegions.country_code, countrycode))
+
+    let visitedRegions: { id: number; userId: string; region_id: string; }[] = [];
+    if (locals.user) {
+      visitedRegions = await db
+      .select()
+      .from(userVisitedWorldTravel)
+      .where(eq(userVisitedWorldTravel.userId, locals.user.id))
+      .execute();
+    }
+
   return {
       regions : data,
       countrycode: countrycode,
+      visitedRegions: visitedRegions,
   };
 }

src/routes/worldtravel/[countrycode]/+page.svelte

@@ -3,6 +3,48 @@
     import AdventureCard from "$lib/components/AdventureCard.svelte";
     import { countryCodeToName } from "$lib";
     import { getFlag } from "$lib";
+    import { goto } from "$app/navigation";
+    import { onMount } from "svelte";
+
+    function markVisited(event: { detail: string }) {
+        console.log(`Marked ${event.detail} as visited`);
+        fetch("/api/regionvisit", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                region_id: event.detail,
+            }),
+        }).then((response) => {
+            if (response.status === 401) {
+                goto("/login");
+            }
+            return response.json();
+        });
+    }
+
+    function removeVisit(event: { detail: string }) {
+        console.log(`Removed visit to ${event.detail}`);
+        fetch("/api/regionvisit", {
+            method: "DELETE",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+                region_id: event.detail,
+            }),
+        }).then((response) => {
+            if (response.status === 401) {
+                goto("/login");
+            }
+            return response.json();
+        });
+    }
+
+    onMount(() => {
+        console.log(data.visitedRegions);
+    });
 </script>
 
 <h1 class="text-center text-4xl font-bold">
@@ -17,7 +59,16 @@
 <div
     class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
 >
-    {#each data.regions as region}
-        <AdventureCard type="worldtravelregion" name={region.name} />
+    {#each data.regions as region (region.id)}
+        <AdventureCard
+            type="worldtravelregion"
+            regionId={region.id}
+            name={region.name}
+            on:markVisited={markVisited}
+            visited={data.visitedRegions.some(
+                (visitedRegion) => visitedRegion.region_id === region.id,
+            )}
+            on:removeVisit={removeVisit}
+        />
     {/each}
 </div>