From 51435d0742cbf45190dc3a61c25da9712862dda4 Mon Sep 17 00:00:00 2001
From: Kasper Seweryn <github@wvffle.net>
Date: Sat, 30 Apr 2022 20:07:40 +0200
Subject: [PATCH] Fix currentRoute

---
 front/src/components/audio/PlayButton.vue | 2 +-
 front/src/components/library/Home.vue     | 2 +-
 front/src/components/library/Library.vue  | 2 +-
 front/src/init/axios.ts                   | 4 ++--
 front/src/types.ts                        | 4 ++--
 front/src/utils/index.ts                  | 7 ++++---
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 420511c70..8bb50d74d 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -193,7 +193,7 @@ export default {
       return null
     },
     onTrackPage () {
-      return this.$router.currentRoute.name === 'library.tracks.detail'
+      return this.$router.currentRoute.value.name === 'library.tracks.detail'
     }
   },
   watch: {
diff --git a/front/src/components/library/Home.vue b/front/src/components/library/Home.vue
index 3f321569b..e020fee8c 100644
--- a/front/src/components/library/Home.vue
+++ b/front/src/components/library/Home.vue
@@ -1,6 +1,6 @@
 <template>
   <main
-    :key="$router.currentRoute.name"
+    :key="$router.currentRoute.value.name"
     v-title="labels.title"
   >
     <section class="ui vertical stripe segment">
diff --git a/front/src/components/library/Library.vue b/front/src/components/library/Library.vue
index 784cc5aba..3ed9fc055 100644
--- a/front/src/components/library/Library.vue
+++ b/front/src/components/library/Library.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="main pusher page-library">
-    <router-view :key="$router.currentRoute.fullPath" />
+    <router-view :key="$router.currentRoute.value.fullPath" />
   </div>
 </template>
 
diff --git a/front/src/init/axios.ts b/front/src/init/axios.ts
index 027f31041..c2542fc3f 100644
--- a/front/src/init/axios.ts
+++ b/front/src/init/axios.ts
@@ -29,8 +29,8 @@ export const install: InitModule = ({ app, store, router }) => {
     error.backendErrors = []
     if (store.state.auth.authenticated && !store.state.auth.oauth.accessToken && error.response.status === 401) {
       store.commit('auth/authenticated', false)
-      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.fullPath)
-      await router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+      logger.default.warn('Received 401 response from API, redirecting to login form', router.currentRoute.value.fullPath)
+      await router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
     }
 
     if (error.response.status === 404) {
diff --git a/front/src/types.ts b/front/src/types.ts
index 1f0f64434..6f0dde11c 100644
--- a/front/src/types.ts
+++ b/front/src/types.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import type { Store } from 'vuex'
-import type VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 
 declare global {
   interface Window {
@@ -12,7 +12,7 @@ declare global {
 // App structure stuff
 export interface InitModuleContext {
   app: App
-  router: VueRouter
+  router: Router
   store: Store<any>
 }
 
diff --git a/front/src/utils/index.ts b/front/src/utils/index.ts
index 43bd61898..dfb34ba93 100644
--- a/front/src/utils/index.ts
+++ b/front/src/utils/index.ts
@@ -1,6 +1,6 @@
 import { startCase } from 'lodash-es'
 import { Store } from 'vuex'
-import VueRouter from 'vue-router'
+import { Router } from 'vue-router'
 import { APIErrorResponse } from '~/types'
 
 export function setUpdate (obj: object, statuses: { [key: string]: unknown }, value: unknown) {
@@ -51,9 +51,10 @@ export function setCsrf (xhr: XMLHttpRequest) {
   }
 }
 
-export async function checkRedirectToLogin (store: Store<any>, router: VueRouter) {
+// TODO (wvffle): Use navigation guards
+export async function checkRedirectToLogin (store: Store<any>, router: Router) {
   if (!store.state.auth.authenticated) {
-    return router.push({ name: 'login', query: { next: router.currentRoute.fullPath } })
+    return router.push({ name: 'login', query: { next: router.currentRoute.value.fullPath } })
   }
 }