feat: Add saveAdventure function to adventureService

The code changes include adding a new function called saveAdventure to the adventureService module. This function is responsible for sending a PUT request to the corresponding API endpoint to save an adventure. If the request is successful, the local adventure array is updated with the new data. If the request fails, an empty array is returned to allow for handling errors.

src/routes/planner/+page.svelte

@@ -4,6 +4,8 @@
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import EditModal from "$lib/components/EditModal.svelte";
   import MoreFieldsInput from "$lib/components/CreateNewAdventure.svelte";
+  import { saveAdventure } from "../../services/adventureService.js";
+  import SucessToast from "$lib/components/SucessToast.svelte";
   export let data;
   let plans: Adventure[] = [];
   let isLoading = true;
@@ -16,10 +18,23 @@
 
   let isShowingMoreFields: boolean = false;
 
+  let isShowingToast: boolean = false;
+  let toastAction: string = "";
+
   let adventureToEdit: Adventure | undefined;
 
   console.log(data);
 
+  function showToast(action: string) {
+    toastAction = action;
+    isShowingToast = true;
+
+    setTimeout(() => {
+      isShowingToast = false;
+      toastAction = "";
+    }, 3000);
+  }
+
   function editPlan(event: { detail: number }) {
     const adventure = plans.find((adventure) => adventure.id === event.detail);
     if (adventure) {
@@ -32,36 +47,15 @@
     isShowingMoreFields = false;
   }
 
-  function savePlan(event: { detail: Adventure }) {
+  async function savePlan(event: { detail: Adventure }) {
-    console.log("Event", event.detail);
+    let newArray = await saveAdventure(event.detail, plans);
-    let detailAdventure = event.detail;
+    if (newArray.length > 0) {
-
+      plans = newArray;
-    // put request to /api/visits with id and adventure data
+      showToast("Adventure updated successfully!");
-    fetch("/api/planner", {
+    } else {
-      method: "PUT",
+      showToast("Failed to update adventure");
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        detailAdventure,
-      }),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        console.log("Success:", data);
-        // update local array with new data
-        const index = plans.findIndex(
-          (adventure) => adventure.id === detailAdventure.id
-        );
-        if (index !== -1) {
-          plans[index] = detailAdventure;
     }
     adventureToEdit = undefined;
-        // showToast("Adventure edited successfully!");
-      })
-      .catch((error) => {
-        console.error("Error:", error);
-      });
   }
 
   function removeAdventure(event: { detail: number }) {
@@ -124,6 +118,10 @@
   };
 </script>
 
+{#if isShowingToast}
+  <SucessToast action={toastAction} />
+{/if}
+
 <div class="flex flex-row items-center justify-center gap-4">
   <button
     type="button"

src/services/adventureService.ts

@@ -1 +1,85 @@
 import type { Adventure } from "$lib/utils/types";
+
+// json that maps the type to api routes
+const apiRoutes: { [key: string]: string } = {
+  planner: "/api/planner",
+  mylog: "/api/visits",
+};
+
+/**
+ * Saves an adventure by sending a PUT request to the corresponding API endpoint.
+ * If the request is successful, the local adventure array is updated with the new data.
+ * If the request fails, an empty array is returned to allow for handling errors.
+ * @param adventure - The adventure object to be saved.
+ * @param adventureArray - The array of adventures to be updated.
+ * @returns A promise that resolves to the updated adventure array.
+ */
+export async function saveAdventure(
+  adventure: Adventure,
+  adventureArray: Adventure[]
+): Promise<Adventure[]> {
+  const detailAdventure = adventure;
+  const type = detailAdventure.type;
+  const url = apiRoutes[type];
+
+  // put request to /api/visits with id and adventure data
+  const response = await fetch(url, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      detailAdventure,
+    }),
+  });
+
+  if (response.ok) {
+    // update local array with new data
+    const index = adventureArray.findIndex(
+      (adventure) => adventure.id === detailAdventure.id
+    );
+    if (index !== -1) {
+      adventureArray[index] = detailAdventure;
+    }
+    // showToast("Adventure edited successfully!");
+  } else {
+    console.error("Error:", response.statusText);
+    adventureArray = [];
+  }
+
+  return adventureArray;
+}
+
+/**
+ * function savePlan(event: { detail: Adventure }) {
+    console.log("Event", event.detail);
+    let detailAdventure = event.detail;
+
+    // put request to /api/visits with id and adventure data
+    fetch("/api/planner", {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        detailAdventure,
+      }),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log("Success:", data);
+        // update local array with new data
+        const index = plans.findIndex(
+          (adventure) => adventure.id === detailAdventure.id
+        );
+        if (index !== -1) {
+          plans[index] = detailAdventure;
+        }
+        adventureToEdit = undefined;
+        // showToast("Adventure edited successfully!");
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  }
+    */