chore: Add trip selection to AddFromFeatured component

src/lib/components/AddFromFeatured.svelte

@@ -1,24 +1,29 @@
 <script lang="ts">
-  import type { Adventure } from "$lib/utils/types";
+  import type { Adventure, Trip } from "$lib/utils/types";
   import { createEventDispatcher } from "svelte";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
   let modal: HTMLDialogElement;
 
+  let trips: Trip[] = [];
+
   export let adventure: Adventure;
 
-  onMount(() => {
+  onMount(async () => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
     if (modal) {
       modal.showModal();
     }
+    let res = await fetch("/api/trips");
+    trips = await res.json();
+    console.log(trips);
   });
 
   function close() {
     dispatch("close");
   }
 
-  function viisted() {
+  function visited() {
     dispatch("visited");
     close();
   }
@@ -27,6 +32,11 @@
     close();
   }
 
+  function trip(trip: Trip) {
+    dispatch("trip", trip);
+    close();
+  }
+
   function handleKeydown(event: KeyboardEvent) {
     if (event.key === "Escape") {
       close();
@@ -41,10 +51,35 @@
     <h3 class="font-bold text-lg">
       Where should Adventure: {adventure.name} be added?
     </h3>
-    <button class="btn btn-primary mr-2" on:click={viisted}
+    <div class="flex items-center justify-center">
+      <button class="btn btn-primary mr-2" on:click={visited}
         >Visited Adventures</button
       >
-    <button class="btn btn-primary" on:click={idea}>Adventure Idea</button>
+      <button class="btn btn-primary mr-2" on:click={idea}
+        >Adventure Idea</button
+      >
+      <details class="dropdown">
+        <summary class="m-1 btn">Add to Trip</summary>
+        <ul
+          class="p-2 shadow menu dropdown-content z-[1] bg-base-100 rounded-box w-52"
+        >
+          {#each trips as trip}
+            <li>
+              <button
+                class="btn btn-primary"
+                on:click={() => {
+                  dispatch("trip", trip);
+                  close();
+                }}
+              >
+                {trip.name}
+              </button>
+            </li>
+          {/each}
+        </ul>
+      </details>
+      <div class="h-32"></div>
       <button class="btn btn-neutral" on:click={close}>Close</button>
     </div>
+  </div>
 </dialog>

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

@@ -2,6 +2,7 @@ import { db } from "$lib/db/db.server";
 import { userPlannedTrips } from "$lib/db/schema";
 import { error, type RequestEvent } from "@sveltejs/kit";
 import { and, eq } from "drizzle-orm";
+import type { Trip } from "$lib/utils/types";
 
 export async function POST(event: RequestEvent): Promise<Response> {
   if (!event.locals.user) {
@@ -37,7 +38,6 @@ export async function POST(event: RequestEvent): Promise<Response> {
       description: description || null,
       startDate: startDate || null,
       endDate: endDate || null,
-      adventures: JSON.stringify([]),
     })
     .returning({ insertedId: userPlannedTrips.id })
     .execute();
@@ -78,13 +78,6 @@ export async function GET(event: RequestEvent): Promise<Response> {
     .where(eq(userPlannedTrips.userId, event.locals.user.id))
     .execute();
 
-  // json parse the adventures into an Adventure array
-  for (let trip of trips) {
-    if (trip.adventures) {
-      trip.adventures = JSON.parse(trip.adventures as unknown as string);
-    }
-  }
-
   return new Response(JSON.stringify(trips), {
     status: 200,
     headers: {

src/routes/featured/+page.svelte

@@ -2,7 +2,7 @@
   export let data;
   import { goto } from "$app/navigation";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
-  import type { Adventure } from "$lib/utils/types.js";
+  import type { Adventure, Trip } from "$lib/utils/types.js";
   import AddFromFeatured from "$lib/components/AddFromFeatured.svelte";
   import { addAdventure } from "../../services/adventureService.js";
   import SucessToast from "$lib/components/SucessToast.svelte";
@@ -26,6 +26,33 @@
     adventureToAdd = event.detail;
   }
 
+  const addToTrip = async (event: { detail: Trip }) => {
+    if (!adventureToAdd) {
+      showToast("Failed to add adventure");
+      adventureToAdd = null;
+    } else {
+      let detailAdventure = adventureToAdd;
+      detailAdventure.tripId = event.detail.id;
+      detailAdventure.type = "planner";
+      console.log(detailAdventure);
+      let res = await fetch("/api/planner", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          detailAdventure,
+        }),
+      });
+      if (res.status === 401) {
+        goto("/login");
+      } else {
+        showToast("Adventure added to trip!");
+        adventureToAdd = null;
+      }
+    }
+  };
+
   async function addToVisted() {
     let detailAdventure = adventureToAdd;
     adventureToAdd = null;
@@ -79,6 +106,7 @@
     on:close={() => (adventureToAdd = null)}
     on:visited={addToVisted}
     on:idea={addIdea}
+    on:trip={addToTrip}
   />
 {/if}