Refactor EditModal component to use adventureToEdit prop instead of individual props

src/lib/components/EditModal.svelte

@@ -1,15 +1,12 @@
 <script lang="ts">
-  export let editId: number = NaN;
-  export let editName: string = "";
-  export let editLocation: string = "";
-  export let editdate: string = "";
+  export let adventureToEdit: Adventure;
   import { createEventDispatcher } from "svelte";
   import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
   let modal: HTMLDialogElement;
 
-  let originalName = editName;
+  let originalName = adventureToEdit.name;
 
   onMount(() => {
     modal = document.getElementById("my_modal_1") as HTMLDialogElement;
@@ -19,14 +16,8 @@
   });
 
   function submit() {
-    const adventureEdited: Adventure = {
-      id: editId,
-      name: editName,
-      location: editLocation,
-      date: editdate,
-    };
-    dispatch("submit", adventureEdited);
-    console.log(adventureEdited);
+    dispatch("submit", adventureToEdit);
+    console.log(adventureToEdit);
   }
 
   function close() {
@@ -56,7 +47,7 @@
           <input
             type="text"
             id="name"
-            bind:value={editName}
+            bind:value={adventureToEdit.name}
             class="input input-bordered w-full max-w-xs"
           />
         </div>
@@ -65,7 +56,7 @@
           <input
             type="text"
             id="location"
-            bind:value={editLocation}
+            bind:value={adventureToEdit.location}
             class="input input-bordered w-full max-w-xs"
           />
         </div>
@@ -74,7 +65,7 @@
           <input
             type="date"
             id="date"
-            bind:value={editdate}
+            bind:value={adventureToEdit.date}
             class="input input-bordered w-full max-w-xs"
           />
         </div>

src/lib/components/Navbar.svelte

@@ -78,6 +78,10 @@
       <button class="btn btn-primary my-2 md:my-0 md:mr-4" on:click={goToLog}
         >My Log</button
       >
+      <button
+        class="btn btn-primary my-2 md:my-0 md:mr-4"
+        on:click={() => goto("/planner")}>Planner</button
+      >
     {/if}
     <button
       class="btn btn-primary my-2 md:my-0 md:mr-4"

src/routes/log/+page.svelte

@@ -17,10 +17,11 @@
   let newName = "";
   let newLocation = "";
 
-  let editId: number = NaN;
-  let editName: string = "";
-  let editLocation: string = "";
-  let editdate: string = "";
+  // let editId: number = NaN;
+  // let editName: string = "";
+  // let editLocation: string = "";
+  // let editdate: string = "";
+  let adventureToEdit: Adventure | undefined;
 
   let isShowingToast: boolean = false;
   let toastAction: string = "";
@@ -133,10 +134,7 @@
         adventures = adventures.map((adventure) =>
           adventure.id === event.detail.id ? event.detail : adventure
         );
-        editId = NaN;
-        editName = "";
-        editLocation = "";
-        editdate = "";
+        adventureToEdit = undefined;
         showToast("Adventure edited successfully!");
       })
       .catch((error) => {
@@ -149,10 +147,7 @@
       (adventure) => adventure.id === event.detail
     );
     if (adventure) {
-      editId = adventure.id || 0;
-      editName = adventure.name || "";
-      editLocation = adventure.location || "";
-      editdate = adventure.date || "";
+      adventureToEdit = adventure;
     }
   }
 
@@ -179,10 +174,7 @@
   }
 
   function handleClose() {
-    editId = NaN;
-    editName = "";
-    editLocation = "";
-    editdate = "";
+    adventureToEdit = undefined;
   }
 
   function deleteData() {
@@ -272,12 +264,9 @@
   <SucessToast action={toastAction} />
 {/if}
 
-{#if !Number.isNaN(editId)}
+{#if adventureToEdit && adventureToEdit.id != undefined}
   <EditModal
-    bind:editId
-    bind:editName
-    bind:editLocation
-    bind:editdate
+    bind:adventureToEdit
     on:submit={saveAdventure}
     on:close={handleClose}
   />

src/routes/planner/+page.svelte

@@ -0,0 +1 @@
+<h1>Welcome to the planner</h1>