From dec15194e487850144e22c8ea79725015ec087cc Mon Sep 17 00:00:00 2001
From: Kevin <Kevin.Midboe@gmail.com>
Date: Sat, 27 Aug 2022 11:58:30 +0200
Subject: [PATCH] Fix: Search query reload (#79)

* On every route change, update local variables from query params

* ResultSection is keyed to query to force re-render

* Resolved lint warnings
---
 src/pages/SearchPage.vue | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/pages/SearchPage.vue b/src/pages/SearchPage.vue
index c870fae..056e33f 100644
--- a/src/pages/SearchPage.vue
+++ b/src/pages/SearchPage.vue
@@ -12,13 +12,18 @@
       </div>
     </div>
 
-    <ResultsSection v-if="query" :title="title" :api-function="search" />
+    <ResultsSection
+      v-if="query"
+      :key="query"
+      :title="title"
+      :api-function="search"
+    />
     <h1 v-else class="no-results">No query found, please search above</h1>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from "vue";
+  import { ref, computed, watch } from "vue";
   import { useRoute, useRouter } from "vue-router";
 
   import ResultsSection from "@/components/ResultsSection.vue";
@@ -45,12 +50,14 @@
 
   const title = computed(() => `Search results: ${query.value}`);
 
-  const urlQuery = route.query;
-  if (urlQuery && urlQuery?.query) {
-    query.value = decodeURIComponent(urlQuery?.query?.toString());
-    page.value = Number(urlQuery?.page) || 1;
-    adult.value = Boolean(urlQuery?.adult) || adult.value;
-    mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+  function readQueryParams() {
+    const urlQuery = route.query;
+    if (urlQuery && urlQuery?.query) {
+      query.value = decodeURIComponent(urlQuery?.query?.toString());
+      page.value = Number(urlQuery?.page) || 1;
+      adult.value = Boolean(urlQuery?.adult) || adult.value;
+      mediaType.value = (urlQuery?.media_type as MediaTypes) || mediaType.value;
+    }
   }
 
   const search = (
@@ -73,6 +80,12 @@
   function toggleChanged() {
     updateQueryParams();
   }
+
+  readQueryParams();
+  watch(
+    () => route.fullPath,
+    () => readQueryParams()
+  );
 </script>
 
 <style lang="scss" scoped>