From 7ce1662b0522d3097090605e3325c704545dead1 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Mon, 15 Apr 2024 20:20:32 +0200
Subject: [PATCH] fix(web): remove query parameter when clearing search (#8817)

fix: remove query parameter when clearing search
---
 web/src/lib/utils/navigation.ts           |  9 +++++++++
 web/src/routes/(user)/people/+page.svelte | 15 ++++++++-------
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/web/src/lib/utils/navigation.ts b/web/src/lib/utils/navigation.ts
index 4dfd92ca78..a91c4a739f 100644
--- a/web/src/lib/utils/navigation.ts
+++ b/web/src/lib/utils/navigation.ts
@@ -1,3 +1,12 @@
+import { goto } from '$app/navigation';
+
 export const isExternalUrl = (url: string): boolean => {
   return new URL(url, window.location.href).origin !== window.location.origin;
 };
+
+export const clearQueryParam = async (queryParam: string, url: URL) => {
+  if (url.searchParams.has(queryParam)) {
+    url.searchParams.delete(queryParam);
+    await goto(url);
+  }
+};
diff --git a/web/src/routes/(user)/people/+page.svelte b/web/src/routes/(user)/people/+page.svelte
index c313650fa7..6172c76c3a 100644
--- a/web/src/routes/(user)/people/+page.svelte
+++ b/web/src/routes/(user)/people/+page.svelte
@@ -40,6 +40,7 @@
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
   import { locale } from '$lib/stores/preferences.store';
+  import { clearQueryParam } from '$lib/utils/navigation';
 
   export let data: PageData;
 
@@ -279,10 +280,7 @@
 
   const handleSearchPeople = async (force: boolean) => {
     if (searchName === '') {
-      if ($page.url.searchParams.has(QueryParameter.SEARCHED_PEOPLE)) {
-        $page.url.searchParams.delete(QueryParameter.SEARCHED_PEOPLE);
-        await goto($page.url);
-      }
+      await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
       return;
     }
     if (!force && people.length < maximumLengthSearchPeople && searchName.startsWith(searchWord)) {
@@ -393,6 +391,11 @@
       handleError(error, 'Unable to save name');
     }
   };
+
+  const onResetSearchBar = async () => {
+    searchedPeople = [];
+    await clearQueryParam(QueryParameter.SEARCHED_PEOPLE, $page.url);
+  };
 </script>
 
 <svelte:window bind:innerHeight use:shortcut={{ shortcut: { key: 'Escape' }, onShortcut: handleCloseClick }} />
@@ -421,9 +424,7 @@
               bind:name={searchName}
               isSearching={isSearchingPeople}
               placeholder="Search people"
-              on:reset={() => {
-                searchedPeople = [];
-              }}
+              on:reset={onResetSearchBar}
               on:search={({ detail }) => handleSearch(detail.force ?? false)}
             />
           </div>