From 79d131c7ebc58c52996d07ad325d3a39a6e40692 Mon Sep 17 00:00:00 2001
From: Erb3 <49862976+Erb3@users.noreply.github.com>
Date: Wed, 29 Jan 2025 03:37:57 +0100
Subject: [PATCH] feat(frontend): update search to reset to page 1 (#3192)

Fixes #3176

**Changes**:

- Sets the pagination to page one if the search is updated. This is the norm on most websites, and how users expect it to work.
- Join `setPage` into `updateSearchResults`
  - Take a page number in `updateSearchResults`
- Remove unused param to `updateSearchResults`
- Update `watch` to not double requests
- use `scrollToTop` utility function
---
 .../src/pages/search/[searchProjectType].vue  | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/apps/frontend/src/pages/search/[searchProjectType].vue b/apps/frontend/src/pages/search/[searchProjectType].vue
index 02f750f2..28463d96 100644
--- a/apps/frontend/src/pages/search/[searchProjectType].vue
+++ b/apps/frontend/src/pages/search/[searchProjectType].vue
@@ -168,7 +168,7 @@
             name="Sort by"
             :options="sortTypes"
             :display-name="(option) => option?.display"
-            @change="updateSearchResults(1)"
+            @change="updateSearchResults()"
           >
             <span class="font-semibold text-primary">Sort by: </span>
             <span class="font-semibold text-secondary">{{ selected }}</span>
@@ -181,7 +181,7 @@
             :default-value="maxResults"
             :model-value="maxResults"
             class="!w-auto flex-grow md:flex-grow-0"
-            @change="updateSearchResults(1)"
+            @change="updateSearchResults()"
           >
             <span class="font-semibold text-primary">View: </span>
             <span class="font-semibold text-secondary">{{ selected }}</span>
@@ -206,7 +206,7 @@
             :page="currentPage"
             :count="pageCount"
             class="mx-auto sm:ml-auto sm:mr-0"
-            @switch-page="setPage"
+            @switch-page="updateSearchResults"
           />
         </div>
         <SearchFilterControl
@@ -296,7 +296,7 @@
             :page="currentPage"
             :count="pageCount"
             class="justify-end"
-            @switch-page="setPage"
+            @switch-page="updateSearchResults"
           />
         </div>
       </div>
@@ -545,19 +545,13 @@ const pageCount = computed(() =>
   results.value ? Math.ceil(results.value.total_hits / results.value.limit) : 1,
 );
 
-function setPage(newPageNumber) {
-  currentPage.value = newPageNumber;
-
-  window.scrollTo({ top: 0, behavior: "smooth" });
-
-  updateSearchResults();
-}
-
 function scrollToTop(behavior = "smooth") {
   window.scrollTo({ top: 0, behavior });
 }
 
-function updateSearchResults() {
+function updateSearchResults(pageNumber) {
+  currentPage.value = pageNumber || 1;
+  scrollToTop();
   noLoad.value = true;
 
   if (query.value === null) {
@@ -590,8 +584,8 @@ function updateSearchResults() {
   }
 }
 
-watch([currentFilters, requestParams], () => {
-  updateSearchResults();
+watch([currentFilters], () => {
+  updateSearchResults(1);
 });
 
 function cycleSearchDisplayMode() {