From 036b5edb02c945d0364c8c2d781a9fe3427d16d4 Mon Sep 17 00:00:00 2001
From: Vecko <VeckoTheGecko@users.noreply.github.com>
Date: Mon, 20 Nov 2023 22:38:38 +0800
Subject: [PATCH] Fixes #365 (with visual glitch)

For some reason, programmatically editing the filterObject doesn't reflect in the UI until the next screen refresh.
---
 src/lib/components/Search.svelte  |  2 +-
 src/routes/resources/+page.svelte | 11 +++++++++--
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
index d2e3bd3a..53eb8bf3 100644
--- a/src/lib/components/Search.svelte
+++ b/src/lib/components/Search.svelte
@@ -2,7 +2,7 @@
   import ButtonLinks from "./ButtonLinks.svelte"
   import { createEventDispatcher } from "svelte"
 
-  let searchTerm = ""
+  export let searchTerm = ""
 
   const dispatch = createEventDispatcher()
 
diff --git a/src/routes/resources/+page.svelte b/src/routes/resources/+page.svelte
index 04d082fc..40d3cb90 100644
--- a/src/routes/resources/+page.svelte
+++ b/src/routes/resources/+page.svelte
@@ -25,6 +25,7 @@
   let displayedResources = resources
   let filterByTags: Resource[]
   let tagLogicAnd: boolean = true // Whether all the selected tags must match the resource (vs any of the selected tags)
+  let searchTerm: string = ""
   // TODO: make this a user preference
   $: tagLogic = tagLogicAnd ? "and" : "or"
 
@@ -44,7 +45,7 @@
   }
 
   function filterBySearchInput(event: CustomEvent<{ searchTerm: string }>) {
-    const { searchTerm } = event.detail
+    searchTerm = event.detail.searchTerm
 
     // Analytics
     mixpanel.track("Resource Search", {
@@ -66,6 +67,9 @@
     })
 
     displayedResources = searchResults
+
+    // Clear filterObject tags
+    filterObject.forEach((option) => (option.active = false))
   }
 
   const filterResources = (
@@ -76,6 +80,9 @@
   ) => {
     const { filterOptions, filterLogic } = event.detail
 
+    // Reset search term
+    searchTerm = ""
+
     // Reset displayed resources
     displayedResources = []
 
@@ -125,7 +132,7 @@
   <p class="italic">{resources.length} resources and counting!!</p>
 </div>
 <ResourceNav />
-<Search on:search={filterBySearchInput}></Search>
+<Search on:search={filterBySearchInput} {searchTerm}></Search>
 <FilterForm
   filterOptions={filterObject}
   filterLogicAnd={tagLogicAnd}