Update router configuration to fix some errors

front/src/components/library/Albums.vue

@@ -96,7 +96,7 @@ const fetchData = async () => {
 }
 
 const store = useStore()
-watch(store.state.moderation.lastUpdate, fetchData)
+watch(() => store.state.moderation.lastUpdate, fetchData)
 onBeforeRouteUpdate(fetchData)
 fetchData()
 

front/src/components/library/Artists.vue

@@ -99,7 +99,7 @@ const fetchData = async () => {
 }
 
 const store = useStore()
-watch([store.state.moderation.lastUpdate, excludeCompilation], fetchData)
+watch([() => store.state.moderation.lastUpdate, excludeCompilation], fetchData)
 onBeforeRouteUpdate(fetchData)
 fetchData()
 

front/src/components/library/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <main
-    :key="$router.currentRoute.value.name"
+    :key="$route.name"
     v-title="labels.title"
   >
     <section class="ui vertical stripe segment">

front/src/components/library/Library.vue

@@ -1,5 +1,5 @@
 <template>
   <div class="main pusher page-library">
-    <router-view :key="$router.currentRoute.value.fullPath" />
+    <router-view :key="$route.fullPath" />
   </div>
 </template>

front/src/components/library/Podcasts.vue

@@ -101,7 +101,7 @@ const fetchData = async () => {
 }
 
 const store = useStore()
-watch(store.state.moderation.lastUpdate, fetchData)
+watch(() => store.state.moderation.lastUpdate, fetchData)
 onBeforeRouteUpdate(fetchData)
 fetchData()
 

front/src/router/index.ts

@@ -32,22 +32,22 @@ console.log('PROCESS', import.meta.env)
 export default createRouter({
   history: createWebHistory(import.meta.env.VUE_APP_ROUTER_BASE_URL as string ?? '/'),
   linkActiveClass: 'active',
-  scrollBehavior (to, from, savedPosition) {
+  // TODO (wvffle): uncomment
-    if (to.meta.preserveScrollPosition) {
+  // scrollBehavior (to, from, savedPosition) {
-      return savedPosition ?? { left: 0, top: 0 }
+    // if (to.meta.preserveScrollPosition) {
-    }
+    //   return savedPosition ?? { left: 0, top: 0 }
+    // }
 
-    return new Promise(resolve => {
+    // return new Promise(resolve => {
-      setTimeout(() => {
+    //   setTimeout(() => {
-        if (to.hash) {
+    //     if (to.hash) {
-          resolve({ el: to.hash, behavior: 'smooth' })
+    //       resolve({ el: to.hash, behavior: 'smooth' })
-        }
+    //     }
 
-        const pos = savedPosition ?? { left: 0, top: 0 }
+    //     resolve(savedPosition ?? { left: 0, top: 0 })
-        resolve(pos)
+    //   }, 100)
-      }, 100)
+    // })
-    })
+  // },
-  },
   routes: [
     {
       path: '/',
@@ -120,13 +120,12 @@ export default createRouter({
     {
       path: '/search',
       name: 'search',
-      component: () =>
+      component: () => import('~/views/Search.vue'),
-        import('~/views/Search.vue'),
       props: route => ({
         initialId: route.query.id,
         initialType: route.query.type || 'artists',
         initialQuery: route.query.q,
-        initialPage: parseInt(route.query.page as string) || 1
+        initialPage: route.query.page ? +route.query.page : undefined
       })
     },
     {
@@ -240,7 +239,7 @@ export default createRouter({
         import('~/components/favorites/List.vue'),
       props: route => ({
         defaultOrdering: route.query.ordering,
-        defaultPage: route.query.page
+        defaultPage: route.query.page ? +route.query.page : undefined
       })
     },
     {
@@ -634,7 +633,7 @@ export default createRouter({
             defaultTags: Array.isArray(route.query.tag || [])
               ? route.query.tag
               : [route.query.tag],
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -651,7 +650,7 @@ export default createRouter({
             defaultTags: Array.isArray(route.query.tag || [])
               ? route.query.tag
               : [route.query.tag],
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -667,7 +666,7 @@ export default createRouter({
             defaultTags: Array.isArray(route.query.tag || [])
               ? route.query.tag
               : [route.query.tag],
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -683,7 +682,7 @@ export default createRouter({
             defaultTags: Array.isArray(route.query.tag || [])
               ? route.query.tag
               : [route.query.tag],
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -700,7 +699,7 @@ export default createRouter({
             defaultTags: Array.isArray(route.query.tag || [])
               ? route.query.tag
               : [route.query.tag],
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -713,7 +712,7 @@ export default createRouter({
           props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -727,7 +726,7 @@ export default createRouter({
             scope: 'me',
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -763,7 +762,7 @@ export default createRouter({
           props: route => ({
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {
@@ -775,7 +774,7 @@ export default createRouter({
             scope: 'me',
             defaultOrdering: route.query.ordering,
             defaultQuery: route.query.query,
-            defaultPage: route.query.page
+            defaultPage: route.query.page ? +route.query.page : undefined
           })
         },
         {