Add trip launch button to TripCard component and create server routes for trip API

src/lib/components/TripCard.svelte

@@ -58,6 +58,10 @@
         ><iconify-icon icon="mdi:trash-can-outline" class="text-2xl"
         ></iconify-icon></button
       >
+      <button class="btn btn-primary" on:click={() => goto(`/trip/${trip.id}`)}
+        ><iconify-icon icon="mdi:launch" class="text-2xl"
+        ></iconify-icon></button
+      >
     </div>
   </div>
 </div>

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

@@ -0,0 +1,51 @@
+import { db } from "$lib/db/db.server";
+import { adventureTable, userPlannedTrips } from "$lib/db/schema";
+import type { Adventure, Trip } from "$lib/utils/types";
+import { json, type RequestEvent, type RequestHandler } from "@sveltejs/kit";
+import { and, eq } from "drizzle-orm";
+
+/**
+ * Handles the GET request for retrieving a trip.
+ * @param {Request} request - The request object.
+ * @param {Response} response - The response object.
+ * @returns {Promise<void>} - A promise that resolves when the request is handled.
+ */
+export const GET: RequestHandler = async ({ url, locals }) => {
+  const id = url.searchParams.get("id");
+  const user = locals.user;
+
+  if (!user) {
+    return json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (!id) {
+    return json({ error: "Missing adventure ID" }, { status: 400 });
+  }
+
+  const trip = await db
+    .select()
+    .from(userPlannedTrips)
+    .where(
+      and(
+        eq(userPlannedTrips.id, Number(id)), // Convert id to number
+        eq(userPlannedTrips.userId, user.id)
+      )
+    )
+    .limit(1)
+    .execute();
+
+  if (trip.length === 0) {
+    return json({ error: "Trip not found" }, { status: 404 });
+  }
+
+  JSON.stringify(
+    trip.map((r) => {
+      const adventure: Trip = r as Trip;
+    })
+  );
+
+  //   console.log("GET /api/adventure?id=", id);
+  //   console.log("User:", user);
+
+  return json({ trip }, { status: 200 });
+};

src/routes/trip/[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, userPlannedTrips } from "$lib/db/schema";
+
+export const load: PageServerLoad = (async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+
+  let adventureUserId: any[] = await db
+    .select({ userId: userPlannedTrips.userId })
+    .from(userPlannedTrips)
+    .where(eq(userPlannedTrips.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 trip = await event.fetch(`/api/trip?id=${event.params.id}`);
+
+  return { trip: await trip.json() };
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Adventure, Trip } from "$lib/utils/types";
+  import { onMount } from "svelte";
+  import type { PageData } from "./$types";
+  import { goto } from "$app/navigation";
+
+  export let data: PageData;
+
+  let trip: Trip | null = null;
+
+  onMount(() => {
+    if (data.trip.trip) {
+      trip = data.trip.trip[0];
+    } else {
+      goto("/404");
+    }
+  });
+</script>
+
+<main>
+  {#if trip}
+    <h1>{trip.name}</h1>
+    <p>{trip.description}</p>
+    <p>{trip.startDate}</p>
+    <p>{trip.endDate}</p>
+  {/if}
+</main>