From eadf001b392d11fd825bc7c33aad4cdb03c2399c Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Tue, 4 Jun 2024 21:18:30 +0000
Subject: [PATCH] feat: Add search functionality to navbar

---
 src/lib/components/Navbar.svelte |  3 +++
 src/routes/search/+page.svelte   | 33 +++++++++++++++++++-------------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 109efbb..6627940 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -100,9 +100,12 @@
           <li>
             <label class="input input-bordered flex items-center gap-2">
               <input type="text" class="grow" placeholder="Search" />
+              <!-- svelte-ignore a11y-click-events-have-key-events -->
+              <!-- svelte-ignore a11y-no-static-element-interactions -->
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 16"
+                on:click={() => goToSearch()}
                 fill="currentColor"
                 class="w-4 h-4 opacity-70"
                 ><path
diff --git a/src/routes/search/+page.svelte b/src/routes/search/+page.svelte
index f2c59a3..0cd41db 100644
--- a/src/routes/search/+page.svelte
+++ b/src/routes/search/+page.svelte
@@ -12,21 +12,22 @@
   let adventureArray: Adventure[] = data.props?.adventures as Adventure[];
 
   const filter: SubmitFunction = async ({ formData }) => {
-    const radioValue = formData.get("visited");
-    const typeValue = formData.get("type");
+    visitedValue = formData.get("visited") as string;
+    typeValue = formData.get("type") as string;
     const value = new URLSearchParams(location.search).get("value");
-    console.log(value);
+
     console.log(
-      `/api/search?value=${value}&type=${typeValue}&visited=${radioValue}`
+      `/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
     );
-    let data = await fetch(
-      `/api/search?value=${value}&type=${typeValue}&visited=${radioValue}`
+
+    let response = await fetch(
+      `/api/search?value=${value}&type=${typeValue}&visited=${visitedValue}`
     );
-    console.log(data);
-    adventureArray = [];
-    let res = await data.json();
+    console.log(response);
+
+    let res = await response.json();
     adventureArray = res.adventures as Adventure[];
-    console.log(radioValue);
+    console.log("TEST" + visitedValue + " " + typeValue);
   };
 </script>
 
@@ -38,7 +39,7 @@
       value="all"
       class="radio radio-primary"
       bind:group={visitedValue}
-      checked
+      checked={visitedValue === "all"}
     />
     All
     <input
@@ -47,6 +48,7 @@
       name="visited"
       value="false"
       class="radio radio-primary"
+      checked={visitedValue === "false"}
     />
     Not Visited
     <input
@@ -55,6 +57,7 @@
       name="visited"
       value="true"
       class="radio radio-primary"
+      checked={visitedValue === "true"}
     />
     Visited
     <br />
@@ -64,6 +67,7 @@
       value=""
       class="radio radio-primary"
       bind:group={typeValue}
+      checked={typeValue === ""}
     />
     All
     <input
@@ -72,22 +76,25 @@
       value="activity"
       class="radio radio-primary"
       bind:group={typeValue}
+      checked={typeValue === "activity"}
     />
     Activity
     <input
       type="radio"
       name="type"
-      bind:group={typeValue}
       value="location"
       class="radio radio-primary"
+      bind:group={typeValue}
+      checked={typeValue === "location"}
     />
     Location
     <input
       type="radio"
-      bind:group={typeValue}
       name="type"
       value="name"
       class="radio radio-primary"
+      bind:group={typeValue}
+      checked={typeValue === "name"}
     />
     Name
     <!-- submit button -->