Refactor AdventureCard component and add new adventure page

src/lib/components/AdventureCard.svelte

@@ -14,7 +14,6 @@
   export let id: Number | undefined = undefined;
   export let regionId: String | undefined = undefined;
   export let visited: Boolean | undefined = undefined;
-  export let countryCode: String | undefined = undefined;
 
   function remove() {
     dispatch("remove", id);
@@ -35,7 +34,8 @@
   }
 
   function moreInfo() {
-    goto(`/worldtravel/${countryCode}/${regionId}`);
+    console.log(id);
+    goto(`/adventure/${id}`);
   }
 </script>
 
@@ -60,6 +60,7 @@
       {#if type == "mylog"}
         <button class="btn btn-primary" on:click={edit}>Edit</button>
         <button class="btn btn-secondary" on:click={remove}>Remove</button>
+        <button class="btn btn-primary" on:click={moreInfo}>Info</button>
       {/if}
       {#if type == "featured"}
         <button class="btn btn-primary" on:click={add}>Add</button>

src/routes/adventure/[id]/+page.server.ts

@@ -0,0 +1,32 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import { db } from "$lib/db/db.server";
+import { and, eq } from "drizzle-orm";
+import { adventureTable } from "$lib/db/schema";
+
+export const load = (async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+
+  let adventureUserId = await db
+    .select({ userId: adventureTable.userId })
+    .from(adventureTable)
+    .where(eq(adventureTable.id, Number(event.params.id)))
+    .limit(1)
+    .execute();
+
+  console.log(adventureUserId);
+
+  if (
+    adventureUserId &&
+    adventureUserId[0]?.userId !== event.locals.user.id &&
+    adventureUserId !== null
+  ) {
+    return redirect(302, "/log");
+  }
+
+  let adventure = await event.fetch(`/api/adventure?id=${event.params.id}`);
+
+  return { adventure: await adventure.json() };
+}) satisfies PageServerLoad;

src/routes/adventure/[id]/+page.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Adventure } from "$lib/utils/types";
+  import { onMount } from "svelte";
+  import type { PageData } from "./$types";
+  import { goto } from "$app/navigation";
+
+  export let data: PageData;
+
+  let adventure: Adventure;
+
+  onMount(() => {
+    if (data.adventure.adventure) {
+      adventure = data.adventure.adventure[0];
+    } else {
+      goto("/404");
+    }
+  });
+</script>
+
+{#if !adventure}
+  <div class="flex justify-center items-center w-full mt-16">
+    <span class="loading loading-spinner w-24 h-24"></span>
+  </div>
+{:else}
+  <h1 class="text-center font-extrabold text-4xl">{adventure.name}</h1>
+  <p>{adventure.location}</p>
+{/if}

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

@@ -27,7 +27,8 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     .where(
       and(
         eq(adventureTable.id, Number(id)), // Convert id to number
-        eq(adventureTable.userId, user.id)
+        eq(adventureTable.userId, user.id),
+        eq(adventureTable.type, "mylog")
       )
     )
     .limit(1)

src/routes/featured/+page.svelte

@@ -50,10 +50,10 @@
     <AdventureCard
       type="featured"
       on:add={add}
+      id={adventure.id}
       name={adventure.name}
       location={adventure.location}
       date=""
-      id={NaN}
     />
   {/each}
 </div>