From 7327fefe155070e2ee2af41f87c0b4c3f5e4e972 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 27 Apr 2024 16:54:20 +0000
Subject: [PATCH] Refactor EditModal component to use adventureToEdit prop
 instead of individual props

---
 src/lib/components/EditModal.svelte | 23 +++++++--------------
 src/lib/components/Navbar.svelte    |  4 ++++
 src/routes/log/+page.svelte         | 31 ++++++++++-------------------
 src/routes/planner/+page.server.ts  |  0
 src/routes/planner/+page.svelte     |  1 +
 5 files changed, 22 insertions(+), 37 deletions(-)
 create mode 100644 src/routes/planner/+page.server.ts
 create mode 100644 src/routes/planner/+page.svelte

diff --git a/src/lib/components/EditModal.svelte b/src/lib/components/EditModal.svelte
index baecd7b..a2c1f09 100644
--- a/src/lib/components/EditModal.svelte
+++ b/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>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 48997b2..3f799de 100644
--- a/src/lib/components/Navbar.svelte
+++ b/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"
diff --git a/src/routes/log/+page.svelte b/src/routes/log/+page.svelte
index 5849516..071b5eb 100644
--- a/src/routes/log/+page.svelte
+++ b/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}
   />
diff --git a/src/routes/planner/+page.server.ts b/src/routes/planner/+page.server.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/planner/+page.svelte b/src/routes/planner/+page.svelte
new file mode 100644
index 0000000..9c5b367
--- /dev/null
+++ b/src/routes/planner/+page.svelte
@@ -0,0 +1 @@
+<h1>Welcome to the planner</h1>