Fix param persistence when switching styles or maps (#25)

Author: dowoge

src/components/SearchBoxMap.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
+  import { ref } from 'vue';
   import type { Ref } from 'vue';
   import OffstylesApi from '@/api/offstylesApi';
   import loadWheel from './icons/loadWheel.vue';
@@ -31,7 +31,6 @@
       isLoading.value = false;
     }, 600);
   }
-  const params = computed(()=>{return urlParams.get()});
 </script>
 
 <template>
@@ -44,7 +43,7 @@
     class="rounded-lg bg-main-800 text-left border border-transparent focus-within:border-main-50 py-2 px-3 text-sm leading-5 text-gray-200 placeholder:text-gray-500 outline-none">
     <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block z-[999]" v-if="showAutoCompleteDropdown && currentInput">
       <loadWheel v-if="isLoading" class="text-gray-300 flex mx-auto w-6 h-6"></loadWheel>
-      <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/maps/${result}/?${params}`, query:urlParams.getAsObject()}" :key="index"
+      <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/maps/${result}/`, query:urlParams.clearPage()}" :key="index"
         @click="$emit('updateMap', result); showAutoCompleteDropdown = false"
         class="py-1 px-1.5 hover:bg-main-600 rounded-sm block truncate">{{ result }}
       </router-link>

src/components/SearchBoxPlayer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { ref, computed } from 'vue';
+  import { ref } from 'vue';
   import type { Ref } from 'vue';
   import OffstylesApi from '@/api/offstylesApi';
   import loadWheel from './icons/loadWheel.vue';
@@ -31,7 +31,6 @@
         }
     }, 600);
   }
-  const params = computed(()=>{return urlParams.get()});
 </script>
 
 <template>
@@ -44,7 +43,7 @@
     class="rounded-lg bg-main-800 text-left border border-transparent focus-within:border-main-50 py-2 px-3 text-sm leading-5 text-gray-200 placeholder:text-gray-500 outline-none">
     <div class="absolute top-full w-full rounded-lg bg-main-900 border border-main-100 text-sm text-gray-300 mt-1 py-2 px-2 shadow-xl/20 hidden group-focus-within:block z-[999]" v-if="showAutoCompleteDropdown && currentInput">
       <loadWheel v-if="isLoading" class="text-gray-300 flex mx-auto w-6 h-6"></loadWheel>
-      <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/players/${result[1]}/?${params}`, query:urlParams.getAsObject()}" :key="index"
+      <router-link v-else v-for="(result, index) in autoCompleteResults.slice(0, 6)" :to="{path:`/players/${result[1]}/`, query:urlParams.clearPage()}" :key="index"
         @click="$emit('updatePlayer', result[1]); showAutoCompleteDropdown = false"
         class="py-1 px-1.5 hover:bg-main-600 rounded-sm block truncate">{{ result[0] }}
       </router-link>

src/components/TimesListPagination.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
-import type { Ref } from 'vue';
 import type { Time } from '@/types/Time';
-import { ref, computed } from 'vue';
-import urlParams from '@/utils/urlParams';
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
   const props = defineProps<{
     limitPerPage: number,
     times: Time[] | null,
     isLoading: boolean
   }>()
   const emit = defineEmits(['pagination-Changed']);
-  const currentPage : Ref<number> = ref(urlParams.getAsObject().page ? Number(urlParams.getAsObject().page) : 1);
+  const route = useRoute();
+  
+  // Make currentPage reactive to URL changes
+  const currentPage = computed(() => {
+    const pageParam = route.query.page;
+    return pageParam ? Number(pageParam) : 1;
+  });
 
   function paginationChanged(page : number){
-    currentPage.value = page;
-    emit('pagination-Changed', currentPage.value);
+    emit('pagination-Changed', page);
   }
 </script>
 

src/utils/urlParams.ts

@@ -5,6 +5,9 @@ const update = function(name: string, value : number | string) {
   if(name === 'style' && value === Style.all){
     params.delete(name);
   }
+  if(name === 'style') {
+    params.delete('page');
+  }
   //cant use router outside of setup component, so need to return the new query and use there instead
   return Object.fromEntries(params)
 };
@@ -19,4 +22,10 @@ const getAsObject = function(){
   return Object.fromEntries(params)
 }
 
-export default {update, get, getAsObject};
+const clearPage = function() {
+  const params = new URLSearchParams(window.location.search);
+  params.delete('page');
+  return Object.fromEntries(params)
+}
+
+export default {update, get, getAsObject, clearPage};