Add DELETE endpoint to visits API and update log page

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

@@ -2,7 +2,7 @@ import { lucia } from "$lib/server/auth";
 import type { RequestEvent } from "@sveltejs/kit";
 import { userVisitedAdventures } from "$lib/db/schema";
 import { db } from "$lib/db/db.server";
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import type { Adventure } from "$lib/utils/types";
 
 // Gets all the adventures that the user has visited
@@ -37,3 +37,39 @@ export async function GET(event: RequestEvent): Promise<Response> {
     }
   );
 }
+
+// deletes the adventure given the adventure id and the user object
+export async function DELETE(event: RequestEvent): Promise<Response> {
+  if (!event.locals.user) {
+    return new Response(JSON.stringify({ error: "No user found" }), {
+      status: 401,
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+  }
+
+  // get id from the body
+  const { id } = await event.request.json();
+
+  let res = await db
+    .delete(userVisitedAdventures)
+    .where(
+      and(
+        eq(userVisitedAdventures.userId, event.locals.user.id),
+        eq(userVisitedAdventures.adventureID, Number(id))
+      )
+    )
+    .execute();
+
+    console.log(res);
+    console.log(id);
+    console.log(event.locals.user.id);
+
+  return new Response(JSON.stringify({ id: id, res: res }), {
+    status: 200,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}

src/routes/log/+page.server.ts

@@ -1,5 +1,6 @@
 import { redirect } from "@sveltejs/kit";
 import type { PageServerLoad } from "./$types";
+import type { Adventure } from "$lib/utils/types";
 
 export const load: PageServerLoad = async (event) => {
   if (!event.locals.user) {
@@ -7,6 +8,7 @@ export const load: PageServerLoad = async (event) => {
   }
   const response = await event.fetch("/api/visits");
   const result = await response.json();
+  // let array = result.adventures as Adventure[];
   return {
     result,
   };

src/routes/log/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-  let adventures: Adventure[] = [];
   export let data;
+  let adventures: Adventure[] = [];
+
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import type { Adventure } from "$lib/utils/types";
   import {
@@ -8,7 +9,6 @@
     clearAdventures,
     getAdventures,
     getNextId,
-    removeAdventure,
     saveEdit,
   } from "../../services/adventureService";
   import { onMount } from "svelte";
@@ -32,6 +32,12 @@
   let isShowingToast: boolean = false;
   let toastAction: string = "";
 
+  // Sets the adventures array to the data from the server
+  onMount(async () => {
+    console.log(data);
+    adventures = data.result.adventures;
+  });
+
   function showToast(action: string) {
     toastAction = action;
     isShowingToast = true;
@@ -60,21 +66,15 @@
     showToast("added");
   };
 
-  onMount(async () => {
-    // adventures = getAdventures();
-    console.log(data.result);
-    adventures = data.result.adventures;
-  });
-
-  function triggerRemoveAdventure(event: { detail: number }) {
-    removeAdventure(event);
-    showToast("removed");
-    adventures = getAdventures();
-    // remove from data.result.adventures
-    data.result.adventures = data.result.adventures.filter(
-      (adventure: Adventure) => adventure.id !== event.detail
-    );
-  }
+  // function triggerRemoveAdventure(event: { detail: number }) {
+  //   removeAdventure(event);
+  //   showToast("removed");
+  //   adventures = getAdventures();
+  //   // remove from data.result.adventures
+  //   data.result.adventures = data.result.adventures.filter(
+  //     (adventure: Adventure) => adventure.id !== event.detail,
+  //   );
+  // }
 
   function saveAdventure(event: { detail: Adventure }) {
     console.log("Event" + event.detail);
@@ -89,7 +89,7 @@
 
   function editAdventure(event: { detail: number }) {
     const adventure = adventures.find(
-      (adventure) => adventure.id === event.detail
+      (adventure) => adventure.id === event.detail,
     );
     if (adventure) {
       editId = adventure.id;
@@ -132,6 +132,30 @@
     adventures = getAdventures();
     showToast("deleted");
   }
+
+  function removeAdventure(event: { detail: number }) {
+    console.log("Event ID " + event.detail);
+    // send delete request to server at /api/visits
+    fetch("/api/visits", {
+      method: "DELETE",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ id: event.detail }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // remove adventure from array where id matches
+        adventures = adventures.filter(
+          (adventure) => adventure.id !== event.detail,
+        );
+        showToast("removed");
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
 </script>
 
 <div class="flex justify-center items-center w-full mt-4 mb-4">
@@ -183,15 +207,15 @@
 <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.result.adventures as adventure (adventure.id)}
+  {#each adventures as adventure (adventure.id)}
     <AdventureCard
       type="mylog"
       id={adventure.id}
       name={adventure.name}
       location={adventure.location}
       created={adventure.created}
-      on:remove={triggerRemoveAdventure}
       on:edit={editAdventure}
+      on:remove={removeAdventure}
     />
   {/each}
 </div>

src/services/adventureService.ts

@@ -7,13 +7,13 @@ import { visitCount } from "$lib/utils/stores/visitCountStore";
 // Check if localStorage is available (browser environment)
 const isBrowser = typeof window !== "undefined";
 
-// Load adventures from localStorage on startup (only in the browser)
-if (isBrowser) {
-  const storedAdventures = localStorage.getItem("adventures");
-  if (storedAdventures) {
-    adventures = JSON.parse(storedAdventures);
-  }
-}
+// // Load adventures from localStorage on startup (only in the browser)
+// if (isBrowser) {
+//   const storedAdventures = localStorage.getItem("adventures");
+//   if (storedAdventures) {
+//     adventures = JSON.parse(storedAdventures);
+//   }
+// }
 
 export function getNextId() {
   let nextId = Math.max(0, ...adventures.map((adventure) => adventure.id)) + 1;